Polished code. Reorganized text styling into separate sizes and colors. Also polished svg icons

src/Routes/Dashboard/Dashboard.tsx

@@ -14,41 +14,68 @@ export default function Dashboard() {
     <div style={{ margin: 32, height: "100%" }}>
       <div style={styles.flex_row}>
         <HomeIcon size={64} color="white" />
-        <h1 style={styles.text_large}>Dashboard</h1>
+        <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Dashboard</h1>
       </div>
-      <div style={{ display: "flex", flexDirection: "row" }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+        }}
+      >
         <div style={{ flex: 7 }}>
           <div style={styles.flex_column}>
-            <div style={{ ...styles.widget, ...{ flex: 5 } }}>
+            <div
+              style={{
+                ...styles.widget,
+                ...{ flex: 5 },
+              }}
+            >
               <div style={styles.content_row}>
                 <TotalProductsIcon size={64} color="white" />
-                <h1 style={styles.text_extra_large}>Total Products</h1>
+                <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+                  Total Products
+                </h1>
               </div>
-              <h1 style={styles.text_large}>2546 Unique Items</h1>
-              <h1 style={styles.text_large}>In inventory</h1>
+              <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+                2546 Unique Items
+              </h1>
+              <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+                In inventory
+              </h1>
             </div>
             <div style={styles.flex_row}>
-              <div style={{ ...styles.widget, ...{ flex: 6 } }}>
+              <div
+                style={{
+                  ...styles.widget,
+                  ...{ flex: 5 },
+                }}
+              >
                 <div style={styles.content_row}>
                   <StatsIcon size={64} color="white" />
-                  <h1 style={styles.text_large}>Current Session</h1>
+                  <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+                    Current Session
+                  </h1>
                 </div>
                 <div style={styles.content_row}>
                   <ColoredCube size={32} color="#a48e41" />
-                  <h1 style={styles.text_large}>Added</h1>
+                  <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+                    Added
+                  </h1>
                 </div>
-                <h1 style={styles.text_large}>254</h1>
+                <h1 style={{ ...styles.text_white, ...styles.text_L }}>254</h1>
                 <div style={styles.content_row}>
                   <ColoredCube size={32} color="#a44141" />
-                  <h1 style={styles.text_large}>Removed</h1>
+                  <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+                    Removed
+                  </h1>
                 </div>
-                <h1 style={styles.text_large}>118</h1>
+                <h1 style={{ ...styles.text_white, ...styles.text_XL }}>118</h1>
               </div>
               <div
                 style={{
                   ...styles.flex_column,
                   ...{
-                    flex: 4,
+                    flex: 5,
                   },
                 }}
               >
@@ -60,10 +87,16 @@ export default function Dashboard() {
                 >
                   <div style={styles.content_row}>
                     <LowStockIcon size={64} color="white" />
-                    <h1 style={styles.text_medium}>Low Stock</h1>
+                    <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+                      Low Stock
+                    </h1>
                   </div>
-                  <h1 style={styles.text_medium}>Canned Pagmamahal</h1>
-                  <h1 style={styles.text_tiny}>In Stock: 3</h1>
+                  <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+                    Canned Pagmamahal
+                  </h1>
+                  <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+                    In Stock: 3
+                  </h1>
                 </div>
                 <div
                   style={{
@@ -73,10 +106,21 @@ export default function Dashboard() {
                 >
                   <div style={styles.content_row}>
                     <RecentlyAddedIcon size={64} color="white" />
-                    <h1 style={styles.text_medium}>Recently Added</h1>
+                    <h1
+                      style={{
+                        ...styles.text_white,
+                        ...styles.text_L,
+                      }}
+                    >
+                      Recently Added
+                    </h1>
                   </div>
-                  <h1 style={styles.text_medium}>Zidane's Water</h1>
-                  <h1 style={styles.text_tiny}>Added 02/17/2023</h1>
+                  <h1 style={{ ...styles.text_white, ...styles.text_M }}>
+                    Zidane's Water
+                  </h1>
+                  <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+                    Added 02/17/2023
+                  </h1>
                 </div>
               </div>
             </div>
@@ -87,33 +131,66 @@ export default function Dashboard() {
             <div style={styles.content_row}>
               <LogsIcon size={64} color="white" />
               <div style={styles.wrapper_column}>
-                <h1 style={styles.text_medium}>Recent</h1>
-                <h1 style={styles.text_medium}>Transactions</h1>
+                <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+                  Recent
+                </h1>
+                <h1 style={{ ...styles.text_white, ...styles.text_L }}>
+                  Transactions
+                </h1>
               </div>
             </div>
             <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>
+            <h1 style={{ ...styles.text_white, ...styles.text_M }}>
+              Kopiko Blanca
+            </h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+              Added: 96
+            </h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+              Removed: 105
+            </h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_XS }}>
+              02/17/2023
+            </h1>
             <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>
+            <h1 style={{ ...styles.text_white, ...styles.text_M }}>
+              Zidane's Water
+            </h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+              Added: 49
+            </h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+              Removed: 24
+            </h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_XS }}>
+              02/17/2023
+            </h1>
             <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>
+            <h1 style={{ ...styles.text_white, ...styles.text_M }}>
+              Dan's Beefed Corn
+            </h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+              Added: 32
+            </h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+              Removed: 64
+            </h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_XS }}>
+              02/17/2023
+            </h1>
             <div style={{ marginBottom: "8px" }} />
             <div style={styles.content_column}>
