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

package-lock.json

@@ -22,6 +22,7 @@
         "@types/node": "^16.18.12",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.10",
+        "axios": "^1.3.4",
         "localforage": "^1.10.0",
         "match-sorter": "^6.3.1",
         "react": "^18.2.0",
@@ -5258,6 +5259,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -14349,6 +14373,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "@types/node": "^16.18.12",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.10",
+    "axios": "^1.3.4",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",

src/Components/Api/Api.tsx

@@ -0,0 +1,143 @@
+import axios from "axios";
+import {
+  ActivationParams,
+  UpdateProductParams,
+  AddProductParams,
+  LoginParams,
+  RegistrationParams,
+} from "../../Interfaces/Interfaces";
+
+// Note APIs
+
+export function GetProducts() {
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
+  return axios
+    .get("http://localhost:8000/api/v1/products/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    });
+}
+
+export function GetNote(id: number) {
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
+  return axios
+    .get("http://localhost:8000/api/v1/products/" + id + "/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    });
+}
+
+export function UpdateProduct(note: UpdateProductParams) {
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
+  return axios
+    .patch("http://localhost:8000/api/v1/products/" + note.id + "/", note, {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      console.log("Error updating product", error);
+      return error;
+    });
+}
+
+export function AddProduct(note: AddProductParams) {
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
+  return axios
+    .post("http://localhost:8000/api/v1/products/", note, {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      console.log("Error adding product", error);
+      return error;
+    });
+}
+
+export function DeleteProduct(id: number) {
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
+  return axios
+    .delete("http://localhost:8000/api/v1/products/" + id + "/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .catch((error) => {
+      console.log("Error deleting product", error);
+      return error;
+    });
+}
+
+// User APIs
+
+export function UserRegister(register: RegistrationParams) {
+  return axios
+    .post("http://localhost:8000/api/v1/accounts/users/", register)
+    .then(async (response) => {
+      console.log(response.data);
+      return true;
+    })
+    .catch((error) => {
+      console.log("Registration failed: " + error);
+      return false;
+    });
+}
+
+export function UserLogin(user: LoginParams) {
+  return axios
+    .post("http://localhost:8000/api/v1/accounts/token/login/", user)
+    .then(async (response) => {
+      localStorage.setItem("token", JSON.stringify(response.data.auth_token));
+      console.log(
+        "Login Success! Stored Token: ",
+        JSON.parse(localStorage.getItem("token") || "{}")
+      );
+      return true;
+    })
+    .catch((error) => {
+      console.log("Login Failed: " + error);
+      return false;
+    });
+}
+
+export function UserInfo() {
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
+  return axios
+    .get("http://localhost:8000/api/v1/accounts/users/me/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      console.log(response.data);
+      return response.data;
+    });
+}
+
+export function UserActivate(activation: ActivationParams) {
+  return axios
+    .post("http://localhost:8000/api/v1/accounts/users/activation/", activation)
+    .then(async (response) => {
+      console.log("Activation Success");
+      return true;
+    })
+    .catch((error) => {
+      console.log("Activation failed: " + error);
+      return false;
+    });
+}

src/Components/Container/Container.tsx

@@ -14,7 +14,10 @@ export default function Container(props: props) {
       <div style={{ width: "15%", position: "fixed" }}>
         <Sidebar />
       </div>
-      <div style={styles.route_wrapper}>{props.children}</div>
+      <div style={styles.route_wrapper}>
+        {props.children}
+        <div style={{ padding: 64 }} />
+      </div>
     </div>
   );
 }

src/Components/Header/Header.tsx

