Code cleanup and add login icon to login modal

src/Components/Buttons/Button.tsx

@@ -27,8 +27,8 @@ export default function Button(props: props) {
           borderColor: colors.button_border,
           borderStyle: "solid",
           borderWidth: 2,
-          paddingBottom: "2vh",
+          paddingBottom: "0",
-          paddingTop: "2vh",
+          paddingTop: "0",
           paddingRight: "5vw",
           paddingLeft: "5vw",
           marginBottom: "0.5vh",

src/Components/LoginModal/LoginModal.tsx

@@ -1,35 +1,44 @@
 import { useState } from "react";
 import styles from "../../styles";
+import { colors } from "../../styles";
 import TextField from "@mui/material/TextField";
 import InputAdornment from "@mui/material/InputAdornment";
 import IconButton from "@mui/material/IconButton";
 import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
-
+import LoginIcon from "@mui/icons-material/Login";
+import Checkbox from "@mui/material/Checkbox";
+import Button from "../Buttons/Button";
 export default function LoginModal() {
   const [showPassword, setShowPassword] = useState(false);
+  const [remember, setRemember] = useState(true);
   const [user, setUser] = useState({
     username: "",
     password: "",
   });
   return (
     <>
-      <p style={{ ...styles.text_dark, ...styles.text_L }}>Welcome back!</p>
+      <div
+        style={{
+          ...styles.flex_row,
+          ...{ alignItems: "center", justifyContent: "center" },
+        }}
+      >
+        <LoginIcon
+          style={{
+            height: 64,
+            width: 64,
+            fill: colors.font_dark,
+          }}
+        />
+        <p style={{ ...styles.text_dark, ...styles.text_L }}>Welcome back!</p>
+      </div>
+
       <div style={styles.flex_column}>
         <TextField
           id="outlined-helperText"
           label="Username"
-          style={{
+          style={styles.input_form}
-            ...styles.text_dark,
-            ...styles.text_M,
-            ...{
-              background: "none",
-              borderRadius: 8,
-              minWidth: "15vw",
-              minHeight: "5vh",
-              marginTop: 16,
-            },
-          }}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
             setUser({ ...user, username: e.target.value })
           }
@@ -39,17 +48,7 @@ export default function LoginModal() {
         <TextField
           id="outlined-helperText"
           type={showPassword ? "text" : "password"}
-          style={{
+          style={styles.input_form}
-            ...styles.text_dark,
-            ...styles.text_M,
-            ...{
-              background: "none",
-              borderRadius: 8,
-              minWidth: "15vw",
-              minHeight: "5vh",
-              marginTop: 16,
-            },
-          }}
           InputProps={{
             endAdornment: (
               <InputAdornment position="end">
@@ -70,7 +69,48 @@ export default function LoginModal() {
           }
           value={user.password}
         />
+        <div style={styles.flex_row}>
+          <div
+            style={{
+              ...styles.flex_row,
+              ...{ flex: 1, alignItems: "center" },
+            }}
+          >
+            <Checkbox
+              inputProps={{ "aria-label": "Checkbox demo" }}
+              defaultChecked
+              sx={{
+                color: colors.button_dark,
+                "&.Mui-checked": {
+                  color: colors.button_dark,
+                },
+              }}
+              value={remember}
+              onChange={() => setRemember(!remember)}
+            />
+            <p style={{ ...styles.text_dark, ...styles.text_S }}>Remember me</p>
+          </div>
+          <div style={{ flex: 1 }}>
+            <p
+              style={{
+                ...styles.text_dark,
+                ...styles.text_S,
+              }}
+            >
+              Forgot password?
+            </p>
+          </div>
+        </div>
       </div>
+      <div
+        style={{
+          backgroundColor: colors.button_border,
+          width: "100%",
+          height: "2px",
+          marginBottom: 8,
+        }}
+      />
+      <Button type={"dark"} label={"Login"} onClick={() => {}} />
     </>
   );
 }

src/styles.tsx

@@ -64,6 +64,18 @@ const styles: { [key: string]: React.CSSProperties } = {
     display: "flex",
     flexDirection: "column",
   },
+  input_form: {
+    color: colors.font_dark,
+    fontWeight: "bold",
+    fontSize: "clamp(1vw, 1rem, 2vw)",
+    background: "none",
+    borderRadius: 8,
+    maxWidth: "30vw",
+    minWidth: "15vw",
+    minHeight: "5vh",
+    maxHeight: "10vh",
+    marginTop: 16,
+  },
 };
 
 export default styles;