Added initial login modal

src/Components/Buttons/Button.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import styles from "../styles";
-import { colors } from "../styles";
+import styles from "../../styles";
+import { colors } from "../../styles";
 
 export interface props {
   onClick: React.MouseEventHandler<HTMLButtonElement>;

src/Components/LoginModal/LoginModal.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import styles from "../../styles";
+import TextField from "@mui/material/TextField";
+import OutlinedInput from "@mui/material/OutlinedInput";
+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";
+
+export default function LoginModal() {
+  const [showPassword, setShowPassword] = useState(false);
+  const [user, setUser] = useState({
+    username: "",
+    password: "",
+  });
+  return (
+    <>
+      <p style={{ ...styles.text_dark, ...styles.text_L }}>Welcome back!</p>
+      <div style={styles.flex_column}>
+        <TextField
+          id="outlined-helperText"
+          label="Username"
+          style={{
+            ...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 })
+          }
+          value={user.username}
+          placeholder={"Enter username"}
+        />
+        <TextField
+          id="outlined-helperText"
+          type={showPassword ? "text" : "password"}
+          style={{
+            ...styles.text_dark,
+            ...styles.text_M,
+            ...{
+              background: "none",
+              borderRadius: 8,
+              minWidth: "15vw",
+              minHeight: "5vh",
+              marginTop: 16,
+            },
+          }}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={() => setShowPassword(!showPassword)}
+                  edge="end"
+                >
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+          label="Password"
+          placeholder={"Enter password"}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setUser({ ...user, password: e.target.value })
+          }
+          value={user.password}
+        />
+      </div>
+    </>
+  );
+}

src/Components/styles.tsx

@@ -1,69 +0,0 @@
-export const colors = {
-  background: "#FFFFFF",
-  header_color: "#141762",
-  font_dark: "#141762",
-  font_light: "#FFFFFF",
-  button_dark: "#141762",
-  button_light: "#FFFFFF",
-  button_border: "#141762",
-  red: "#a44141",
-  orange: "#c57331",
-  green: "#80b28a",
-};
-const styles: { [key: string]: React.CSSProperties } = {
-  background: {
-    backgroundColor: colors.background,
-    position: "fixed",
-    top: 0,
-    left: 0,
-    height: "100%",
-    width: "100%",
-    minHeight: "100%",
-    minWidth: "100%",
-  },
-  text_dark: {
-    color: colors.font_dark,
-    fontWeight: "bold",
-  },
-  text_light: {
-    color: colors.font_light,
-    fontWeight: "bold",
-  },
-  text_red: {
-    color: colors.red,
-    fontWeight: "bold",
-  },
-  text_orange: {
-    color: colors.orange,
-    fontWeight: "bold",
-  },
-  text_green: {
-    color: colors.green,
-    fontWeight: "bold",
-  },
-  text_XL: {
-    fontSize: "clamp(1vw, 4rem, 2vw)",
-  },
-  text_L: {
-    fontSize: "clamp(1vw, 2rem, 2vw)",
-  },
-  text_M: {
-    fontSize: "clamp(1vw, 1rem, 2vw)",
-  },
-  text_S: {
-    fontSize: "clamp(1vw, 0.5rem, 2vw)",
-  },
-  text_XS: {
-    fontSize: "clamp(1vw, 0.2rem, 2vw)",
-  },
-  flex_row: {
-    display: "flex",
-    flexDirection: "row",
-  },
-  flex_column: {
-    display: "flex",
-    flexDirection: "column",
-  },
-};
-
-export default styles;