Added and polished the header bar

src/components/Header/Header.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import AppLogo from "../Icons/AppLogo/AppLogo";
+import Login from "../Login/Login";
 import styles from "../../styles";
 
 export default function Header() {
@@ -9,7 +10,9 @@ export default function Header() {
         <AppLogo size={64} color="#6f9b78" />
         <p style={styles.logo_title}>Ivy</p>
       </div>
-      <div style={styles.header_right}></div>
+      <div style={styles.header_right}>
+        <Login />
+      </div>
     </div>
   );
 }

src/components/Login/Login.tsx

@@ -1,5 +1,49 @@
-import React from "react";
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { toggle } from "../../Features/Login/LoginSlice";
+import { Button } from "@mui/material";
+import styles from "../../styles";
 
-export default function Login() {
-  return <div>{"Login"}</div>;
+export interface state {
+  logged_in: {
+    value: boolean;
+  };
+}
+export default function Login() {
+  const logged_in = useSelector((state: state) => state.logged_in.value);
+  const [status, setStatus] = useState("Not logged in");
+  const dispatch = useDispatch();
+
+  async function login() {
+    await dispatch(toggle());
+    if (logged_in) {
+      setStatus("Logged in");
+    } else {
+      setStatus("Not logged in");
+    }
+    await console.log("test " + logged_in);
+  }
+
+  if (logged_in) {
+    return <p style={styles.text}>Welcome Jophiel</p>;
+  } else {
+    return (
+      <div>
+        <Button
+          onClick={login}
+          value="Login"
+          style={{
+            backgroundColor: "#9e8500",
+            width: 128,
+            height: 32,
+            border: "none",
+            padding: 8,
+            borderRadius: 16,
+          }}
+        >
+          <p style={styles.text}>Login</p>
+        </Button>
+      </div>
+    );
+  }
 }

src/styles.tsx

@@ -18,7 +18,7 @@ const styles: { [key: string]: React.CSSProperties } = {
   },
   logo_title: {
     color: "#6c9575",
-    fontSize: 18,
+    fontSize: 26,
     fontWeight: "bold",
   },
   header_container: {
@@ -27,8 +27,6 @@ const styles: { [key: string]: React.CSSProperties } = {
     position: "sticky",
     backgroundColor: "#3d4848",
     top: 0,
-    paddingTop: 8,
-    paddingBottom: 8,
     paddingRight: 32,
     paddingLeft: 32,
   },
@@ -37,12 +35,14 @@ const styles: { [key: string]: React.CSSProperties } = {
     flexDirection: "row",
     width: "50%",
     justifyContent: "left",
+    alignItems: "center",
   },
   header_right: {
     display: "flex",
     flexDirection: "row",
     width: "50%",
     justifyContent: "right",
+    alignItems: "center",
   },
 };