From c9b18608a1959a9f31a59946a064f7a00d9a808b Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Fri, 3 Mar 2023 12:35:32 +0800
Subject: [PATCH] Made icon sizing based on px rather than vh

---
 src/Components/ColoredCube/ColoredCube.tsx    |  4 +-
 src/Components/Header/Header.tsx              |  2 +-
 src/Components/Icons/AppLogo/AppLogo.tsx      |  4 +-
 src/Components/Icons/HomeIcon/HomeIcon.tsx    |  4 +-
 .../Icons/InventoryIcon/InventoryIcon.tsx     |  4 +-
 .../Icons/LogoutIcon/LogoutIcon.tsx           |  4 +-
 src/Components/Icons/LogsIcon/LogsIcon.tsx    |  4 +-
 .../Icons/LowStockIcon/LowStockIcon.tsx       |  4 +-
 .../Icons/NotFoundIcon/NotFoundIcon.tsx       |  4 +-
 .../Icons/ProductIcon/ProductIcon.tsx         |  4 +-
 .../Icons/ProductsIcon/ProductsIcon.tsx       |  4 +-
 .../RecentlyAddedIcon/RecentlyAddedIcon.tsx   |  4 +-
 src/Components/Icons/StatsIcon/StatsIcon.tsx  |  4 +-
 .../TotalProductsIcon/TotalProductsIcon.tsx   |  4 +-
 src/Components/Sidebar/Sidebar.tsx            | 16 +++---
 src/Routes/Dashboard/Dashboard.tsx            | 50 +++++++++++++------
 src/Routes/Error/Error.tsx                    |  4 +-
 src/Routes/Logs/Logs.tsx                      |  2 +-
 src/Routes/Products/Products.tsx              |  4 +-
 src/components/Icons/AddIcon/AddIcon.tsx      |  4 +-
 .../Icons/CancelIcon/CancelIcon.tsx           |  4 +-
 .../Icons/DeleteIcon/DeleteIcon.tsx           |  4 +-
 src/components/Icons/EditIcon/EditIcon.tsx    |  4 +-
 src/routes/Inventory/Inventory.tsx            |  2 +-
 24 files changed, 83 insertions(+), 65 deletions(-)