@@ -8,7 +8,7 @@ export default function Header() {
     <div style={styles.header_wrapper}>
       <div style={styles.header_left}>
         <AppLogo size={64} color="#80b38b" />
-        <p style={styles.logo_title}>Ivy</p>
+        <p style={styles.logo_text}>Ivy</p>
       </div>
       <div style={styles.header_right}>
         <Login />

src/Components/Icons/AppLogo/AppLogo.tsx

@@ -7,16 +7,14 @@ export interface props {
 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 + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"
-      stroke-width="2"
+      strokeWidth="2"
       stroke={props.color}
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M2 9a10 10 0 1 0 20 0"></path>

src/Components/Icons/HomeIcon/HomeIcon.tsx

@@ -7,16 +7,14 @@ export interface props {
 export default function HomeIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="icon icon-tabler icon-tabler-home-2"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"
-      stroke-width="2"
+      strokeWidth="2"
       stroke={props.color}
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>

src/Components/Icons/InventoryIcon/InventoryIcon.tsx

@@ -7,16 +7,14 @@ export interface props {
 export default function InventoryIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="icon icon-tabler icon-tabler-box-seam"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"
-      stroke-width="1"
+      strokeWidth="1"
       stroke={props.color}
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="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>

src/Components/Icons/LogoutIcon/LogoutIcon.tsx

@@ -7,16 +7,14 @@ export interface props {
 export default function LogoutIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="icon icon-tabler icon-tabler-logout"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"
-      stroke-width="1"
+      strokeWidth="1"
       stroke={props.color}
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="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>

src/Components/Icons/LogsIcon/LogsIcon.tsx

@@ -7,16 +7,14 @@ export interface props {
 export default function LogsIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="icon icon-tabler icon-tabler-clipboard-data"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"
-      stroke-width="1"
+      strokeWidth="1"
       stroke={props.color}
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="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>

src/Components/Icons/LowStockIcon/LowStockIcon.tsx

@@ -7,16 +7,14 @@ export interface props {
 export default function LowStockIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="icon icon-tabler icon-tabler-zoom-exclamation"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"
-      stroke-width="2"
+      strokeWidth="2"
       stroke={props.color}
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>

src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx

@@ -7,16 +7,14 @@ export interface props {
 export default function NotFoundIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="icon icon-tabler icon-tabler-error-404"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"
-      stroke-width="1"
+      strokeWidth="1"
       stroke={props.color}
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M3 7v4a1 1 0 0 0 1 1h3"></path>

src/Components/Icons/ProductIcon/ProductIcon.tsx

@@ -7,15 +7,14 @@ export interface props {
 export default function ProductIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"
-      stroke-width="2"
+      strokeWidth="2"
       stroke={props.color}
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M7.05 11.293l4.243 -4.243a2 2 0 0 1 2.828 0l2.829 2.83a2 2 0 0 1 0 2.828l-4.243 4.243a2 2 0 0 1 -2.828 0l-2.829 -2.831a2 2 0 0 1 0 -2.828z"></path>

src/Components/Icons/ProductsIcon/ProductsIcon.tsx

@@ -7,16 +7,14 @@ export interface props {
 export default function ProductsIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="icon icon-tabler icon-tabler-list-numbers"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"
-      stroke-width="1"
+      strokeWidth="1"
       stroke={props.color}
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M11 6h9"></path>

src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx

@@ -7,16 +7,14 @@ export interface props {
 export default function RecentlyAddedIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="icon icon-tabler icon-tabler-book-upload"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"
-      stroke-width="1"
+      strokeWidth="1"
       stroke={props.color}
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M14 20h-8a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12v5"></path>

src/Components/Icons/StatsIcon/StatsIcon.tsx

@@ -7,16 +7,14 @@ export interface props {
 export default function StatsIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="icon icon-tabler icon-tabler-align-box-bottom-center"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"
-      stroke-width="1"
+      strokeWidth="1"
       stroke={props.color}
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>

src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx

@@ -7,16 +7,14 @@ export interface props {
 export default function TotalProductsIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className="icon icon-tabler icon-tabler-packages"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"
-      stroke-width="1"
+      strokeWidth="1"
       stroke={props.color}
       fill="none"
-      stroke-linecap="round"
+      strokeLinecap="round"
-      stroke-linejoin="round"
+      strokeLinejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>

src/Components/Login/Login.tsx

@@ -17,7 +17,9 @@ export default function Login() {
   }
 
   if (logged_in) {
-    return <p style={styles.text}>Welcome Jophiel</p>;
+    return (
+      <p style={{ ...styles.text_white, ...styles.text_M }}>Welcome Jophiel</p>
+    );
   } else {
     return (
       <div>
@@ -27,7 +29,7 @@ export default function Login() {
           variant="contained"
           style={styles.login_button}
         >
-          <p style={styles.text}>Login</p>
+          <p style={{ ...styles.text, ...styles.text_M }}>Login</p>
         </Button>
       </div>
     );

src/Components/Logout/Logout.tsx

@@ -32,7 +32,7 @@ export default function Logout(props: props) {
         style={styles.logout_button}
       >
         {props.children}
-        <p style={styles.text}>Log Out</p>
+        <p style={{ ...styles.text_white, ...styles.text_S }}>Log Out</p>
       </Button>
     </div>
   );

src/Components/ProductsPage/BlobView/BlobView.tsx

@@ -22,11 +22,13 @@ export default function BlobView({ Products }: ProductList) {
         >
           <div style={styles.content_row}>
             <ProductIcon size={4} color="white" />{" "}
-            <p style={styles.text}>{row.name}</p>
+            <p style={{ ...styles.text_white, ...styles.text_L }}>{row.name}</p>
           </div>
 
-          <p style={styles.text}>ID: {row.id}</p>
+          <p style={{ ...styles.text_white, ...styles.text_M }}>ID: {row.id}</p>
-          <p style={styles.text_small}>Last Modified: {row.last_modified}</p>
+          <p style={{ ...styles.text_white, ...styles.text_S }}>
+            Last Modified: {row.last_modified}
+          </p>
         </div>
       ))}
     </div>

src/Components/ProductsPage/TableView/TableView.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import {
-  Button,
   Table,
   TableBody,
   TableCell,
@@ -22,9 +21,15 @@ export default function TableView({ Products }: ProductList) {
       <Table sx={{ minWidth: 650 }} aria-label="simple table">
         <TableHead>
           <TableRow>
-            <TableCell style={styles.text}>Product ID</TableCell>
+            <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
-            <TableCell style={styles.text}>Product</TableCell>
+              Product ID
-            <TableCell style={styles.text}>Last Modified</TableCell>
+            </TableCell>
+            <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
+              Product
+            </TableCell>
+            <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
+              Last Modified
+            </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -33,9 +38,15 @@ export default function TableView({ Products }: ProductList) {
               key={row.id}
               sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
             >
-              <TableCell style={styles.text}>{row.id}</TableCell>
+              <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
-              <TableCell style={styles.text}>{row.name}</TableCell>
+                {row.id}
-              <TableCell style={styles.text}>{row.last_modified}</TableCell>
+              </TableCell>
+              <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
+                {row.name}
+              </TableCell>
+              <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
+                {row.last_modified}
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>

src/Components/SidebarButton/SidebarButton.tsx

@@ -20,7 +20,7 @@ export default function SidebarButton(props: props) {
         style={styles.sidebar_button}
       >
         {props.children}
-        <p style={styles.text}>{props.name}</p>
+        <p style={{ ...styles.text_white, ...styles.text_S }}>{props.name}</p>
       </Button>
     </div>
   );

src/Interfaces/Interfaces.tsx

@@ -7,3 +7,54 @@ export interface Product {
   name: string;
   last_modified: string;
 }
+
+// Redux Interfaces
+export interface LoginState {
+  Login: { logged_in: boolean };
+}
+
+export interface LoggedInUserState {
+  LoggedInUser: {
+    value: {
+      email: string;
+      id: number;
+      username: string;
+    };
+  };
+}
+
+// Component Props Interfaces
+
+export interface IconProps {
+  size: number;
+  color: string;
+}
+
+// API Interfaces
+
+export interface RegistrationParams {
+  email: string;
+  username: string;
+  password: string;
+}
+
+export interface LoginParams {
+  username: string;
+  password: string;
+}
+
+export interface ActivationParams {
+  uid: string;
+  token: string;
+}
+
+export interface AddProductParams {
+  name: string;
+  quantity: string;
+}
+
+export interface UpdateProductParams {
+  id: number;
+  name: string;
+  quantity: string;
+}

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_white, ...styles.text_L }}>
-              <h1 style={styles.text_large}>In inventory</h1>
+                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_white, ...styles.text_S }}>
-                  <h1 style={styles.text_tiny}>In Stock: 3</h1>
+                    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_white, ...styles.text_M }}>
-                  <h1 style={styles.text_tiny}>Added 02/17/2023</h1>
+                    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_white, ...styles.text_L }}>
-                <h1 style={styles.text_medium}>Transactions</h1>
+                  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_white, ...styles.text_M }}>
-            <h1 style={styles.text_small}>Added: 96</h1>
+              Kopiko Blanca
-            <h1 style={styles.text_small}>Removed: 105</h1>
+            </h1>
-            <h1 style={styles.text_tiny}>02/17/2023</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_white, ...styles.text_M }}>
-            <h1 style={styles.text_small}>Added: 49</h1>
+              Zidane's Water
-            <h1 style={styles.text_small}>Removed: 24</h1>
+            </h1>
-            <h1 style={styles.text_tiny}>02/17/2023</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_white, ...styles.text_M }}>
-            <h1 style={styles.text_small}>Added: 32</h1>
+              Dan's Beefed Corn
-            <h1 style={styles.text_small}>Removed: 64</h1>
+            </h1>
-            <h1 style={styles.text_tiny}>02/17/2023</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_white, ...styles.text_M }}>
-              <h1 style={styles.text}>Pagmamahal</h1>
+                Canned Pagmamahal
+              </h1>
             </div>
