From 1c8e7c9b5a85e427f505aab637e51e5c49b71ba9 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Thu, 2 Mar 2023 22:03:44 +0800
Subject: [PATCH] Reimplemented color values for stocks in Inventory page

---
 src/routes/Inventory/Inventory.tsx | 11 ++++++++++-
 src/styles.tsx                     |  5 +++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/routes/Inventory/Inventory.tsx b/src/routes/Inventory/Inventory.tsx
index 961ee54..205d551 100644
--- a/src/routes/Inventory/Inventory.tsx
+++ b/src/routes/Inventory/Inventory.tsx
@@ -13,6 +13,15 @@ import {
 import { SampleInventoryData } from "../../Components/SampleData/SampleData";
 
 export default function Inventory() {
+  function change_color(in_stock: number) {
+    if (in_stock > 0 && in_stock < 3) {
+      return <TableCell style={styles.text_red}>{in_stock}</TableCell>;
+    } else if (in_stock > 3 && in_stock < 9) {
+      return <TableCell style={styles.text_orange}>{in_stock}</TableCell>;
+    } else {
+      return <TableCell style={styles.text_green}>{in_stock}</TableCell>;
+    }
+  }
   return (
     <div style={{ margin: 32, height: "100%" }}>
       <div style={styles.content_row}>
@@ -41,7 +50,7 @@ export default function Inventory() {
               >
                 <TableCell style={styles.text}>{row.id}</TableCell>
                 <TableCell style={styles.text}>{row.name}</TableCell>
-                <TableCell style={styles.text}>{row.in_stock}</TableCell>
+                {change_color(row.in_stock)}
               </TableRow>
             ))}
           </TableBody>
diff --git a/src/styles.tsx b/src/styles.tsx
index 08d71e9..4d6af73 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -42,6 +42,11 @@ const styles: { [key: string]: React.CSSProperties } = {
     color: "#a44141",
     fontWeight: "bold",
   },
+  text_orange: {
+    fontSize: "1.3vw",
+    color: "#c57331",
+    fontWeight: "bold",
+  },
   text_green: {
     fontSize: "1.3vw",
     color: "#80b28a",