add cosmetic changes to log in sign up

Author: Aishwarya Nair

Frontend/src/Components/LoginSignUp/Login.jsx

@@ -17,7 +17,7 @@ export const Login = ({setAction}) => {
 
 
   return (
-    <div>
+    <div className = "login-container">
         <div className="inputs">
             <div className="input">
                 <div className="input-container">

Frontend/src/Components/LoginSignUp/LoginSignUp.css

@@ -1,4 +1,4 @@
-.container-login {
+.container-loginsignup {
     display: flex;
     flex-direction: column;
     margin: auto;
@@ -84,7 +84,7 @@
 .submit-container {
     display: flex;
     gap: 30px;
-    margin: 40px auto;
+    margin: auto;
 }
 
 .submit {
@@ -104,4 +104,37 @@
 .gray {
     background: #e9e9e9;
     color: #676767;
-}
+}
+
+.signup-nav {
+    display:flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.signup-nav span{
+    color: #1f76ef;
+}
+
+.login-nav {
+    display:flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.login-nav span{
+    color: #1f76ef;
+}
+
+.login-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.signup-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+

Frontend/src/Components/LoginSignUp/LoginSignUp.jsx

@@ -11,7 +11,7 @@ export const LoginSignUp = () => {
     const [action, setAction] = useState("Log In");
 
   return (
-    <div className="container-login">
+    <div className="container-loginsignup">
         <div className="header">
             <div className="text"> {action} </div>
             <div className="underline"></div>

Frontend/src/Components/LoginSignUp/SignUp.jsx

@@ -18,7 +18,7 @@ export const SignUp = (setAction) => {
     const [preferredLang, setPreferredLang] = useState("");
 
   return (
-    <div>
+    <div className = "signup-container">
         <div className="inputs">
             <div className="input">
                 <div className="input-container">