From 5d0f258e5f6cfa6ee578185f08383d50fe8e391c Mon Sep 17 00:00:00 2001
From: afazio1 <alexa.fazio04@gmail.com>
Date: Thu, 11 Apr 2024 01:07:07 -0400
Subject: [PATCH] fix styling on login + signup page

---
 frontend/src/screens/Login.tsx  |  8 +++++---
 frontend/src/screens/Signup.tsx | 10 ++++++----
 frontend/src/styles/Login.css   | 26 ++++++++++++++++++++++++--
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/frontend/src/screens/Login.tsx b/frontend/src/screens/Login.tsx
index 2d9011f..3fa1142 100644
--- a/frontend/src/screens/Login.tsx
+++ b/frontend/src/screens/Login.tsx
@@ -3,15 +3,17 @@ import "../styles/Login.css"
 export default function Login() {
     return (
         <main>
-            <form>
+            <form className="login-container">
                 <h1>Login</h1>
-                <div className="form-inputs">
+                <div className="form-input">
                     <label htmlFor="username">Username</label>
                     <input type="text" name="username" id="username" />
+                </div>
+                <div className="form-input">
                     <label htmlFor="password">Password</label>
                     <input type="password" name="password" id="password" />
                 </div>
-                <button>Login</button>
+                <button className="submit-button">Login</button>
                 <p>or <Link to="/signup">Sign up</Link></p>
             </form>
         </main>
diff --git a/frontend/src/screens/Signup.tsx b/frontend/src/screens/Signup.tsx
index e674985..1f1fbb2 100644
--- a/frontend/src/screens/Signup.tsx
+++ b/frontend/src/screens/Signup.tsx
@@ -3,15 +3,17 @@ import "../styles/Login.css"
 export default function Signup() {
     return (
         <main>
-            <form>
+            <form className="login-container">
                 <h1>Sign Up</h1>
-                <div className="form-inputs">
+                <div className="form-input">
                     <label htmlFor="username">Username</label>
                     <input type="text" name="username" id="username" />
+                </div>
+                <div className="form-input">
                     <label htmlFor="password">Password</label>
                     <input type="password" name="password" id="password" />
-                </div>  
-                <button>Sign up</button>
+                </div>
+                <button className="submit-button">Sign up</button>
                 <p>or <Link to="/login">Login</Link></p>
             </form>
         </main>
diff --git a/frontend/src/styles/Login.css b/frontend/src/styles/Login.css
index f50e3da..3fbe8c4 100644
--- a/frontend/src/styles/Login.css
+++ b/frontend/src/styles/Login.css
@@ -14,7 +14,29 @@ h1 {
     text-align: center;
 }
 
-.form-inputs {
+.form-input {
     display: flex;
     flex-direction: column;
-}
\ No newline at end of file
+}
+
+  .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;
+  }
\ No newline at end of file