-            <h1 style={styles.text_small}>Added: 0</h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_S }}>Added: 0</h1>
-            <h1 style={styles.text_small}>Removed: 60</h1>
+            <h1 style={{ ...styles.text_white, ...styles.text_S }}>
-            <h1 style={styles.text_tiny}>02/17/2023</h1>
+              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 TableView from "../../Components/ProductsPage/TableView/TableView";
-import BlobView from "../../Components/Products/BlobView/BlobView";
+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>
   );

src/components/Icons/AddIcon/AddIcon.tsx

@@ -7,7 +7,6 @@ export interface props {
 export default function AddIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"

src/components/Icons/CancelIcon/CancelIcon.tsx

@@ -8,7 +8,6 @@ export interface props {
 export default function CancelIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"

src/components/Icons/DeleteIcon/DeleteIcon.tsx

@@ -7,7 +7,6 @@ export interface props {
 export default function DeleteIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"

src/components/Icons/EditIcon/EditIcon.tsx

@@ -7,7 +7,6 @@ export interface props {
 export default function EditIcon(props: props) {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
       width={props.size + "px"}
       height={props.size + "px"}
       viewBox="0 0 24 24"

src/routes/Inventory/Inventory.tsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import styles from "../../styles";
 import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon";
 import {
-  Button,
   Table,
   TableBody,
   TableCell,
@@ -30,6 +29,7 @@ export default function Inventory() {
             style={{
               ...styles.text_red,
               ...{ border: "none", background: "none" },
+              ...styles.text_S,
             }}
             value={stock}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -47,6 +47,7 @@ export default function Inventory() {
             style={{
               ...styles.text_orange,
               ...{ border: "none", background: "none" },
+              ...styles.text_S,
             }}
             value={stock}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -64,6 +65,7 @@ export default function Inventory() {
             style={{
               ...styles.text_green,
               ...{ border: "none", background: "none" },
+              ...styles.text_S,
             }}
             value={stock}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -80,7 +82,7 @@ export default function Inventory() {
     <div style={{ margin: 32, height: "100%" }}>
       <div style={styles.content_row}>
         <InventoryIcon size={64} color="white" />
-        <h1 style={styles.text_large}>Inventory</h1>
+        <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Inventory</h1>
       </div>
       <TableContainer
         style={{
@@ -91,9 +93,15 @@ export default function Inventory() {
         <Table sx={{ minWidth: 650 }} aria-label="simple table">
           <TableHead>
             <TableRow>
-              <TableCell style={styles.text}>Product ID</TableCell>
+              <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
-              <TableCell style={styles.text}>Product</TableCell>
+                Product ID
-              <TableCell style={styles.text}>In Stock</TableCell>
+              </TableCell>
+              <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
+                Product
+              </TableCell>
+              <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
+                In Stock
+              </TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
@@ -102,8 +110,12 @@ export default function Inventory() {
                 key={row.id}
                 sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
               >
-                <TableCell style={styles.text}>{row.id}</TableCell>
+                <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
-                <TableCell style={styles.text}>{row.name}</TableCell>
+                  {row.id}
+                </TableCell>
+                <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
+                  {row.name}
+                </TableCell>
                 {StockRender(row.in_stock)}
               </TableRow>
             ))}

src/styles.tsx

@@ -7,54 +7,48 @@ const styles: { [key: string]: React.CSSProperties } = {
     height: "100%",
     backgroundColor: "#0b2322",
   },
-  text_tiny: {
+  /*
-    fontSize: "0.6vw",
+  Font Sizes
-    color: "white",
+  Extra-Large: 2rem
-    fontWeight: "bold",
+  Large: 1.6rem
-  },
+  Medium: 1.2rem
-  text_small: {
+  Small: 1rem
-    fontSize: "0.8vw",
+  Tiny: 0.8rem
-    color: "white",
+   */
-    fontWeight: "bold",
+  text_white: {
-  },
-  text: {
-    fontSize: "1.3vw",
-    color: "white",
-    fontWeight: "bold",
-  },
-  text_medium: {
-    fontSize: "1.2vw",
-    color: "white",
-    fontWeight: "bold",
-  },
-  text_large: {
-    fontSize: "2.2vw",
-    color: "white",
-    fontWeight: "bold",
-  },
-  text_extra_large: {
-    fontSize: "3.2vw",
     color: "white",
     fontWeight: "bold",
   },
   text_red: {
-    fontSize: "1.3vw",
     color: "#a44141",
     fontWeight: "bold",
   },
   text_orange: {
-    fontSize: "1.3vw",
     color: "#c57331",
     fontWeight: "bold",
   },
   text_green: {
-    fontSize: "1.3vw",
     color: "#80b28a",
     fontWeight: "bold",
   },
-  logo_title: {
+  text_XL: {
+    fontSize: "2rem",
+  },
+  text_L: {
+    fontSize: "1.6rem",
+  },
+  text_M: {
+    fontSize: "1.2rem",
+  },
+  text_S: {
+    fontSize: "1rem",
+  },
+  text_XS: {
+    fontSize: "0.8rem",
+  },
+  logo_text: {
     color: "#80b38b",
-    fontSize: 26,
+    fontSize: "2rem",
     fontWeight: "bold",
   },
   header_wrapper: {
@@ -130,6 +124,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     display: "flex",
     flexDirection: "column",
     backgroundColor: "#1d3b33",
+    alignSelf: "stretch",
     borderRadius: 8,
     paddingLeft: 16,
     paddingRight: 16,