-              <h1 style={styles.text}>Canned</h1>
-              <h1 style={styles.text}>Pagmamahal</h1>
+              <h1 style={{ ...styles.text_white, ...styles.text_M }}>
+                Canned Pagmamahal
+              </h1>
             </div>
-            <h1 style={styles.text_small}>Added: 0</h1>
-            <h1 style={styles.text_small}>Removed: 60</h1>
-            <h1 style={styles.text_tiny}>02/17/2023</h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_S }}>Added: 0</h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
+              Removed: 60
+            </h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_XS }}>
+              02/17/2023
+            </h1>
           </div>
         </div>
       </div>

src/Routes/Error/Error.tsx

@@ -7,7 +7,7 @@ export default function Error() {
     <div style={styles.content_center}>
       <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
         <NotFoundIcon size={256} color="#a44141" />
-        <p style={styles.text}>Could not find the requested page</p>
+        <p style={{ ...styles.text_red, ...styles.text_L }}>Page Not Found</p>
       </div>
     </div>
   );

src/Routes/Login/Login.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import styles from "../../styles";
+
+export default function Login() {
+  return (
+    <div style={{ margin: 32, height: "100%" }}>
+      <div style={styles.flex_row}>
+        <h1 style={styles.text_large}>Login</h1>
+      </div>
+    </div>
+  );
+}

src/Routes/Products/Products.tsx

@@ -5,8 +5,8 @@ import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
 import AddIcon from "../../Components/Icons/AddIcon/AddIcon";
 import { Button, Switch } from "@mui/material";
 import { SampleProducts } from "../../Components/SampleData/SampleData";
-import TableView from "../../Components/Products/TableView/TableView";
-import BlobView from "../../Components/Products/BlobView/BlobView";
+import TableView from "../../Components/ProductsPage/TableView/TableView";
+import BlobView from "../../Components/ProductsPage/BlobView/BlobView";
 
 export default function Products() {
   const navigate = useNavigate();
@@ -24,7 +24,9 @@ export default function Products() {
         <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
           <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
             <ProductsIcon size={64} color="white" />
-            <h1 style={styles.text_large}>Products</h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+              Products
+            </h1>
           </div>
           <div
             style={{
@@ -32,20 +34,20 @@ export default function Products() {
               ...{ flex: 1, justifyContent: "flex-end" },
             }}
           >
+            <Switch onClick={() => toggleTableView(!tableView)} />
             <Button
               onClick={() => navigate("/Products/AddProduct")}
               style={styles.button_add_product}
             >
               <AddIcon size={32} color="white" />
-              <p style={styles.text_medium}>Add Product</p>
+              <p style={{ ...styles.text_white, ...styles.text_M }}>
+                Add Product
+              </p>
             </Button>
           </div>
         </div>
       </div>
-      <div style={styles.content_row}>
-        <Switch onClick={() => toggleTableView(!tableView)} />
-        <p style={styles.text_small}>View Type</p>
-      </div>
+
       {view()}
     </div>
   );