From 065e0518fb77d6de0dc4a6fa99eaa630bfa0379e Mon Sep 17 00:00:00 2001 From: KMKoushik Date: Wed, 7 May 2025 21:59:44 +1000 Subject: [PATCH] update colors in dashboard --- .../(dashboard)/dashboard/dashboard-chart.tsx | 52 +++++++++++++++---- .../(dashboard)/emails/email-status-badge.tsx | 51 +++++++++--------- 2 files changed, 69 insertions(+), 34 deletions(-) diff --git a/apps/web/src/app/(dashboard)/dashboard/dashboard-chart.tsx b/apps/web/src/app/(dashboard)/dashboard/dashboard-chart.tsx index 336c288..9229367 100644 --- a/apps/web/src/app/(dashboard)/dashboard/dashboard-chart.tsx +++ b/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 (
@@ -145,7 +165,7 @@ export default function DashboardChart() {

{data.delivered ? (
-
+

Delivered

@@ -156,7 +176,7 @@ export default function DashboardChart() { ) : null} {data.bounced ? (
-
+

Bounced

@@ -165,7 +185,7 @@ export default function DashboardChart() { ) : null} {data.complained ? (
-
+

Complained

@@ -176,7 +196,7 @@ export default function DashboardChart() { ) : null} {data.opened ? (
-
+

Opened

@@ -185,7 +205,7 @@ export default function DashboardChart() { ) : null} {data.clicked ? (
-
+

Clicked

@@ -202,12 +222,24 @@ export default function DashboardChart() { barSize={8} dataKey="delivered" stackId="a" - fill="#10b981" + fill={currentColors.delivered} + /> + + + + - - - -
diff --git a/apps/web/src/app/(dashboard)/emails/email-status-badge.tsx b/apps/web/src/app/(dashboard)/emails/email-status-badge.tsx index 93adcfa..1e6628a 100644 --- a/apps/web/src/app/(dashboard)/emails/email-status-badge.tsx +++ b/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"; - break; - case "DELIVERY_DELAYED": - badgeColor = "bg-yellow-500/10 text-yellow-600 border-yellow-600/20"; + "bg-[#8839ef]/15 dark:bg-[#cba6f7]/15 text-[#8839ef] dark:text-[#cba6f7] border border-[#8839ef]/20 dark:border-[#cba6f7]/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 insideColor = "bg-gray-500/50"; + let outsideColor = "bg-gray-600/30 dark:bg-gray-400/30"; // Default + let insideColor = "bg-gray-600 dark:bg-gray-400"; // Default switch (status) { case "DELIVERED": - outsideColor = "bg-green-500/30"; - insideColor = "bg-green-500"; + outsideColor = "bg-[#40a02b]/30 dark:bg-[#a6e3a1]/30"; + insideColor = "bg-[#40a02b] dark:bg-[#a6e3a1]"; break; case "BOUNCED": case "FAILED": - outsideColor = "bg-red-500/30"; - insideColor = "bg-red-500"; + outsideColor = "bg-[#d20f39]/30 dark:bg-[#f38ba8]/30"; + insideColor = "bg-[#d20f39] dark:bg-[#f38ba8]"; break; case "CLICKED": - outsideColor = "bg-sky-500/30"; - insideColor = "bg-sky-500"; + outsideColor = "bg-[#04a5e5]/30 dark:bg-[#93c5fd]/30"; + insideColor = "bg-[#04a5e5] dark:bg-[#93c5fd]"; break; case "OPENED": - outsideColor = "bg-indigo-500/30"; - insideColor = "bg-indigo-500"; + outsideColor = "bg-[#8839ef]/30 dark:bg-[#cba6f7]/30"; + insideColor = "bg-[#8839ef] dark:bg-[#cba6f7]"; break; case "DELIVERY_DELAYED": - outsideColor = "bg-yellow-500/30"; - insideColor = "bg-yellow-500"; + outsideColor = "bg-[#df8e1d]/30 dark:bg-[#F9E2AF]/30"; + insideColor = "bg-[#df8e1d] dark:bg-[#F9E2AF]"; break; case "COMPLAINED": - outsideColor = "bg-yellow-500/30"; - insideColor = "bg-yellow-500"; + outsideColor = "bg-[#df8e1d]/30 dark:bg-[#F9E2AF]/30"; + insideColor = "bg-[#df8e1d] dark:bg-[#F9E2AF]"; break; default: - outsideColor = "bg-gray-500/20"; - insideColor = "bg-gray-500"; + // Using the default values defined above + outsideColor = "bg-gray-600/30 dark:bg-gray-400/30"; + insideColor = "bg-gray-600 dark:bg-gray-400"; } return (