update colors in dashboard

apps/web/src/app/(dashboard)/dashboard/dashboard-chart.tsx

@@ -16,10 +16,30 @@ import { api } from "~/trpc/react";
 import Spinner from "@unsend/ui/src/spinner";
 import { Tabs, TabsList, TabsTrigger } from "@unsend/ui/src/tabs";
 import { useUrlState } from "~/hooks/useUrlState";
+import { useTheme } from "@unsend/ui";
 
 export default function DashboardChart() {
   const [days, setDays] = useUrlState("days", "7");
   const statusQuery = api.email.dashboard.useQuery({ days: Number(days) });
+  const { resolvedTheme } = useTheme();
+
+  const lightColors = {
+    delivered: "#40a02bcc",
+    bounced: "#d20f39cc",
+    complained: "#df8e1dcc",
+    opened: "#8839efcc",
+    clicked: "#04a5e5cc",
+  };
+
+  const darkColors = {
+    delivered: "#a6e3a1",
+    bounced: "#f38ba8",
+    complained: "#F9E2AF",
+    opened: "#cba6f7",
+    clicked: "#93c5fd",
+  };
+
+  const currentColors = resolvedTheme === "dark" ? darkColors : lightColors;
 
   return (
     <div>
@@ -145,7 +165,7 @@ export default function DashboardChart() {
                         </p>
                         {data.delivered ? (
                           <div className="flex gap-2 items-center">
-                            <div className="w-2.5 h-2.5 bg-[#10b981] rounded-[2px]"></div>
+                            <div className="w-2.5 h-2.5 bg-[#40a02bcc] dark:bg-[#a6e3a1] rounded-[2px]"></div>
                             <p className="text-xs text-muted-foreground w-[60px]">
                               Delivered
                             </p>
@@ -156,7 +176,7 @@ export default function DashboardChart() {
                         ) : null}
                         {data.bounced ? (
                           <div className="flex gap-2 items-center">
-                            <div className="w-2.5 h-2.5 bg-[#ef4444] rounded-[2px]"></div>
+                            <div className="w-2.5 h-2.5 bg-[#d20f39cc] dark:bg-[#f38ba8] rounded-[2px]"></div>
                             <p className="text-xs text-muted-foreground w-[60px]">
                               Bounced
                             </p>
@@ -165,7 +185,7 @@ export default function DashboardChart() {
                         ) : null}
                         {data.complained ? (
                           <div className="flex gap-2 items-center">
-                            <div className="w-2.5 h-2.5 bg-[#eab308] rounded-[2px]"></div>
+                            <div className="w-2.5 h-2.5 bg-[#df8e1dcc] dark:bg-[#F9E2AF] rounded-[2px]"></div>
                             <p className="text-xs text-muted-foreground w-[60px]">
                               Complained
                             </p>
@@ -176,7 +196,7 @@ export default function DashboardChart() {
                         ) : null}
                         {data.opened ? (
                           <div className="flex gap-2 items-center">
-                            <div className="w-2.5 h-2.5 bg-[#6366f1] rounded-[2px]"></div>
+                            <div className="w-2.5 h-2.5 bg-[#8839efcc] dark:bg-[#cba6f7] rounded-[2px]"></div>
                             <p className="text-xs text-muted-foreground w-[60px]">
                               Opened
                             </p>
@@ -185,7 +205,7 @@ export default function DashboardChart() {
                         ) : null}
                         {data.clicked ? (
                           <div className="flex gap-2 items-center">
-                            <div className="w-2.5 h-2.5 bg-[#06b6d4] rounded-[2px]"></div>
+                            <div className="w-2.5 h-2.5 bg-[#04a5e5cc] dark:bg-[#93c5fd] rounded-[2px]"></div>
                             <p className="text-xs text-muted-foreground w-[60px]">
                               Clicked
                             </p>
@@ -202,12 +222,24 @@ export default function DashboardChart() {
                   barSize={8}
                   dataKey="delivered"
                   stackId="a"
-                  fill="#10b981"
+                  fill={currentColors.delivered}
+                />
+                <Bar
+                  dataKey="bounced"
+                  stackId="a"
+                  fill={currentColors.bounced}
+                />
+                <Bar
+                  dataKey="complained"
+                  stackId="a"
+                  fill={currentColors.complained}
+                />
+                <Bar dataKey="opened" stackId="a" fill={currentColors.opened} />
+                <Bar
+                  dataKey="clicked"
+                  stackId="a"
+                  fill={currentColors.clicked}
                 />
-                <Bar dataKey="bounced" stackId="a" fill="#ef4444" />
-                <Bar dataKey="complained" stackId="a" fill="#eab308" />
-                <Bar dataKey="opened" stackId="a" fill="#6366f1" />
-                <Bar dataKey="clicked" stackId="a" fill="#06b6d4" />
               </BarChart>
             </ResponsiveContainer>
           </div>

apps/web/src/app/(dashboard)/emails/email-status-badge.tsx

@@ -7,27 +7,29 @@ export const EmailStatusBadge: React.FC<{ status: EmailStatus }> = ({
   switch (status) {
     case "DELIVERED":
       badgeColor =
-        "bg-green-500/15 dark:bg-green-600/10 text-green-700 dark:text-green-600/90 border  border-green-500/25 dark:border-green-700/25";
+        "bg-[#40a02b]/15 dark:bg-[#a6e3a1]/15 text-[#40a02b] dark:text-[#a6e3a1] border  border-[#40a02b]/25 dark:border-[#a6e3a1]/25";
       break;
     case "BOUNCED":
     case "FAILED":
       badgeColor =
-        "bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10";
+        "bg-[#d20f39]/15 dark:bg-[#f38ba8]/15 text-[#d20f39] dark:text-[#f38ba8] border border-[#d20f39]/20 dark:border-[#f38ba8]/20";
       break;
     case "CLICKED":
       badgeColor =
-        "bg-sky-500/15 text-sky-700 dark:text-sky-600 border border-sky-600/20";
+        "bg-[#04a5e5]/15 dark:bg-[#93c5fd]/15 text-[#04a5e5] dark:text-[#93c5fd] border border-[#04a5e5]/20 dark:border-[#93c5fd]/20";
       break;
     case "OPENED":
       badgeColor =
-        "bg-indigo-500/15 text-indigo-600 dark:text-indigo-500 border border-indigo-600/20";
+        "bg-[#8839ef]/15 dark:bg-[#cba6f7]/15 text-[#8839ef] dark:text-[#cba6f7] border border-[#8839ef]/20 dark:border-[#cba6f7]/20";
-      break;
-    case "DELIVERY_DELAYED":
-      badgeColor = "bg-yellow-500/10 text-yellow-600 border-yellow-600/20";
       break;
     case "COMPLAINED":
       badgeColor =
-        "bg-yellow-500/20 dark:bg-yellow-500/10 text-yellow-600 border border-yellow-600/10";
+        "bg-[#df8e1d]/10 dark:bg-[#F9E2AF]/15 dark:text-[#F9E2AF] text-[#df8e1d] border dark:border-[#F9E2AF]/20 border-[#df8e1d]/20";
+      break;
+    case "DELIVERY_DELAYED":
+      badgeColor =
+        "bg-[#df8e1d]/10 dark:bg-[#F9E2AF]/15 dark:text-[#F9E2AF] text-[#df8e1d] border dark:border-[#F9E2AF]/20 border-[#df8e1d]/20";
+
       break;
 
     default:
@@ -47,38 +49,39 @@ export const EmailStatusBadge: React.FC<{ status: EmailStatus }> = ({
 export const EmailStatusIcon: React.FC<{ status: EmailStatus }> = ({
   status,
 }) => {
-  let outsideColor = "bg-gray-500";
+  let outsideColor = "bg-gray-600/30 dark:bg-gray-400/30"; // Default
-  let insideColor = "bg-gray-500/50";
+  let insideColor = "bg-gray-600 dark:bg-gray-400"; // Default
 
   switch (status) {
     case "DELIVERED":
-      outsideColor = "bg-green-500/30";
+      outsideColor = "bg-[#40a02b]/30 dark:bg-[#a6e3a1]/30";
-      insideColor = "bg-green-500";
+      insideColor = "bg-[#40a02b] dark:bg-[#a6e3a1]";
       break;
     case "BOUNCED":
     case "FAILED":
-      outsideColor = "bg-red-500/30";
+      outsideColor = "bg-[#d20f39]/30 dark:bg-[#f38ba8]/30";
-      insideColor = "bg-red-500";
+      insideColor = "bg-[#d20f39] dark:bg-[#f38ba8]";
       break;
     case "CLICKED":
-      outsideColor = "bg-sky-500/30";
+      outsideColor = "bg-[#04a5e5]/30 dark:bg-[#93c5fd]/30";
-      insideColor = "bg-sky-500";
+      insideColor = "bg-[#04a5e5] dark:bg-[#93c5fd]";
       break;
     case "OPENED":
-      outsideColor = "bg-indigo-500/30";
+      outsideColor = "bg-[#8839ef]/30 dark:bg-[#cba6f7]/30";
-      insideColor = "bg-indigo-500";
+      insideColor = "bg-[#8839ef] dark:bg-[#cba6f7]";
       break;
     case "DELIVERY_DELAYED":
-      outsideColor = "bg-yellow-500/30";
+      outsideColor = "bg-[#df8e1d]/30 dark:bg-[#F9E2AF]/30";
-      insideColor = "bg-yellow-500";
+      insideColor = "bg-[#df8e1d] dark:bg-[#F9E2AF]";
       break;
     case "COMPLAINED":
-      outsideColor = "bg-yellow-500/30";
+      outsideColor = "bg-[#df8e1d]/30 dark:bg-[#F9E2AF]/30";
-      insideColor = "bg-yellow-500";
+      insideColor = "bg-[#df8e1d] dark:bg-[#F9E2AF]";
       break;
     default:
-      outsideColor = "bg-gray-500/20";
+      // Using the default values defined above
-      insideColor = "bg-gray-500";
+      outsideColor = "bg-gray-600/30 dark:bg-gray-400/30";
+      insideColor = "bg-gray-600 dark:bg-gray-400";
   }
 
   return (