From c7e368754413682b3d7124f9fa0e9cd8c116265e Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Thu, 16 Feb 2023 14:22:40 +0800
Subject: [PATCH] Added icons to sidebar buttons and cleaned up code

---
 src/components/Icons/HomeIcon/HomeIcon.tsx    | 29 ++++++++++++++++
 .../Icons/InventoryIcon/InventoryIcon.tsx     | 31 +++++++++++++++++
 .../Icons/LogoutIcon/LogoutIcon.tsx           | 28 +++++++++++++++
 src/components/Icons/LogsIcon/LogsIcon.tsx    | 32 +++++++++++++++++
 .../Icons/ProductsIcon/ProductsIcon.tsx       | 31 +++++++++++++++++
 src/components/Logout/Logout.tsx              |  7 +++-
 src/components/Sidebar/Sidebar.tsx            | 34 ++++++++++++++++---
 .../SidebarButton/SidebarButton.tsx           |  8 ++++-
 src/styles.tsx                                |  2 ++
 9 files changed, 195 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Icons/HomeIcon/HomeIcon.tsx
 create mode 100644 src/components/Icons/InventoryIcon/InventoryIcon.tsx
 create mode 100644 src/components/Icons/LogoutIcon/LogoutIcon.tsx
 create mode 100644 src/components/Icons/LogsIcon/LogsIcon.tsx
 create mode 100644 src/components/Icons/ProductsIcon/ProductsIcon.tsx

diff --git a/src/components/Icons/HomeIcon/HomeIcon.tsx b/src/components/Icons/HomeIcon/HomeIcon.tsx
new file mode 100644
index 0000000..54e01f1
--- /dev/null
+++ b/src/components/Icons/HomeIcon/HomeIcon.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function HomeIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-home-2"
+        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="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>
+  );
+}
diff --git a/src/components/Icons/InventoryIcon/InventoryIcon.tsx b/src/components/Icons/InventoryIcon/InventoryIcon.tsx
new file mode 100644
index 0000000..08d4836
--- /dev/null
+++ b/src/components/Icons/InventoryIcon/InventoryIcon.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function InventoryIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-box-seam"
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        stroke-width="1"
+        stroke={props.color}
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5"></path>
+        <path d="M12 12l8 -4.5"></path>
+        <path d="M8.2 9.8l7.6 -4.6"></path>
+        <path d="M12 12v9"></path>
+        <path d="M12 12l-8 -4.5"></path>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/components/Icons/LogoutIcon/LogoutIcon.tsx b/src/components/Icons/LogoutIcon/LogoutIcon.tsx
new file mode 100644
index 0000000..cd9e70d
--- /dev/null
+++ b/src/components/Icons/LogoutIcon/LogoutIcon.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function LogoutIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-logout"
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        stroke-width="1"
+        stroke={props.color}
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="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="M7 12h14l-3 -3m0 6l3 -3"></path>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/components/Icons/LogsIcon/LogsIcon.tsx b/src/components/Icons/LogsIcon/LogsIcon.tsx
new file mode 100644
index 0000000..c1a90b5
--- /dev/null
+++ b/src/components/Icons/LogsIcon/LogsIcon.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function LogsIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-clipboard-data"
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        stroke-width="1"
+        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 17v-4"></path>
+        <path d="M12 17v-1"></path>
+        <path d="M15 17v-2"></path>
+        <path d="M12 17v-1"></path>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/components/Icons/ProductsIcon/ProductsIcon.tsx b/src/components/Icons/ProductsIcon/ProductsIcon.tsx
new file mode 100644
index 0000000..5888276
--- /dev/null
+++ b/src/components/Icons/ProductsIcon/ProductsIcon.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function ProductsIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-list-numbers"
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        stroke-width="1"
+        stroke={props.color}
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M11 6h9"></path>
+        <path d="M11 12h9"></path>
+        <path d="M12 18h8"></path>
+        <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path>
+        <path d="M6 10v-6l-2 2"></path>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/components/Logout/Logout.tsx b/src/components/Logout/Logout.tsx
index 3ad9e19..d4c01a4 100644
--- a/src/components/Logout/Logout.tsx
+++ b/src/components/Logout/Logout.tsx
@@ -9,7 +9,11 @@ export interface state {
     value: boolean;
   };
 }
