add log in and sign up page

Author: Aishwarya Nair

peer-prep/src/App.js

@@ -1,11 +1,10 @@
-import logo from './logo.svg';
 import './App.css';
 import { LoginSignUp } from './Components/LoginSignUp/LoginSignUp';
 
 function App() {
   return (
     <div>
-      <LoginSignUp></LoginSignUp>
+      <LoginSignUp/>
     </div>
   );
 }

peer-prep/src/Components/Assets/password.png

@@ -0,0 +1,102 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    margin-top: 100px;
+    width: 600px;
+    background: #fff;
+    padding-bottom: 30px;
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 9px;
+    width: 100%;
+    margin-top: 30px;
+}
+
+.text {
+    color: #000;
+    font-size: 48px;
+    font-weight: 700;
+}
+
+.underline {
+    width: 61px;
+    height: 6px;
+    background: #52CC65;
+    border-radius: 9px;
+}
+
+.input img {
+    width: 30px;
+    height: 30px;
+    margin: 0px 30px;
+}
+
+.inputs {
+    margin-top: 55px;
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+}
+
+.input {
+    display: flex;
+    align-items: center;
+    margin: auto;
+    width: 480px;
+    height: 80px;
+    background: #e9e9e9;
+    border-radius: 5px;
+
+}
+
+.input input {
+    height: 50px;
+    width: 400px;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: #797979;
+    font-size: 19px;
+}
+
+.forgot-password {
+    padding-left: 62px;
+    margin-top: 27px;
+    color: #797979;
+    font-size: 18px;
+}
+
+.forgot-password span {
+    color: #52CC65;
+    cursor: pointer;
+}
+
+.submit-container {
+    display: flex;
+    gap: 30px;
+    margin: 60px auto;
+}
+
+.submit {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 150px;
+    height: 70px;
+    color: #fff;
+    background: #52CC65;
+    border-radius: 10px;
+    font-size: 19px;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.gray {
+    background: #e9e9e9;
+    color: #676767;
+}

peer-prep/src/Components/Assets/user.png

@@ -1,8 +1,38 @@
 import React from 'react'
 import './LoginSignUp.css'
+import {useState} from 'react'
+
+import password_icon from '../Assets/password.png'
+import user_icon from '../Assets/user.png'
 
 export const LoginSignUp = () => {
+    const [action, setAction] = useState("Log In");
   return (
-    <div>LoginSignUp</div>
+    <div className="container">
+        <div className="header">
+            <div className="text"> {action} </div>
+            <div className="underline"></div>
+        </div>
+        <div className="inputs">
+            <div className="input">
+                <img src= {user_icon} alt="" />
+                <input type="text" placeholder = "Username"/>
+            </div>
+            <div className="input">
+                <img src= {password_icon} alt="" />
+                <input type="password" placeholder = "Password"/>
+            </div>
+        </div>
+        {action === "Sign Up" ? <div></div>: <div className="forgot-password"> Forgot Password? <span> Click Here.</span></div>}
+        <div className="submit-container">
+            <div className={action==="Sign Up"? "submit gray": "submit"} 
+            onClick = {() => {setAction("Log In")}}>Log In</div>
+            <div className={action==="Log In"? "submit gray": "submit"} 
+            onClick = {() => {setAction("Sign Up")}}>Sign Up</div>
+        </div>
+    </div>
+    
   )
 }
+
+

peer-prep/src/Components/LoginSignUp/LoginSignUp.css

@@ -5,6 +5,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  height: 100vh;
 }
 
 code {