amantahiliani/PeerNotes
1
0
Fork 0
mirror of https://github.com/AmanTahiliani/PeerNotes.git synced 2026-08-07 11:55:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix styling on login + signup page

Browse Source
This commit is contained in:
afazio1
2024-04-11 01:07:07 -04:00
parent 6556bb643b
commit 5d0f258e5f
3 changed files with 35 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/screens/Login.tsx
View File

@@ -3,15 +3,17 @@ import "../styles/Login.css"
export default function Login() { export default function Login() {
return ( return (
<main> <main>
<form> <form className="login-container">
<h1>Login</h1> <h1>Login</h1>
<div className="form-inputs"> <div className="form-input">
<label htmlFor="username">Username</label> <label htmlFor="username">Username</label>
<input type="text" name="username" id="username" /> <input type="text" name="username" id="username" />
</div>
<div className="form-input">
<label htmlFor="password">Password</label> <label htmlFor="password">Password</label>
<input type="password" name="password" id="password" /> <input type="password" name="password" id="password" />
</div> </div>
<button>Login</button> <button className="submit-button">Login</button>
<p>or <Link to="/signup">Sign up</Link></p> <p>or <Link to="/signup">Sign up</Link></p>
</form> </form>
</main> </main>

10
frontend/src/screens/Signup.tsx
View File

@@ -3,15 +3,17 @@ import "../styles/Login.css"
export default function Signup() { export default function Signup() {
return ( return (
<main> <main>
<form> <form className="login-container">
<h1>Sign Up</h1> <h1>Sign Up</h1>
<div className="form-inputs"> <div className="form-input">
<label htmlFor="username">Username</label> <label htmlFor="username">Username</label>
<input type="text" name="username" id="username" /> <input type="text" name="username" id="username" />
</div>
<div className="form-input">
<label htmlFor="password">Password</label> <label htmlFor="password">Password</label>
<input type="password" name="password" id="password" /> <input type="password" name="password" id="password" />
</div> </div>
<button>Sign up</button> <button className="submit-button">Sign up</button>
<p>or <Link to="/login">Login</Link></p> <p>or <Link to="/login">Login</Link></p>
</form> </form>
</main> </main>

26
frontend/src/styles/Login.css
View File

@@ -14,7 +14,29 @@ h1 {
text-align: center; text-align: center;
} }
.form-inputs { .form-input {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.login-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #B1D4E0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* shadow */;
width: 40vh;
}
.submit-button {
padding: 8px 16px;
margin-top: 20px; /* Adds space above the button */
background-color: #2E8BC0; /* Example background color */
color: white; /* Text color */
border: none;
border-radius: 4px;
cursor: pointer;
font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}