Removed some unused components and polished code

package-lock.json

@@ -26,6 +26,7 @@
         "match-sorter": "^6.3.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-fast-marquee": "^1.3.5",
         "react-redux": "^8.0.5",
         "react-router-dom": "^6.8.1",
         "react-scripts": "5.0.1",
@@ -14637,6 +14638,15 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-marquee": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.3.5.tgz",
+      "integrity": "sha512-eOqLoz4iVVBvi2wN/web8hd2XX9y2Z6CYR7g++7nTVHlTOXBtqyARQJ9rYNpbp179hAzloMx0yBFAo8LpNYmKQ==",
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 18.0.0",
+        "react-dom": ">= 16.8.0 || 18.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -21,6 +21,7 @@
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.3.5",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.8.1",
     "react-scripts": "5.0.1",

src/components/DashboardContainer/DashboardContainer.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-
-export interface props {
-  children: React.ReactNode;
-}
-
-export default function DashboardContainer(props: props) {
-  return (
-    <div style={{ marginRight: 32, marginLeft: 32 }}>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          alignSelf: "flex-start",
-          justifyContent: "left",
-          backgroundColor: "#1d3b33",
-          borderRadius: 16,
-          padding: 16,
-          width: "100%",
-          height: "100%",
-          lineHeight: 0.4,
-          marginLeft: 8,
-          marginRight: 8,
-        }}
-      >
-        {props.children}
-      </div>
-    </div>
-  );
-}

src/components/ProductListEntry/ProductListEntry.tsx

@@ -1,47 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-export interface props {
-  children: React.ReactNode;
-}
-
-export default function ProductListEntry(props: props) {
-  const [size, setSize] = useState(64);
-
-  useEffect(() => {
-    function onEnter() {
-      setSize(256);
-    }
-    function onLeave() {
-      setSize(128);
-    }
-
-    document
-      .getElementById("container")
-      ?.addEventListener("mouseenter", onEnter);
-    document
-      .getElementById("container")
-      ?.addEventListener("mouseleave", onLeave);
-    return () => {
-      document
-        .getElementById("container")
-        ?.removeEventListener("mouseenter", onEnter);
-      document
-        .getElementById("container")
-        ?.removeEventListener("mouseleave", onLeave);
-    };
-  }, []);
-  return (
-    <div
-      id="container"
-      style={{
-        justifyContent: "center",
-        alignItems: "center",
-        backgroundColor: "#497f4d",
-        width: size,
-        height: size,
-      }}
-    >
-      {props.children}
-    </div>
-  );
-}

src/routes/Dashboard/Dashboard.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import TotalProductsIcon from "../../Components/Icons/TotalProductsIcon/TotalProductsIcon";
-import DashboardContainer from "../../Components/DashboardContainer/DashboardContainer";
 import LowStockIcon from "../../Components/Icons/LowStockIcon/LowStockIcon";
 import StatsIcon from "../../Components/Icons/StatsIcon/StatsIcon";
 import LogsIcon from "../../Components/Icons/LogsIcon/LogsIcon";
@@ -75,7 +74,7 @@ export default function Dashboard() {
               </div>
             </div>
             <div style={{ marginBottom: "2vh" }} />
-            <h1 style={styles.text}>Kopiko Blanca (Sack)</h1>
+            <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>

src/routes/Products/Products.tsx

@@ -1,9 +1,6 @@
 import React from "react";
 import styles from "../../styles";
-import AppLogo from "../../Components/Icons/AppLogo/AppLogo";
 import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
-import ProductListEntry from "../../Components/ProductListEntry/ProductListEntry";
-
 export default function Products() {
   return (
     <div style={{ margin: 32, height: "100%" }}>