Added buttons to header and added login page

src/Components/Header/Header.tsx

@@ -2,7 +2,8 @@ import * as React from "react";
 
 import styles from "../../styles";
 import AppIcon from "../AppIcon/AppIcon";
-import Login from "../Login/Login";
+import Login from "../LoginButton/LoginButton";
+import HomeIcon from "../HomeIcon/HomeIcon";
 
 export default function Header() {
   return (
@@ -14,7 +15,10 @@ export default function Header() {
             ...{ flex: 2 },
           }}
         >
-          <AppIcon size="8vh" color="white" />
+          <HomeIcon size="5vh" color="white" />
+          <HomeIcon size="5vh" color="white" />
+          <HomeIcon size="5vh" color="white" />
+          <HomeIcon size="5vh" color="white" />
         </div>
         <div
           style={{
@@ -22,6 +26,7 @@ export default function Header() {
             ...{ flex: 6 },
           }}
         >
+          <AppIcon size="8vh" color="white" />
           <p style={styles.text_medium}>Clip Notes</p>
         </div>
         <div

src/Components/HomeIcon/HomeIcon.tsx

@@ -0,0 +1,44 @@
+import { Button } from "@mui/material";
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+
+export interface props {
+  size: string;
+  color: string;
+}
+
+export default function HomeIcon(props: props) {
+  const navigate = useNavigate();
+  return (
+    <Button
+      variant="contained"
+      style={{
+        backgroundColor: "#005997",
+        borderRadius: 16,
+        width: props.size,
+        height: props.size,
+        margin: 4,
+      }}
+      onClick={() => navigate("/")}
+    >
+      <div style={{ justifyContent: "center", alignContent: "center" }}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke={props.color}
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+          <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
+          <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
+          <path d="M10 12h4v4h-4z"></path>
+        </svg>
+      </div>
+    </Button>
+  );
+}

src/Components/LoginButton/LoginButton.tsx

@@ -1,10 +1,12 @@
 import * as React from "react";
 import { useState } from "react";
 import { Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
 import styles from "../../styles";
 
-export default function Login() {
+export default function LoginButton() {
   const [logged_in, setLoggedIn] = useState(false);
+  const navigate = useNavigate();
   if (!logged_in) {
     return (
       <div style={styles.flex_row}>
@@ -14,7 +16,7 @@ export default function Login() {
           style={styles.button_green}
           variant="contained"
           onClick={() => {
-            setLoggedIn(true);
+            navigate("/Login");
           }}
         >
           Login

src/Routes/Login/Login.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import styles from "../../styles";
+
+import { useLocation, useNavigate } from "react-router-dom";
+import Header from "../../Components/Header/Header";
+import { useState } from "react";
+import { Button } from "@mui/material";
+
+export default function Login() {
+  const navigate = useNavigate();
+  const [user, setUser] = useState({
+    username: "",
+    password: "",
+  });
+  console.log("We are in the" + useLocation());
+  return (
+    <div style={styles.background}>
+      <Header />
+      <div style={styles.window}>
+        <p style={styles.text_medium}>Login to Clip Notes</p>
+        <div style={styles.flex_row}>
+          <p style={styles.text_small}>Username</p>
+          <div style={{ margin: 4 }} />
+          <input
+            style={styles.input_notetitle}
+            onChange={(e: { target: { value: any } }) => {
+              setUser({ ...user, username: e.target.value });
+            }}
+            maxLength={20}
+          />
+        </div>
+        <div style={styles.flex_row}>
+          <p style={styles.text_small}>Password</p>
+          <div style={{ margin: 4 }} />
+          <input
+            style={styles.input_notetitle}
+            type="password"
+            onChange={(e: { target: { value: any } }) => {
+              setUser({ ...user, password: e.target.value });
+            }}
+            maxLength={20}
+          />
+        </div>
+        <Button
+          style={styles.button_green}
+          variant="contained"
+          onClick={() => {
+            navigate("/Login");
+          }}
+        >
+          Login
+        </Button>
+        <Button
+          style={styles.button_yellow}
+          variant="contained"
+          onClick={() => {
+            navigate("/Login");
+          }}
+        >
+          Register
+        </Button>
+      </div>
+    </div>
+  );
+}

src/index.tsx

@@ -6,6 +6,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 import Home from "./Routes/Home/Home";
 import NewNote from "./Routes/NewNote/NewNote";
+import Login from "./Routes/Login/Login";
 
 import { QueryClient, QueryClientProvider } from "react-query";
 
@@ -20,6 +21,10 @@ const router = createBrowserRouter([
     path: "/NewNote",
     element: <NewNote />,
   },
+  {
+    path: "/Login",
+    element: <Login />,
+  },
 ]);
 
 const root = ReactDOM.createRoot(

src/styles.tsx

@@ -22,6 +22,17 @@ const styles: { [key: string]: React.CSSProperties } = {
     alignItems: "center",
     justifyContent: "center",
   },
+  window: {
+    alignSelf: "center",
+    width: "60%",
+    minHeight: "128px",
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: "#0087e4",
+    margin: 16,
+    padding: 16,
+    borderRadius: 16,
+  },
   note: {
     display: "flex",
     flexDirection: "column",
@@ -78,6 +89,17 @@ const styles: { [key: string]: React.CSSProperties } = {
     display: "flex",
     flexDirection: "row",
     width: "256x",
+    marginTop: 4,
+    marginBottom: 4,
+  },
+  button_yellow: {
+    backgroundColor: "#e2b465",
+    alignSelf: "center",
+    display: "flex",
+    flexDirection: "row",
+    width: "256x",
+    marginTop: 4,
+    marginBottom: 4,
   },
   button_red: {
     backgroundColor: "#bc231e",
@@ -85,6 +107,8 @@ const styles: { [key: string]: React.CSSProperties } = {
     display: "flex",
     flexDirection: "row",
     width: "256px",
+    marginTop: 4,
+    marginBottom: 4,
   },
   text_small: {
     color: "white",
@@ -92,6 +116,13 @@ const styles: { [key: string]: React.CSSProperties } = {
     fontWeight: "bold",
     textAlign: "center",
   },
+  text_small_red: {
+    color: "#bc231e",
+    fontSize: "2vh",
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+
   text_medium: {
     color: "white",
     fontSize: "4vh",