Shortened code for amount change color in Logs.tsx and polished some other stuff

src/Components/ProductsPage/ViewManager.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { useState } from "react";
+import { Switch } from "@mui/material";
+import TableView from "../../Components/ProductsPage/TableView/TableView";
+import BlobView from "../../Components/ProductsPage/BlobView/BlobView";
+import { ProductList } from "../../Interfaces/Interfaces";
+
+export interface props {}
+
+export default function ViewManager(props: ProductList) {
+  const [tableView, toggleTableView] = useState(false);
+  if (tableView) {
+    return (
+      <div>
+        <Switch onClick={() => toggleTableView(!tableView)} />
+        <TableView Products={props.Products} />
+      </div>
+    );
+  } else {
+    return (
+      <div>
+        <Switch onClick={() => toggleTableView(!tableView)} />
+        <BlobView Products={props.Products} />
+      </div>
+    );
+  }
+}

src/Routes/Logs/Logs.tsx

@@ -12,18 +12,11 @@ import {
 import { SampleLogData } from "../../Components/SampleData/SampleData";
 
 export default function Logs() {
-  function change_color(amount: number) {
-    if (amount > 0) {
-      return <TableCell style={styles.text_green}>{amount}</TableCell>;
-    } else {
-      return <TableCell style={styles.text_red}>{amount}</TableCell>;
-    }
-  }
   return (
     <div style={{ margin: 32, height: "100%" }}>
       <div style={styles.flex_row}>
         <LogsIcon size={64} color="white" />
-        <h1 style={styles.text_large}>Logs</h1>
+        <h1 style={{ ...styles.text_white, ...styles.text_XL }}>Logs</h1>
       </div>
       <TableContainer
         style={{
@@ -34,11 +27,21 @@ export default function Logs() {
         <Table sx={{ minWidth: 650 }} aria-label="simple table">
           <TableHead>
             <TableRow>
-              <TableCell style={styles.text}>Log ID</TableCell>
+              <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
-              <TableCell style={styles.text}>Product ID</TableCell>
+                Log ID
-              <TableCell style={styles.text}>Product</TableCell>
+              </TableCell>
-              <TableCell style={styles.text}>Amount Change</TableCell>
+              <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
-              <TableCell style={styles.text}>Timestamp</TableCell>
+                Product ID
+              </TableCell>
+              <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
+                Product
+              </TableCell>
+              <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
+                Amount Change
+              </TableCell>
+              <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
+                Timestamp
+              </TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
@@ -47,11 +50,28 @@ export default function Logs() {
                 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.p_id}</TableCell>
+                  {row.id}
-                <TableCell style={styles.text}>{row.p_name}</TableCell>
+                </TableCell>
-                {change_color(row.amount_changed)}
+                <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
-                <TableCell style={styles.text}>{row.timestamp}</TableCell>
+                  {row.p_id}
+                </TableCell>
+                <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
+                  {row.p_name}
+                </TableCell>
+                <TableCell
+                  style={{
+                    ...{
+                      color: row.amount_changed < 0 ? "#a44141" : "#80b28a",
+                    },
+                    ...styles.text_S,
+                  }}
+                >
+                  {row.amount_changed}
+                </TableCell>
+                <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
+                  {row.timestamp}
+                </TableCell>
               </TableRow>
             ))}
           </TableBody>

src/Routes/Products/Products.tsx

@@ -3,21 +3,12 @@ import styles from "../../styles";
 import { useNavigate } from "react-router-dom";
 import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
 import AddIcon from "../../Components/Icons/AddIcon/AddIcon";
-import { Button, Switch } from "@mui/material";
+import { Button } from "@mui/material";
 import { SampleProducts } from "../../Components/SampleData/SampleData";
-import TableView from "../../Components/ProductsPage/TableView/TableView";
+import ViewManager from "../../Components/ProductsPage/ViewManager";
-import BlobView from "../../Components/ProductsPage/BlobView/BlobView";
 
 export default function Products() {
   const navigate = useNavigate();
-  const [tableView, toggleTableView] = useState(false);
-  function view() {
-    if (tableView) {
-      return <TableView Products={SampleProducts} />;
-    } else {
-      return <BlobView Products={SampleProducts} />;
-    }
-  }
   return (
     <div style={{ margin: 32, height: "100%" }}>
       <div style={styles.content_row}>
@@ -31,10 +22,9 @@ export default function Products() {
           <div
             style={{
               ...styles.content_row,
-              ...{ flex: 1, justifyContent: "flex-end" },
+              ...{ justifyContent: "flex-end", flex: 1 },
             }}
           >
-            <Switch onClick={() => toggleTableView(!tableView)} />
             <Button
               onClick={() => navigate("/Products/AddProduct")}
               style={styles.button_add_product}
@@ -47,8 +37,7 @@ export default function Products() {
           </div>
         </div>
       </div>
-
+      <ViewManager Products={SampleProducts} />
-      {view()}
     </div>
   );
 }