From e0bfd0cdd04834dec4f54a41fdb26ea38204d7ab Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Sat, 25 Feb 2023 22:30:38 +0800
Subject: [PATCH] Added design and login to header

---
 src/Components/AppIcon/AppIcon.tsx | 30 ++++++++++++++++++++++
 src/Components/Header/Header.tsx   | 31 ++++++++++++++++++++++-
 src/Components/Login/Login.tsx     | 40 ++++++++++++++++++++++++++++++
 src/Components/Note/Note.tsx       |  2 +-
 src/Components/Notes/Notes.tsx     |  4 +--
 src/Routes/NewNote/NewNote.tsx     |  4 +--
 src/styles.tsx                     | 10 ++++++--
 7 files changed, 113 insertions(+), 8 deletions(-)
 create mode 100644 src/Components/AppIcon/AppIcon.tsx
 create mode 100644 src/Components/Login/Login.tsx

diff --git a/src/Components/AppIcon/AppIcon.tsx b/src/Components/AppIcon/AppIcon.tsx
new file mode 100644
index 0000000..aef58b9
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index 3e86d14..a895f1e 100644
--- a/src/Components/Header/Header.tsx
+++ b/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>
   );
 }
diff --git a/src/Components/Login/Login.tsx b/src/Components/Login/Login.tsx
new file mode 100644
index 0000000..ca07cc3
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/Components/Note/Note.tsx b/src/Components/Note/Note.tsx
index 346a5d5..153e424 100644
--- a/src/Components/Note/Note.tsx
+++ b/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);
diff --git a/src/Components/Notes/Notes.tsx b/src/Components/Notes/Notes.tsx
index ee57414..2117232 100644
--- a/src/Components/Notes/Notes.tsx
+++ b/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");
diff --git a/src/Routes/NewNote/NewNote.tsx b/src/Routes/NewNote/NewNote.tsx
index 12485e9..77c3510 100644
--- a/src/Routes/NewNote/NewNote.tsx
+++ b/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("/");
diff --git a/src/styles.tsx b/src/styles.tsx
index 9bfd598..e4fc715 100644
--- a/src/styles.tsx
+++ b/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",