From 4e2fb294c211f730986a99fb11b0bed65a5156ec Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Mon, 13 Feb 2023 23:54:15 +0800
Subject: [PATCH] Polished initial page

---
 src/App.tsx                              |  9 ++++----
 src/components/Icons/AppLogo/AppLogo.tsx | 29 ++++++++++++++++++++++++
 src/styles.tsx                           | 18 +++++++++++++--
 3 files changed, 50 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Icons/AppLogo/AppLogo.tsx
diff --git a/src/App.tsx b/src/App.tsx
index 043a16c..7524daa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,14 +1,15 @@
 import React from "react";
-import logo from "./img/ivy.svg";
+import AppLogo from "./components/Icons/AppLogo/AppLogo";
 import styles from "./styles";
 
 export default function App() {
   return (
     <div style={styles.background}>
-      <body style={styles.background}>
-        <img src={logo} alt="logo" />
+      <div style={styles.flex_row}>
+        <AppLogo size={64} color="#6f9b78" />
         <p>Ivy - Inventory Manager</p>
-      </body>
+      </div>
+      <p>Welcome!</p>
     </div>
   );
 }
diff --git a/src/components/Icons/AppLogo/AppLogo.tsx b/src/components/Icons/AppLogo/AppLogo.tsx
new file mode 100644
index 0000000..8f824b3
--- /dev/null
+++ b/src/components/Icons/AppLogo/AppLogo.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function AppLogo(props: props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="icon icon-tabler icon-tabler-plant-2"
+      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="M2 9a10 10 0 1 0 20 0"></path>
+      <path d="M12 19a10 10 0 0 1 10 -10"></path>
+      <path d="M2 9a10 10 0 0 1 10 10"></path>
+      <path d="M12 4a9.7 9.7 0 0 1 2.99 7.5"></path>
+      <path d="M9.01 11.5a9.7 9.7 0 0 1 2.99 -7.5"></path>
+    </svg>
+  );
+}
diff --git a/src/styles.tsx b/src/styles.tsx
index e331968..f53ea86 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -1,13 +1,27 @@
 import React from "react";
-const styles = {
+const styles: { [key: string]: React.CSSProperties } = {
   background: {
     backgroundColor: "#0b2322",
     height: "100vh",
     display: "flex",
+    flexDirection: "column",
     justifyContent: "center",
     alignItems: "center",
     fontWeight: "bold",
     color: "white",
-  } as React.CSSProperties,
+  },
+  flex_row: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  header: {
+    display: "flex",
+    flexDirection: "row",
+    position: "sticky",
+    top: 0,
+    left: 0,
+  },
 };
 export default styles;
