Made icon sizing based on px rather than vh

src/Components/ColoredCube/ColoredCube.tsx

@@ -10,8 +10,8 @@ export default function ColoredCube(props: props) {
       <div
         style={{
           backgroundColor: props.color,
-          width: props.size + "vh",
+          width: props.size + "px",
-          height: props.size + "vh",
+          height: props.size + "px",
         }}
       />
     </div>

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}>

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="2"
       stroke={props.color}

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="2"
       stroke={props.color}

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="2"
       stroke={props.color}

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="2"
       stroke={props.color}

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       stroke-width="1"
       stroke={props.color}

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>

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" />
+                  <ColoredCube size={32} color="#a44141" />
-                  <h1 style={styles.text_large}>Removed</h1>{" "}
+                  <h1 style={styles.text_large}>Removed</h1>
                 </div>
+                <h1 style={styles.text_large}>118</h1>
               </div>
-              <div style={{ ...styles.flex_column, ...{ flex: 4 } }}>
+              <div
-                <div style={{ ...styles.widget, ...{ flex: 1 } }}>
+                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>

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}>
+      <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
-        <NotFoundIcon size={64} color="#a44141" />
+        <NotFoundIcon size={256} color="#a44141" />
         <p style={styles.text}>Could not find the requested page</p>
       </div>
     </div>

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

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>

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       fill="none"
       stroke={props.color}

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       fill="none"
       stroke={props.color}

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       fill="none"
       stroke={props.color}

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"}
+      width={props.size + "px"}
-      height={props.size + "vh"}
+      height={props.size + "px"}
       viewBox="0 0 24 24"
       fill="none"
       stroke={props.color}

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