added and made chages to Login Modal

src/Components/API/API.tsx

@@ -23,7 +23,7 @@ import {
   TransactionCreateType,
 } from "../Types/Types";
 
-const debug = true;
+const debug = false;
 let backendURL;
 
 if (debug) {

src/Components/LoginModal/LoginModal.tsx

@@ -6,7 +6,6 @@ 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 "../Button/Button";
 import { useNavigate } from "react-router-dom";
@@ -14,6 +13,8 @@ import { LoginAPI } from "../API/API";
 import { useDispatch } from "react-redux";
 import { auth_toggle } from "../Plugins/Redux/Slices/AuthSlice/AuthSlice";
 import { toast } from "react-toastify";
+import Logo_dako from "../../assets/Logo_dako.png"
+
 export default function LoginModal() {
   const navigate = useNavigate();
   const [showPassword, setShowPassword] = useState(false);
@@ -28,25 +29,41 @@ export default function LoginModal() {
     <>
       <div
         style={{
-          ...styles.flex_row,
+          ...styles.flex_column,
           ...{
             alignItems: "center",
             justifyContent: "center",
-            overflowY: "scroll",
           },
         }}
       >
-        <LoginIcon
+        <img
-          style={{
+          style={{ width: "10rem", height: "auto", alignSelf: "center" }}
-            height: 64,
+          src={Logo_dako}
-            width: 64,
-            fill: colors.font_dark,
-          }}
         />
-        <p style={{ ...styles.text_dark, ...styles.text_L }}>Welcome back!</p>
+
+        <p
+          style={{
+            ...styles.text_normal,
+            fontSize: 16,
+            margin: "0",
+            marginTop: 15,
+          }}
+        >
+          Welcome back!
+        </p>
+        <p style={{ ...styles.text_normal, fontSize: 20, margin: "10" }}>
+          Sign In to Continue
+        </p>
       </div>
 
-      <div style={styles.flex_column}>
+      <div style={{flex: 1, backgroundColor: "pink", margin: "20px"}}>
+        <p style={{ ...styles.text_dark_red, ...styles.text_S, flex: 1, textAlign: "left",  marginLeft: 15}}>{error}</p>
+      </div>
+
+      <div style={{...styles.flex_column, marginTop: 30,
+          marginBottom: 20,
+          marginInline: 10,
+        }}>
         <TextField
           id="outlined-helperText"
           label="Username"
@@ -113,33 +130,45 @@ export default function LoginModal() {
           backgroundColor: colors.button_border,
           width: "100%",
           height: "2px",
-          marginBottom: 8,
+          marginBottom: "40px"
-        }}
-      />
-      <p style={{ ...styles.text_dark, ...styles.text_S }}>{error}</p>
-      <Button
-        type={"dark"}
-        label={"Login"}
-        onClick={async () => {
-          const status = await LoginAPI(user, remember_session);
-          if (status === true) {
-            await dispatch(auth_toggle());
-            navigate("/dashboard");
-            toast("Logged in", {
-              position: "top-right",
-              autoClose: 2000,
-              hideProgressBar: false,
-              closeOnClick: true,
-              pauseOnHover: true,
-              draggable: true,
-              progress: undefined,
-              theme: "light",
-            });
-          } else {
-            setError("Invalid login");
-          }
         }}
       />
+
+      <div style={{ margin: "10px", }}>
+        <button
+          onClick={async () => {
+            const status = await LoginAPI(user, remember_session);
+            if (status === true) {
+              await dispatch(auth_toggle());
+              navigate("/dashboard");
+              toast("Logged in", {
+                position: "top-right",
+                autoClose: 2000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                progress: undefined,
+                theme: "light",
+              });
+            } else {
+              setError("Invalid login");
+            }
+          }}
+          style={{
+            display: "flex",
+            padding: "25px 38px",
+            justifyContent: "center",
+            alignItems: "center",
+            background: "#FBB217",
+            height: "40px",
+            width: "100%",
+          }}
+        >
+          Login
+        </button>
+      </div>
+
     </>
   );
 }

src/styles.tsx

@@ -1,5 +1,5 @@
 export const colors = {
-  background: "#FFFFFF",
+  background: "#F2FAF4",
   header_color: "#b2dfab",
   font_dark: "#2e482e",
   font_light: "#0e410d",
@@ -11,9 +11,20 @@ export const colors = {
   green: "#80b28a",
   gray: "#8F8F8F",
   dark_green: "#17561D",
-  dark_blue: "#19639D"
+  dark_blue: "#19639D",
+
+  font_dark_red: "#570404",
+
+  dandelion: "#FBB217",
+
+  lightgreen: "#D9FFD8",
+  darkgreen: "#00360C",
+  lightorange: "#FEFFCD",
+  lightred: "#ECC4B8",
+
+  form_dark: "#000000",
+  form_title: "#1E1A4D"
 
-  
   
 };
 const styles: { [key: string]: React.CSSProperties } = {
@@ -30,7 +41,16 @@ const styles: { [key: string]: React.CSSProperties } = {
     overflowY: "scroll",
   },
 
- 
+  text_normal: {
+    color: colors.font_dark,
+    fontWeight: "500",
+  },
+  
+  text_dark_red: {
+    color: colors.font_dark_red,
+    fontWeight: "bold",
+  },
+
   text_dark: {
     color: colors.font_dark,
     fontWeight: "bold",