diff --git a/src/Components/ColoredCube/ColoredCube.tsx b/src/Components/ColoredCube/ColoredCube.tsx
index 9db5e10..ae02a4c 100644
--- a/src/Components/ColoredCube/ColoredCube.tsx
+++ b/src/Components/ColoredCube/ColoredCube.tsx
@@ -10,8 +10,8 @@ export default function ColoredCube(props: props) {
       <div
         style={{
           backgroundColor: props.color,
-          width: props.size + "vh",
-          height: props.size + "vh",
+          width: props.size + "px",
+          height: props.size + "px",
         }}
       />
     </div>
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
index 7c3e850..2c2e826 100644
--- a/src/Components/Header/Header.tsx
+++ b/src/Components/Header/Header.tsx
@@ -7,7 +7,7 @@ export default function Header() {
   return (
     <div style={styles.header_wrapper}>
       <div style={styles.header_left}>
-        <AppLogo size={8} color="#80b38b" />
+        <AppLogo size={64} color="#80b38b" />
         <p style={styles.logo_title}>Ivy</p>
       </div>
       <div style={styles.header_right}>
diff --git a/src/Components/Icons/AppLogo/AppLogo.tsx b/src/Components/Icons/AppLogo/AppLogo.tsx
index ff57b7b..24b7f9c 100644
--- a/src/Components/Icons/AppLogo/AppLogo.tsx
+++ b/src/Components/Icons/AppLogo/AppLogo.tsx
@@ -9,8 +9,8 @@ export default function AppLogo(props: props) {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       className="icon icon-tabler icon-tabler-plant-2"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="2"
       stroke={props.color}
diff --git a/src/Components/Icons/HomeIcon/HomeIcon.tsx b/src/Components/Icons/HomeIcon/HomeIcon.tsx
index 8c790b9..749c414 100644
--- a/src/Components/Icons/HomeIcon/HomeIcon.tsx
+++ b/src/Components/Icons/HomeIcon/HomeIcon.tsx
@@ -9,8 +9,8 @@ export default function HomeIcon(props: props) {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       className="icon icon-tabler icon-tabler-home-2"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="2"
       stroke={props.color}
diff --git a/src/Components/Icons/InventoryIcon/InventoryIcon.tsx b/src/Components/Icons/InventoryIcon/InventoryIcon.tsx
index d75b5ab..b335378 100644
--- a/src/Components/Icons/InventoryIcon/InventoryIcon.tsx
+++ b/src/Components/Icons/InventoryIcon/InventoryIcon.tsx
@@ -9,8 +9,8 @@ export default function InventoryIcon(props: props) {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       className="icon icon-tabler icon-tabler-box-seam"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}
diff --git a/src/Components/Icons/LogoutIcon/LogoutIcon.tsx b/src/Components/Icons/LogoutIcon/LogoutIcon.tsx
index e892add..89a663b 100644
--- a/src/Components/Icons/LogoutIcon/LogoutIcon.tsx
+++ b/src/Components/Icons/LogoutIcon/LogoutIcon.tsx
@@ -9,8 +9,8 @@ export default function LogoutIcon(props: props) {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       className="icon icon-tabler icon-tabler-logout"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}
diff --git a/src/Components/Icons/LogsIcon/LogsIcon.tsx b/src/Components/Icons/LogsIcon/LogsIcon.tsx
index 0368e9f..612175d 100644
--- a/src/Components/Icons/LogsIcon/LogsIcon.tsx
+++ b/src/Components/Icons/LogsIcon/LogsIcon.tsx
@@ -9,8 +9,8 @@ export default function LogsIcon(props: props) {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       className="icon icon-tabler icon-tabler-clipboard-data"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}
diff --git a/src/Components/Icons/LowStockIcon/LowStockIcon.tsx b/src/Components/Icons/LowStockIcon/LowStockIcon.tsx
index 79588c2..5f31896 100644
--- a/src/Components/Icons/LowStockIcon/LowStockIcon.tsx
+++ b/src/Components/Icons/LowStockIcon/LowStockIcon.tsx
@@ -9,8 +9,8 @@ export default function LowStockIcon(props: props) {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       className="icon icon-tabler icon-tabler-zoom-exclamation"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="2"
       stroke={props.color}
diff --git a/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx b/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx
index 7b987a8..ad44ff8 100644
--- a/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx
+++ b/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx
@@ -9,8 +9,8 @@ export default function NotFoundIcon(props: props) {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       className="icon icon-tabler icon-tabler-error-404"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}
diff --git a/src/Components/Icons/ProductIcon/ProductIcon.tsx b/src/Components/Icons/ProductIcon/ProductIcon.tsx
index 5ee36eb..8636941 100644
--- a/src/Components/Icons/ProductIcon/ProductIcon.tsx
+++ b/src/Components/Icons/ProductIcon/ProductIcon.tsx
@@ -8,8 +8,8 @@ export default function ProductIcon(props: props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="2"
       stroke={props.color}
diff --git a/src/Components/Icons/ProductsIcon/ProductsIcon.tsx b/src/Components/Icons/ProductsIcon/ProductsIcon.tsx
index 4aa43f6..e0881ed 100644
--- a/src/Components/Icons/ProductsIcon/ProductsIcon.tsx
+++ b/src/Components/Icons/ProductsIcon/ProductsIcon.tsx
@@ -9,8 +9,8 @@ export default function ProductsIcon(props: props) {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       className="icon icon-tabler icon-tabler-list-numbers"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}
diff --git a/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx b/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
index fbf7593..0ad36ed 100644
--- a/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
+++ b/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
@@ -9,8 +9,8 @@ export default function RecentlyAddedIcon(props: props) {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       className="icon icon-tabler icon-tabler-book-upload"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}
diff --git a/src/Components/Icons/StatsIcon/StatsIcon.tsx b/src/Components/Icons/StatsIcon/StatsIcon.tsx
index e06050c..e156c4e 100644
--- a/src/Components/Icons/StatsIcon/StatsIcon.tsx
+++ b/src/Components/Icons/StatsIcon/StatsIcon.tsx
@@ -9,8 +9,8 @@ export default function StatsIcon(props: props) {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       className="icon icon-tabler icon-tabler-align-box-bottom-center"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}
diff --git a/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx b/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
index 1282199..8050da3 100644
--- a/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
+++ b/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
@@ -9,8 +9,8 @@ export default function TotalProductsIcon(props: props) {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       className="icon icon-tabler icon-tabler-packages"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}
diff --git a/src/Components/Sidebar/Sidebar.tsx b/src/Components/Sidebar/Sidebar.tsx
index 167dcec..7dd700c 100644
--- a/src/Components/Sidebar/Sidebar.tsx
+++ b/src/Components/Sidebar/Sidebar.tsx
@@ -37,20 +37,20 @@ export default function Sidebar() {
             }}
           >
             <SidebarButton onClick={() => navigate("/")} name="Dashboard">
-              <HomeIcon size={4} color="white" />
+              <HomeIcon size={48} color="white" />
             </SidebarButton>
             <SidebarButton
               onClick={() => navigate("/Products")}
               name="Products"
             >
-              <ProductsIcon size={4} color="white" />
+              <ProductsIcon size={48} color="white" />
             </SidebarButton>
 
             <SidebarButton
               onClick={() => navigate("/Inventory")}
               name="Inventory"
             >
-              <InventoryIcon size={4} color="white" />
+              <InventoryIcon size={48} color="white" />
             </SidebarButton>
           </div>
         </div>
@@ -75,25 +75,25 @@ export default function Sidebar() {
             }}
           >
             <SidebarButton onClick={() => navigate("/")} name="Dashboard">
-              <HomeIcon size={4} color="white" />
+              <HomeIcon size={48} color="white" />
             </SidebarButton>
             <SidebarButton
               onClick={() => navigate("/Products")}
               name="Products"
             >
-              <ProductsIcon size={4} color="white" />
+              <ProductsIcon size={48} color="white" />
             </SidebarButton>
             <SidebarButton
               onClick={() => navigate("/Inventory")}
               name="Inventory"
             >
-              <InventoryIcon size={4} color="white" />
+              <InventoryIcon size={48} color="white" />
             </SidebarButton>
             <SidebarButton onClick={() => navigate("/Logs")} name="Logs">
-              <LogsIcon size={4} color="white" />
+              <LogsIcon size={48} color="white" />
             </SidebarButton>
             <Logout>
-              <LogoutIcon size={4} color="white" />
+              <LogoutIcon size={48} color="white" />
             </Logout>
           </div>
         </div>
diff --git a/src/Routes/Dashboard/Dashboard.tsx b/src/Routes/Dashboard/Dashboard.tsx
index 55f11f1..8abbd5c 100644
--- a/src/Routes/Dashboard/Dashboard.tsx
+++ b/src/Routes/Dashboard/Dashboard.tsx
@@ -13,7 +13,7 @@ export default function Dashboard() {
   return (
     <div style={{ margin: 32, height: "100%" }}>
       <div style={styles.flex_row}>
-        <HomeIcon size={8} color="white" />
+        <HomeIcon size={64} color="white" />
         <h1 style={styles.text_large}>Dashboard</h1>
       </div>
       <div style={{ display: "flex", flexDirection: "row" }}>
@@ -21,7 +21,7 @@ export default function Dashboard() {
           <div style={styles.flex_column}>
             <div style={{ ...styles.widget, ...{ flex: 5 } }}>
               <div style={styles.content_row}>
-                <TotalProductsIcon size={8} color="white" />
+                <TotalProductsIcon size={64} color="white" />
                 <h1 style={styles.text_extra_large}>Total Products</h1>
               </div>
               <h1 style={styles.text_large}>2546 Unique Items</h1>
@@ -30,31 +30,49 @@ export default function Dashboard() {
             <div style={styles.flex_row}>
               <div style={{ ...styles.widget, ...{ flex: 6 } }}>
                 <div style={styles.content_row}>
-                  <StatsIcon size={8} color="white" />
+                  <StatsIcon size={64} color="white" />
                   <h1 style={styles.text_large}>Current Session</h1>
                 </div>
                 <div style={styles.content_row}>
-                  <ColoredCube size={3} color="#a48e41" />
+                  <ColoredCube size={32} color="#a48e41" />
                   <h1 style={styles.text_large}>Added</h1>
                 </div>
                 <h1 style={styles.text_large}>254</h1>
                 <div style={styles.content_row}>
-                  <ColoredCube size={3} color="#a44141" />
-                  <h1 style={styles.text_large}>Removed</h1>{" "}
+                  <ColoredCube size={32} color="#a44141" />
+                  <h1 style={styles.text_large}>Removed</h1>
                 </div>
+                <h1 style={styles.text_large}>118</h1>
               </div>
-              <div style={{ ...styles.flex_column, ...{ flex: 4 } }}>
-                <div style={{ ...styles.widget, ...{ flex: 1 } }}>
+              <div
+                style={{
+                  ...styles.flex_column,
+                  ...{
+                    flex: 4,
+                  },
+                }}
+              >
+                <div
+                  style={{
+                    ...styles.widget,
+                    ...{ flex: 1 },
+                  }}
+                >
                   <div style={styles.content_row}>
-                    <LowStockIcon size={8} color="white" />
+                    <LowStockIcon size={64} color="white" />
                     <h1 style={styles.text_medium}>Low Stock</h1>
                   </div>
                   <h1 style={styles.text_medium}>Canned Pagmamahal</h1>
                   <h1 style={styles.text_tiny}>In Stock: 3</h1>
                 </div>
-                <div style={{ ...styles.widget, ...{ flex: 1 } }}>
+                <div
+                  style={{
+                    ...styles.widget,
+                    ...{ flex: 1 },
+                  }}
+                >
                   <div style={styles.content_row}>
-                    <RecentlyAddedIcon size={8} color="white" />
+                    <RecentlyAddedIcon size={64} color="white" />
                     <h1 style={styles.text_medium}>Recently Added</h1>
                   </div>
                   <h1 style={styles.text_medium}>Zidane's Water</h1>
@@ -67,28 +85,28 @@ export default function Dashboard() {
         <div style={{ flex: 3 }}>
           <div style={styles.widget}>
             <div style={styles.content_row}>
-              <LogsIcon size={8} color="white" />
+              <LogsIcon size={64} color="white" />
               <div style={styles.wrapper_column}>
                 <h1 style={styles.text_medium}>Recent</h1>
                 <h1 style={styles.text_medium}>Transactions</h1>
               </div>
             </div>
-            <div style={{ marginBottom: "2vh" }} />
+            <div style={{ marginBottom: "8px" }} />
             <h1 style={styles.text}>Kopiko Blanca</h1>
             <h1 style={styles.text_small}>Added: 96</h1>
             <h1 style={styles.text_small}>Removed: 105</h1>
             <h1 style={styles.text_tiny}>02/17/2023</h1>
-            <div style={{ marginBottom: "2vh" }} />
+            <div style={{ marginBottom: "8px" }} />
             <h1 style={styles.text}>Zidane's Water</h1>
             <h1 style={styles.text_small}>Added: 49</h1>
             <h1 style={styles.text_small}>Removed: 24</h1>
             <h1 style={styles.text_tiny}>02/17/2023</h1>
-            <div style={{ marginBottom: "2vh" }} />
+            <div style={{ marginBottom: "8px" }} />
             <h1 style={styles.text}>Dan's Beefed Corn</h1>
             <h1 style={styles.text_small}>Added: 32</h1>
             <h1 style={styles.text_small}>Removed: 64</h1>
             <h1 style={styles.text_tiny}>02/17/2023</h1>
-            <div style={{ marginBottom: "2vh" }} />
+            <div style={{ marginBottom: "8px" }} />
             <div style={styles.content_column}>
               <h1 style={styles.text}>Canned</h1>
               <h1 style={styles.text}>Pagmamahal</h1>
diff --git a/src/Routes/Error/Error.tsx b/src/Routes/Error/Error.tsx
index cc094c3..4aae12f 100644
--- a/src/Routes/Error/Error.tsx
+++ b/src/Routes/Error/Error.tsx
@@ -5,8 +5,8 @@ import NotFoundIcon from "../../Components/Icons/NotFoundIcon/NotFoundIcon";
 export default function Error() {
   return (
     <div style={styles.content_center}>
-      <div style={styles.content_column}>
-        <NotFoundIcon size={64} color="#a44141" />
+      <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
+        <NotFoundIcon size={256} color="#a44141" />
         <p style={styles.text}>Could not find the requested page</p>
       </div>
     </div>
diff --git a/src/Routes/Logs/Logs.tsx b/src/Routes/Logs/Logs.tsx
index 559eb18..7650b5b 100644
--- a/src/Routes/Logs/Logs.tsx
+++ b/src/Routes/Logs/Logs.tsx
@@ -22,7 +22,7 @@ export default function Logs() {
   return (
     <div style={{ margin: 32, height: "100%" }}>
       <div style={styles.flex_row}>
-        <LogsIcon size={8} color="white" />
+        <LogsIcon size={64} color="white" />
         <h1 style={styles.text_large}>Logs</h1>
       </div>
       <TableContainer
diff --git a/src/Routes/Products/Products.tsx b/src/Routes/Products/Products.tsx
index 4fbc17d..ea93a97 100644
--- a/src/Routes/Products/Products.tsx
+++ b/src/Routes/Products/Products.tsx
@@ -23,7 +23,7 @@ export default function Products() {
       <div style={styles.content_row}>
         <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
           <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
-            <ProductsIcon size={8} color="white" />
+            <ProductsIcon size={64} color="white" />
             <h1 style={styles.text_large}>Products</h1>
           </div>
           <div
@@ -36,7 +36,7 @@ export default function Products() {
               onClick={() => navigate("/Products/AddProduct")}
               style={styles.button_add_product}
             >
-              <AddIcon size={8} color="white" />
+              <AddIcon size={32} color="white" />
               <p style={styles.text_medium}>Add Product</p>
             </Button>
           </div>
diff --git a/src/components/Icons/AddIcon/AddIcon.tsx b/src/components/Icons/AddIcon/AddIcon.tsx
index 8054588..a1d1843 100644
--- a/src/components/Icons/AddIcon/AddIcon.tsx
+++ b/src/components/Icons/AddIcon/AddIcon.tsx
@@ -8,8 +8,8 @@ export default function AddIcon(props: props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       fill="none"
       stroke={props.color}
diff --git a/src/components/Icons/CancelIcon/CancelIcon.tsx b/src/components/Icons/CancelIcon/CancelIcon.tsx
index 9d32509..d1a4dc0 100644
--- a/src/components/Icons/CancelIcon/CancelIcon.tsx
+++ b/src/components/Icons/CancelIcon/CancelIcon.tsx
@@ -9,8 +9,8 @@ export default function CancelIcon(props: props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       fill="none"
       stroke={props.color}
diff --git a/src/components/Icons/DeleteIcon/DeleteIcon.tsx b/src/components/Icons/DeleteIcon/DeleteIcon.tsx
index 4386252..2295c5a 100644
--- a/src/components/Icons/DeleteIcon/DeleteIcon.tsx
+++ b/src/components/Icons/DeleteIcon/DeleteIcon.tsx
@@ -8,8 +8,8 @@ export default function DeleteIcon(props: props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       fill="none"
       stroke={props.color}
diff --git a/src/components/Icons/EditIcon/EditIcon.tsx b/src/components/Icons/EditIcon/EditIcon.tsx
index e98d881..08af93f 100644
--- a/src/components/Icons/EditIcon/EditIcon.tsx
+++ b/src/components/Icons/EditIcon/EditIcon.tsx
@@ -8,8 +8,8 @@ export default function EditIcon(props: props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width={props.size + "vh"}
-      height={props.size + "vh"}
+      width={props.size + "px"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       fill="none"
       stroke={props.color}
diff --git a/src/routes/Inventory/Inventory.tsx b/src/routes/Inventory/Inventory.tsx
index a37534d..6f0fb66 100644
--- a/src/routes/Inventory/Inventory.tsx
+++ b/src/routes/Inventory/Inventory.tsx
@@ -79,7 +79,7 @@ export default function Inventory() {
   return (
     <div style={{ margin: 32, height: "100%" }}>
       <div style={styles.content_row}>
-        <InventoryIcon size={8} color="white" />
+        <InventoryIcon size={64} color="white" />
         <h1 style={styles.text_large}>Inventory</h1>
       </div>
       <TableContainer