Added design and login to header

src/Components/AppIcon/AppIcon.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+export interface props {
+  size: string;
+  color: string;
+}
+
+export default function AppIcon(props: props) {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={props.size}
+        height={props.size}
+        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="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>
+        <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
+        <path d="M9 12h6"></path>
+        <path d="M9 16h6"></path>
+      </svg>
+    </>
+  );
+}

src/Components/Header/Header.tsx

@@ -1,11 +1,40 @@
 import * as React from "react";
 
 import styles from "../../styles";
+import AppIcon from "../AppIcon/AppIcon";
+import Login from "../Login/Login";
 
 export default function Header() {
   return (
     <div style={styles.header}>
-      <p style={styles.text_medium}>React - A Notes Demo</p>
+      <div style={styles.flex_row}>
+        <div
+          style={{
+            ...styles.header_contentwrapper,
+            ...{ flex: 2 },
+          }}
+        >
+          <AppIcon size="8vh" color="white" />
+        </div>
+        <div
+          style={{
+            ...styles.header_contentwrapper,
+            ...{ flex: 6 },
+          }}
+        >
+          <p style={styles.text_medium}>Clip Notes</p>
+        </div>
+        <div
+          style={{
+            ...styles.header_contentwrapper,
+            ...{ flex: 2 },
+          }}
+        >
+          <div style={styles.flex_row}>
+            <Login />
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

src/Components/Login/Login.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { useState } from "react";
+import { Button } from "@mui/material";
+import styles from "../../styles";
+
+export default function Login() {
+  const [logged_in, setLoggedIn] = useState(false);
+  if (!logged_in) {
+    return (
+      <div style={styles.flex_row}>
+        <p style={styles.text_small}>Not Logged in</p>
+        <div style={{ margin: 4 }} />
+        <Button
+          style={styles.button_green}
+          variant="contained"
+          onClick={() => {
+            setLoggedIn(true);
+          }}
+        >
+          Login
+        </Button>
+      </div>
+    );
+  }
+  return (
+    <div style={styles.flex_row}>
+      <p style={styles.text_small}>Logged in as</p>
+      <div style={{ margin: 4 }} />
+      <Button
+        style={styles.button_red}
+        variant="contained"
+        onClick={() => {
+          setLoggedIn(false);
+        }}
+      >
+        Logout
+      </Button>
+    </div>
+  );
+}

src/Components/Note/Note.tsx

@@ -27,7 +27,7 @@ export default function Note(props: props) {
         </div>
         <p style={styles.text_medium}>Timestamp: {props.date_created}</p>
         <Button
-          style={styles.button_remove}
+          style={styles.button_red}
           variant="contained"
           onClick={() => {
             mutation.mutate(props.id);

src/Components/Notes/Notes.tsx

@@ -29,7 +29,7 @@ export default function Notes() {
         <p style={styles.text_medium}>No notes exist yet</p>
         <p style={styles.text_medium}>Make one!</p>
         <Button
-          style={styles.button_add}
+          style={styles.button_green}
           variant="contained"
           onClick={() => {
             navigate("/NewNote");
@@ -65,7 +65,7 @@ export default function Notes() {
         }
       )}
       <Button
-        style={styles.button_add}
+        style={styles.button_green}
         variant="contained"
         onClick={() => {
           navigate("/NewNote");

src/Routes/NewNote/NewNote.tsx

@@ -48,7 +48,7 @@ export default function NewNote() {
             />
           </div>
           <Button
-            style={styles.button_add}
+            style={styles.button_green}
             variant="contained"
             onClick={async () => {
               mutation.mutate({
@@ -64,7 +64,7 @@ export default function NewNote() {
       </div>
       <div style={styles.flex_row}>
         <Button
-          style={styles.button_remove}
+          style={styles.button_red}
           variant="contained"
           onClick={() => {
             navigate("/");

src/styles.tsx

@@ -17,6 +17,11 @@ const styles: { [key: string]: React.CSSProperties } = {
     padding: 8,
     borderRadius: 4,
   },
+  header_contentwrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
   note: {
     display: "flex",
     flexDirection: "column",
@@ -67,14 +72,14 @@ const styles: { [key: string]: React.CSSProperties } = {
     fontSize: "2vh",
     fontWeight: "bold",
   },
-  button_add: {
+  button_green: {
     backgroundColor: "#0dbc6a",
     alignSelf: "center",
     display: "flex",
     flexDirection: "row",
     width: "256x",
   },
-  button_remove: {
+  button_red: {
     backgroundColor: "#bc231e",
     alignSelf: "center",
     display: "flex",
@@ -98,6 +103,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     flexDirection: "column",
   },
   flex_row: {
+    width: "100%",
     justifyContent: "center",
     display: "flex",
     flexDirection: "row",