-export default function Logout() {
+export interface props {
+  children: React.ReactNode;
+}
+
+export default function Logout(props: props) {
   const logged_in = useSelector((state: state) => state.logged_in.value);
   const dispatch = useDispatch();
 
@@ -29,6 +33,7 @@ export default function Logout() {
           variant="contained"
           style={styles.logout_button}
         >
+          {props.children}
           <p style={styles.text}>Log Out</p>
         </Button>
       </div>
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 3d8189b..d153df7 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -1,8 +1,13 @@
 import React from "react";
 import styles from "../../styles";
 import SidebarButton from "../SidebarButton/SidebarButton";
+import HomeIcon from "../Icons/HomeIcon/HomeIcon";
+import ProductsIcon from "../Icons/ProductsIcon/ProductsIcon";
 import { useNavigate } from "react-router-dom";
 import Logout from "../Logout/Logout";
+import InventoryIcon from "../Icons/InventoryIcon/InventoryIcon";
+import LogsIcon from "../Icons/LogsIcon/LogsIcon";
+import LogoutIcon from "../Icons/LogoutIcon/LogoutIcon";
 export interface state {
   minimized: {
     value: boolean;
@@ -14,11 +19,30 @@ export default function Sidebar() {
   const navigate = useNavigate();
   return (
     <div style={styles.sidebar_wrapper}>
-      <SidebarButton onClick={() => navigate("/")} name="Dashboard" />
-      <SidebarButton onClick={() => navigate("/Products")} name="Products" />
-      <SidebarButton onClick={() => navigate("/Inventory")} name="Inventory" />
-      <SidebarButton onClick={() => navigate("/Logs")} name="Logs" />
-      <Logout />
+      <div
+        style={{
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <SidebarButton onClick={() => navigate("/")} name="Dashboard">
+          <HomeIcon size={48} color="white" />
+        </SidebarButton>
+        <SidebarButton onClick={() => navigate("/Products")} name="Products">
+          <ProductsIcon size={48} color="white" />
+        </SidebarButton>
+        <SidebarButton onClick={() => navigate("/Inventory")} name="Inventory">
+          <InventoryIcon size={48} color="white" />
+        </SidebarButton>
+        <SidebarButton onClick={() => navigate("/Logs")} name="Logs">
+          <LogsIcon size={48} color="white" />
+        </SidebarButton>
+      </div>
+
+      <Logout>
+        <LogoutIcon size={48} color="white" />
+      </Logout>
     </div>
   );
 }
diff --git a/src/components/SidebarButton/SidebarButton.tsx b/src/components/SidebarButton/SidebarButton.tsx
index 76e650b..f8534c6 100644
--- a/src/components/SidebarButton/SidebarButton.tsx
+++ b/src/components/SidebarButton/SidebarButton.tsx
@@ -5,15 +5,21 @@ import styles from "../../styles";
 export interface props {
   name: string;
   onClick: any;
+  children: React.ReactNode;
 }
 export default function SidebarButton(props: props) {
   return (
-    <div style={{ display: "flex", paddingBottom: 16 }}>
+    <div
+      style={{
+        paddingBottom: 16,
+      }}
+    >
       <Button
         onClick={props.onClick}
         variant="contained"
         style={styles.sidebar_button}
       >
+        {props.children}
         <p style={styles.text}>{props.name}</p>
       </Button>
     </div>
diff --git a/src/styles.tsx b/src/styles.tsx
index c78deb2..90a7219 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -68,6 +68,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     borderBottomLeftRadius: 32,
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
+    justifyContent: "left",
   },
   sidebar_button: {
     backgroundColor: "#0b2322",
@@ -79,6 +80,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     borderBottomLeftRadius: 32,
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
+    justifyContent: "left",
   },
   sidebar_wrapper: {
     display: "flex",