modified the sign in style

relates #186

Author: SaraDahman

client/src/components/Signin/Signin.css

@@ -1,35 +1,70 @@
-.signIn-container {  background: #ffffff;
+.signIn-container {  
+  background: #ffffff;
   width: 52%;
   box-shadow: 0px 8px 32px 16px rgba(68, 170, 238, 0.19);
-  padding-top: 20px;
+  padding: 2rem 4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+}
+
+.signIn-container .header-2 {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.signIn-container .header-2 a {
+  height: auto;
+  flex-shrink: 0;
 }
-h3 {
+
+.signIn-container .header-2 a button {
+  height: auto;
+}
+
+.signIn-container main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+}
+
+.signIn-container main h3 {
   text-align: center;
-  padding-top: 50px;
   font-family: "Inter", sans-serif;
-  font-weight: bold;
+  font-weight: 600;
+  font-size: 2rem;
 }
-.inputs-container {
-  width: 100%;
+
+.signIn-container main form {
   display: flex;
-  height: 300px;
-  margin-bottom:50px;
-  justify-content: center;
-  align-items: center;
-  gap: 20px;
+  height: 100%;
+  align-items: flex-start;
   flex-direction: column;
+  gap: 1.5rem;
+}
+
+.signIn-container main form > div {
+  width: 100%;
 }
+
 .inputs {
   width: 80%;
 }
 
 .submit-login {
-  width: 80%;
-  height: 35px;
+  margin-top: 1rem;
+  width: 100%;
   background-color: #1b4b66;
   color: white;
   font-size: 16px;
   border-radius: 6px;
+  height: 35px;
+  border-radius: 10px;
   cursor: pointer;
   font-family: "Inter", sans-serif;
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
@@ -40,3 +75,32 @@ h3 {
   outline: #1b4b66 1px solid;
   transition: border-color 0.5s, background-color 0.5s, color 0.5s;
 }
+
+@media (min-width: 992px) and (max-width: 1199.98px) {
+  .signIn-container {
+    padding: 2rem 3rem;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991.98px) {
+  .signIn-container {
+    padding: 2rem;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .signIn-container {
+    width: 100%;
+    height: 100%;
+    padding: 2rem;
+  }
+
+  .signIn-container main {
+    align-items: center;
+    justify-content: center;
+  }
+
+  .signIn-container main form {
+    width: 100%;
+  }
+}

client/src/components/Signin/Signin.tsx

@@ -75,53 +75,41 @@ const Signin:FC = () => {
       </Box>
 
       {/* Form section */}
-      <Box className="form-container-signin">
+      <main>
         <Typography variant="h3">
-          SignIn
+          Login
         </Typography>
         <form onSubmit={(e) => formik.handleSubmit(e)}>
-          <Box className="inputs-container">
-            <TextField
-              className="inputs"
-              InputProps={{
-                style: {
-                  padding: '10px',
-                },
-              }}
-              id="email"
-              name="email"
-              label="Email"
-              variant="standard"
-              onChange={formik.handleChange}
-              error={formik.touched.email
+          <TextField
+            className="inputs"
+            id="email"
+            name="email"
+            label="Email"
+            variant="standard"
+            onChange={formik.handleChange}
+            error={formik.touched.email
                     && Boolean(formik.errors.email)}
-              helperText={formik.touched.email
+            helperText={formik.touched.email
                     && formik.errors.email}
-            />
-            <TextField
-              className="inputs"
-              InputProps={{
-                style: {
-                  padding: '10px',
-                },
-              }}
-              type="password"
-              id="password"
-              name="password"
-              label="Password"
-              variant="standard"
-              onChange={formik.handleChange}
-              error={formik.touched.password
+          />
+          <TextField
+            className="inputs"
+            type="password"
+            id="password"
+            name="password"
+            label="Password"
+            variant="standard"
+            onChange={formik.handleChange}
+            error={formik.touched.password
                     && Boolean(formik.errors.password)}
-              helperText={formik.touched.password
+            helperText={formik.touched.password
                     && formik.errors.password}
-            />
-            { loading ? <Loading className="loading" />
-              : <button type="submit" className="submit-login"> Login </button>}
+          />
+          { loading ? <Loading className="loading" />
+            : <button type="submit" className="submit-login"> Login </button>}
 
-          </Box>
         </form>
-      </Box>
+      </main>
     </Box>
   );
 };