optimize: add color to status menu items in table

BigSillyTiger · Apr 18, 2024 · d6bd468 · d6bd468
1 parent e55caff
commit d6bd468
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 6 deletions.
diff --git a/src/components/table/tableBtn/OrderStatusBtn.tsx b/src/components/table/tableBtn/OrderStatusBtn.tsx
@@ -12,6 +12,7 @@ import {
     // DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { statusColor } from "@/configs/utils/color";
 
 type Tprops = {
     mLabel: ReactNode | string;
@@ -41,7 +42,10 @@ const OrderStatusBtn: FC<Tprops> = ({ mLabel, data }) => {
             return;
 
         return (
-            <DropdownMenuItem key={index}>
+            <DropdownMenuItem
+                key={index}
+                className={`${statusColor[item].text} ${statusColor[item].fbg} ${statusColor[item].ftext}`}
+            >
                 <div
                     onClick={() => {
                         //e.preventDefault();

diff --git a/src/components/table/tableBtn/PSStatusBtn.tsx b/src/components/table/tableBtn/PSStatusBtn.tsx
@@ -12,6 +12,7 @@ import {
     // DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { statusColor } from "@/configs/utils/color";
 
 type Tprops = {
     mLabel: ReactNode | string;
@@ -41,7 +42,10 @@ const PSStatusBtn: FC<Tprops> = ({ mLabel, data }) => {
         if (item.toLocaleLowerCase() === data.status.toLocaleLowerCase())
             return;
         return (
-            <DropdownMenuItem key={index}>
+            <DropdownMenuItem
+                key={index}
+                className={`${statusColor[item].text} ${statusColor[item].fbg} ${statusColor[item].ftext}`}
+            >
                 <div
                     onClick={() => {
                         handleClick(data.psid, item);

diff --git a/src/components/table/tableBtn/WLStatusBtn.tsx b/src/components/table/tableBtn/WLStatusBtn.tsx
@@ -12,6 +12,7 @@ import {
     // DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { statusColor } from "@/configs/utils/color";
 
 type Tprops = {
     mLabel: ReactNode | string;
@@ -44,8 +45,12 @@ const WLStatusBtn: FC<Tprops> = ({ mLabel, data }) => {
         return WL_STATUS_TABLE.map((item, index) => {
             if (item.toLocaleLowerCase() === data.wl_status.toLocaleLowerCase())
                 return;
+
             return (
-                <DropdownMenuItem key={index}>
+                <DropdownMenuItem
+                    key={index}
+                    className={`${statusColor[item].text} ${statusColor[item].fbg} ${statusColor[item].ftext}`}
+                >
                     <div
                         onClick={() => {
                             handleClick(data.wlid, item);

diff --git a/src/configs/utils/color.ts b/src/configs/utils/color.ts
@@ -25,53 +25,69 @@ export const staffColorMap = {
 export const statusColor = {
     pending: {
         bg: "bg-yellow-200",
+        fbg: "focus:bg-yellow-200",
         text: "text-yellow-700",
+        ftext: "focus:text-yellow-700",
         border: "border-yellow-600",
     },
     ongoing: {
         bg: "bg-lime-200",
+        fbg: "focus:bg-lime-200",
         text: "text-lime-700",
+        ftext: "focus:text-lime-700",
         border: "border-lime-600",
     },
     cancelled: {
         bg: "bg-red-200",
+        fbg: "focus:bg-red-200",
         text: "text-red-700",
+        ftext: "focus:text-red-700",
         border: "border-red-600",
     },
     unconfirmed: {
         bg: "bg-amber-200",
+        fbg: "focus:bg-amber-200",
         text: "text-amber-700",
+        ftext: "focus:text-amber-700",
         border: "border-amber-600",
     },
     confirmed: {
         bg: "bg-indigo-200",
+        fbg: "focus:bg-indigo-200",
         text: "text-indigo-700",
+        ftext: "focus:text-indigo-700",
         border: "border-indigo-600",
     },
     resting: {
         bg: "bg-pink-200",
+        fbg: "focus:bg-pink-200",
         text: "text-pink-700",
+        ftext: "focus:text-pink-700",
         border: "border-pink-600",
     },
     unpaid: {
         bg: "bg-fuchsia-200",
+        fbg: "focus:bg-fuchsia-200",
         text: "text-yellow-700",
+        ftext: "focus:text-yellow-700",
         border: "border-fuchsia-600",
     },
     completed: {
         bg: "bg-teal-200",
+        fbg: "focus:bg-teal-200",
         text: "text-teal-700",
+        ftext: "focus:text-teal-700",
         border: "border-teal-600",
     },
 };
 
 export const colorWithStaffUid = (uid: string) => {
     const color = uid.charAt(0);
     if (color === "L") {
-        return "text-amber-700";
+        return staffColorMap.labor;
     } else if (color === "E") {
-        return "text-lime-700";
+        return staffColorMap.employee;
     } else {
-        return "text-indigo-700";
+        return staffColorMap.manager;
     }
 };