Added initial login logic

src/Components/Icons/LoginIcon/LoginIcon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function LoginIcon(props: props) {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      stroke={props.color}
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
+      <path d="M20 12h-13l3 -3m0 6l-3 -3"></path>
+    </svg>
+  );
+}

src/Components/Login/Login.tsx

@@ -1,7 +1,8 @@
 import { useSelector, useDispatch } from "react-redux";
-import { toggle } from "../../Features/Login/LoginSlice";
+import { toggle_login } from "../../Features/Login/LoginSlice";
 import { Button } from "@mui/material";
 import styles from "../../styles";
+import { useNavigate } from "react-router-dom";
 
 export interface state {
   logged_in: {
@@ -10,9 +11,10 @@ export interface state {
 }
 export default function Login() {
   const logged_in = useSelector((state: state) => state.logged_in.value);
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   async function login() {
-    await dispatch(toggle());
+    await dispatch(toggle_login());
     await console.log("Login State Toggled " + logged_in);
   }
 
@@ -24,7 +26,7 @@ export default function Login() {
     return (
       <div>
         <Button
-          onClick={login}
+          onClick={() => navigate("/Login")}
           value="Login"
           variant="contained"
           style={styles.login_button}

src/Components/Logout/Logout.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useDispatch } from "react-redux";
-import { toggle } from "../../Features/Login/LoginSlice";
+import { toggle_login } from "../../Features/Login/LoginSlice";
 import { Button } from "@mui/material";
 import styles from "../../styles";
 import { useNavigate } from "react-router-dom";
@@ -19,7 +19,7 @@ export default function Logout(props: props) {
   const navigate = useNavigate();
 
   async function logout() {
-    await dispatch(toggle());
+    await dispatch(toggle_login());
     navigate("/");
   }