Update fork

app/src/pages/login/Login.css

@@ -1,42 +1,86 @@
 * {
-    font-family: 'Brush Script MT', cursive;
+    font-family: 'Helvetica';
 }
 
-.login_container, .login_form, .login_button {
+/* Linear gradient for the entire page */
+body {
+    background-image: linear-gradient(
+        to bottom, 
+        rgb(255 255 255 / 20%) 40%,
+        rgb(91 133 176 / 80%) 100%
+      ), url('../../../public/marblebackground.jpg');
+}
+
+h1 {
+    font-weight: bold;
+    font-family: 'Verdana';
+    font-size: 2.6em;
+    margin: 20px auto;
+}
+
+/* Text inside the input pills */
+input::placeholder {
+    color: white;
+    opacity: 1; /* Firefox */
+    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.89);
+  }
+
+/* Border when selecting the input pills */
+input:focus {
+    outline: solid 2px black;
+}
+
+/* The input pills (also known as ovals)*/
+.oval {
+    width: 210px;
+    height: 40px;
+    border-radius: 30px;
+    border-width: 0px;
+    background-color: rgba(151, 190, 193, 0.58);
+    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-weight: bolder;
+    margin: 5px;
+    padding-left: 10px;
+  }
+
+/* Our logo */
+.image{
+    padding: 20px auto 0px auto;
+    height: 30vh;
+    display: block;
+    margin: 4vh auto 0;
+    width: 33vh;
+}
+
+.login_container, .login_form {
     display: flex;
     flex-direction: column;
-    background-color: white;
 }
 
 .login_container {
     width: 100%;
     height: 100vh;
     margin: 0;
     align-items: center;
-    background-image: radial-gradient(
-        farthest-corner at 40px 40px,
-        rgb(126, 150, 231) 0%,
-        rgb(30, 138, 93) 100%
-      );
-}
 
-.login_form {
-    padding: 10px 20px 15px 20px;
-    margin-top: 35vh;
 }
 
-.login_button {
-    margin: 20px auto 0;
-    width: 40%;
-    background-color: azure;
-    font-weight: bold;
-    align-items: center;
+.login_form {
+    padding: 10px 20px 5px 20px;
 }
 
-.register_button {
-    margin-top: 40px;
-    font-size: 10px;
-    width: 30vh;
+/* The forgot password link */
+.forgot_password{
+    display: block;
+    padding: 10px;
+    margin: auto; 
+    font-family: 'Verdana';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 15px;
+    line-height: 19px;
+    color: rgba(0, 0, 0, 0.33);
+    text-decoration: none;
 }
 
 button{
@@ -46,4 +90,34 @@ button{
 
 label {
     text-align: left;
+}
+
+/* The login and sign up buttons */
+.btn{
+width: 100px;
+margin: 10px auto 0px;
+font-family: sans-serif;
+font-weight: 0;
+font-size: 14px;
+color: #fff;
+background: linear-gradient(90deg, #5a84af 0%, #335e61 100%);
+padding: 10px 30px;
+border: none;
+box-shadow: rgb(0, 0, 0) 0px 5px 6px -3px;
+border-radius: 50px;
+transition : 1000ms;
+display: flex;
+flex-direction: column;
+align-items: center;
+cursor: pointer;
+}
+
+/* The animation that plays when you hover over the login and sign up buttons */
+.btn:hover{
+transition : 1000ms;
+padding: 10px 40px;
+transform : translateY(-1px);
+background: linear-gradient(90deg, #5a84af 0%, #335e61 100%);
+color: #ffffff;
+border: solid 1px #0066cc;
 }

app/src/pages/login/Login.js

@@ -36,14 +36,20 @@ const Login = () => {
 
     return (
     <div className="login_container">
-        <form onSubmit={sendSubmit} className="login_form">
-            <label htmlFor ="Email">Email</label>
-            <input value={email} type="email" onChange={(foo) => setEmail(foo.target.value)} placeholder="Email" name="Email" id="Email" />
-            <label htmlFor ="Password">Password</label>
-            <input value={password} type="password" onChange={(foo) => setPassword(foo.target.value)} placeholder="********" name="Password" id="Password" />
-            <button className="login_button" type="submit">Log In</button>
-        </form>
-        <button className="register_button">Don't have a LifeQuest account? <br/> Register here.</button>
+        {/* Our logo */}
+        <img className="image" src="/logo.png" alt="Logo"></img>
+            <h1>LifeQuest</h1>
+            {/* The login form which is tied to function sendSubmit() */}
+            <form onSubmit={sendSubmit} className="login_form">
+                <input className="oval" value={email} type="email" onChange={(foo) => setEmail(foo.target.value)} placeholder="Email" name="Email" id="Email" />
+                <input className="oval" value={password} type="password" onChange={(foo) => setPassword(foo.target.value)} placeholder="Password" name="Password" id="Password" />
+                {/* The forgot password link */}
+                <a className="forgot_password" href="url">Forgot password?</a>
+                {/* The login button */}
+                <button className="btn" type="submit">Login</button>
+            </form>
+            {/* The signup button */}
+            <button className="btn">Signup</button>
     </div>
   );
 };

app/src/tests/AppJs.test.js

@@ -23,7 +23,7 @@ describe("App Routing", () => {
         <App />
       </MemoryRouter>
     );
-    expect(screen.getByText("Email")).toBeInTheDocument();
+    expect(screen.getByText("LifeQuest")).toBeInTheDocument();
   });
 
   test("renders Home component when navigating to '/home'", () => {

app/src/tests/LoginPage.test.js

@@ -11,21 +11,19 @@ import {
 
 describe('LoginPage', () => {
     it('renders without crashing', () => {
-        const {getByText, getByLabelText} = render(
+        const {getByPlaceholderText} = render(
         <BrowserRouter>
             <Routes>
                 <Route path="/" element={<LoginPage />} />
             </Routes>
         </BrowserRouter>
         );
 
-        const emailLabel = getByText(/Email/i)
-        const passwordLabel = getByText(/Password/i)
 
-        const emailInput = getByLabelText(/Email/i);
+        const emailInput = getByPlaceholderText(/Email/i);
         expect(emailInput).toHaveAttribute('type', 'email');
 
-        const passwordInput = getByLabelText(/Password/i);
+        const passwordInput = getByPlaceholderText(/Password/i);
         expect(passwordInput).toHaveAttribute('type', 'password');
 
     });