gib/GibSend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update colors in dashboard

Browse Source
This commit is contained in:
KMKoushik
2025-05-07 21:59:44 +10:00
parent b394c78be2
commit 065e0518fb
2 changed files with 69 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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 (