fix colors in dashboard

apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx

@@ -146,35 +146,35 @@ export default function CampaignDetailsPage({
 }
 
 const CampaignStatusBadge: React.FC<{ status: string }> = ({ status }) => {
- let outsideColor = "bg-gray-600";
- let insideColor = "bg-gray-600/50";
+ let outsideColor = "bg-gray";
+ let insideColor = "bg-gray/50";
 
  switch (status) {
  case "delivered":
- outsideColor = "bg-emerald-500/30";
- insideColor = "bg-emerald-500";
+ outsideColor = "bg-green/30";
+ insideColor = "bg-green";
  break;
  case "bounced":
  case "unsubscribed":
- outsideColor = "bg-red-500/30";
- insideColor = "bg-red-500";
+ outsideColor = "bg-red/30";
+ insideColor = "bg-red";
  break;
  case "clicked":
- outsideColor = "bg-cyan-500/30";
- insideColor = "bg-cyan-500";
+ outsideColor = "bg-blue/30";
+ insideColor = "bg-blue";
  break;
  case "opened":
- outsideColor = "bg-indigo-500/30";
- insideColor = "bg-indigo-500";
+ outsideColor = "bg-purple/30";
+ insideColor = "bg-purple";
  break;
 
  case "complained":
- outsideColor = "bg-yellow-500/30";
- insideColor = "bg-yellow-500";
+ outsideColor = "bg-yellow/30";
+ insideColor = "bg-yellow";
  break;
  default:
- outsideColor = "bg-gray-600/40";
- insideColor = "bg-gray-600";
+ outsideColor = "bg-gray/40";
+ insideColor = "bg-gray";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx

@@ -103,10 +103,10 @@ export default function CampaignList() {
  <div
  className={`text-center w-[130px] rounded capitalize py-1 text-xs ${
  campaign.status === CampaignStatus.DRAFT
- ? "bg-gray-500/15 dark:bg-gray-400/15 text-gray-700 dark:text-gray-400/90 border border-gray-500/25 dark:border-gray-700/25"
+ ? "bg-gray/15 text-grayborder border-gray/25"
  : campaign.status === CampaignStatus.SENT
- ? "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-yellow-500/15 dark:bg-yellow-600/10 text-yellow-700 dark:text-yellow-600/90 border border-yellow-500/25 dark:border-yellow-700/25"
+ ? "bg-green/15 text-greenborder border-green/25"
+ : "bg-yellow/15 text-yellowborder border-yellow/25"
  }`}
  >
  {campaign.status.toLowerCase()}

apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx

@@ -62,7 +62,7 @@ export const DeleteCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx

@@ -35,7 +35,7 @@ export const DuplicateCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign duplicated`);
  },
- }
+ },
  );
  }
 
@@ -46,7 +46,7 @@ export const DuplicateCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Copy className="h-[18px] w-[18px] text-blue-600/80" />
+ <Copy className="h-[18px] w-[18px] text-blue/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx

@@ -152,21 +152,21 @@ export default function ContactList({
  </TableCell>
  <TableCell>
  {contact.subscribed ? (
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs 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">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-green/15 text-greenborder border-green/25">
  Subscribed
  </div>
  ) : (
  <Tooltip>
  <TooltipTrigger>
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red/10 text-redborder border-red/10">
  Unsubscribed
  </div>
  </TooltipTrigger>
  <TooltipContent>
  <p>
  {getUnsubscribeReason(
  contact.unsubscribeReason ??
- UnsubscribeReason.UNSUBSCRIBED
+ UnsubscribeReason.UNSUBSCRIBED,
  )}
  </p>
  </TooltipContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx

@@ -66,7 +66,7 @@ export const DeleteContact: React.FC<{
  onError: (e) => {
  toast.error(`Contact not deleted: ${e.message}`);
  },
- }
+ },
  );
  }
 
@@ -79,7 +79,7 @@ export const DeleteContact: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx

@@ -46,7 +46,7 @@ export const DeleteContactBook: React.FC<{
  });
 
  async function onContactBookDelete(
- values: z.infer<typeof contactBookSchema>
+ values: z.infer<typeof contactBookSchema>,
  ) {
  if (values.name !== contactBook.name) {
  contactBookForm.setError("name", {
@@ -65,7 +65,7 @@ export const DeleteContactBook: React.FC<{
  setOpen(false);
  toast.success(`Contact book deleted`);
  },
- }
+ },
  );
  }
 
@@ -78,7 +78,7 @@ export const DeleteContactBook: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent ">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80 hover:text-red-600/70" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80 hover:text-red/70" />
  </Button>
  </DialogTrigger>
  <DialogContent>

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

@@ -15,7 +15,6 @@ import { EmailStatus } from "@prisma/client";
 import { api } from "~/trpc/react";
 import Spinner from "@unsend/ui/src/spinner";
 import { useTheme } from "@unsend/ui";
-import { EMAIL_COLORS } from "~/lib/constants/colors";
 import { useColors } from "./hooks/useColors";
 
 interface EmailChartProps {
@@ -127,7 +126,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  </p>
  {data.delivered ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#40a02bcc] dark:bg-[#a6e3a1] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.delivered }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Delivered
  </p>
@@ -136,7 +138,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.bounced ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#d20f39cc] dark:bg-[#f38ba8] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.bounced }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Bounced
  </p>
@@ -145,7 +150,12 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.complained ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#df8e1dcc] dark:bg-[#F9E2AF] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{
+ backgroundColor: currentColors.complained,
+ }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Complained
  </p>
@@ -154,7 +164,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.opened ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#8839efcc] dark:bg-[#cba6f7] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.opened }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Opened
  </p>
@@ -163,7 +176,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.clicked ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#04a5e5cc] dark:bg-[#93c5fd] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.clicked }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Clicked
  </p>
@@ -236,16 +252,34 @@ const EmailChartItem: React.FC<DashboardItemCardProps> = ({
  count,
  percentage,
 }) => {
- const color = EMAIL_COLORS[status];
+ const currentColors = useColors();
+
+ const getColorForStatus = (status: EmailStatus | "total"): string => {
+ switch (status) {
+ case "DELIVERED":
+ return currentColors.delivered;
+ case "BOUNCED":
+ return currentColors.bounced;
+ case "COMPLAINED":
+ return currentColors.complained;
+ case "OPENED":
+ return currentColors.opened;
+ case "CLICKED":
+ return currentColors.clicked;
+ case "total":
+ default:
+ return "#6b7280"; // gray-500 for total and other statuses
+ }
+ };
 
  return (
  <div className="flex gap-3 items-stretch font-mono">
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
-
  <div>
  <div className=" flex items-center gap-2">
- <div className={`${color} w-2.5 h-2.5 rounded-[3px]`}></div>
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
+ <div
+ className="w-2.5 h-2.5 rounded-[3px]"
+ style={{ backgroundColor: getColorForStatus(status) }}
+ ></div>
 
  <div className="text-xs uppercase text-muted-foreground ">
  {status.toLowerCase()}

apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx

@@ -62,7 +62,7 @@ export default function AddApiKey() {
  setApiKey(data);
  apiKeyForm.reset();
  },
- }
+ },
  );
  }
 
@@ -132,7 +132,7 @@ export default function AddApiKey() {
  onClick={handleCopy}
  >
  {isCopied ? (
- <CheckIcon className="h-4 w-4 text-green-500" />
+ <CheckIcon className="h-4 w-4 text-green" />
  ) : (
  <ClipboardCopy className="h-4 w-4" />
  )}

apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx

@@ -62,7 +62,7 @@ export const DeleteApiKey: React.FC<{
  setOpen(false);
  toast.success(`API key deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteApiKey: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx

@@ -42,7 +42,7 @@ export default function DomainItemPage({
  {
  refetchInterval: (q) => (q?.state.data?.isVerifying ? 10000 : false),
  refetchIntervalInBackground: true,
- },
+ }
  );
 
  const verifyQuery = api.domain.startVerification.useMutation();
@@ -54,7 +54,7 @@ export default function DomainItemPage({
  onSettled: () => {
  domainQuery.refetch();
  },
- },
+ }
  );
  };
 
@@ -232,7 +232,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  const utils = api.useUtils();
 
  const [clickTracking, setClickTracking] = React.useState(
- domain.clickTracking,
+ domain.clickTracking
  );
  const [openTracking, setOpenTracking] = React.useState(domain.openTracking);
 
@@ -245,7 +245,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Click tracking updated");
  },
- },
+ }
  );
  }
 
@@ -258,7 +258,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Open tracking updated");
  },
- },
+ }
  );
  }
  return (
@@ -303,24 +303,20 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
 };
 
 const DnsVerificationStatus: React.FC<{ status: string }> = ({ status }) => {
- let badgeColor = "bg-gray-400/10 text-gray-500 border-gray-400/10"; // Default color
+ let badgeColor = "bg-gray/10 text-gray border-gray/10"; // Default color
  switch (status) {
  case DomainStatus.SUCCESS:
- 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";
+ badgeColor = "bg-green/15 text-green border border-green/25";
  break;
  case DomainStatus.FAILED:
- badgeColor =
- "bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10";
+ badgeColor = "bg-red/10 text-red border border-red/10";
  break;
  case DomainStatus.TEMPORARY_FAILURE:
  case DomainStatus.PENDING:
- badgeColor =
- "bg-yellow-500/20 dark:bg-yellow-500/10 text-yellow-600 border border-yellow-600/10";
+ badgeColor = "bg-yellow/20 text-yellow border border-yellow/10";
  break;
  default:
- badgeColor =
- "bg-gray-200/70 dark:bg-gray-400/10 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-400/20";
+ badgeColor = "bg-gray/10 text-gray border border-gray/20";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx

@@ -146,35 +146,35 @@ export default function CampaignDetailsPage({
 }
 
 const CampaignStatusBadge: React.FC<{ status: string }> = ({ status }) => {
- let outsideColor = "bg-gray-600";
- let insideColor = "bg-gray-600/50";
+ let outsideColor = "bg-gray";
+ let insideColor = "bg-gray/50";
 
  switch (status) {
  case "delivered":
- outsideColor = "bg-emerald-500/30";
- insideColor = "bg-emerald-500";
+ outsideColor = "bg-green/30";
+ insideColor = "bg-green";
  break;
  case "bounced":
  case "unsubscribed":
- outsideColor = "bg-red-500/30";
- insideColor = "bg-red-500";
+ outsideColor = "bg-red/30";
+ insideColor = "bg-red";
  break;
  case "clicked":
- outsideColor = "bg-cyan-500/30";
- insideColor = "bg-cyan-500";
+ outsideColor = "bg-blue/30";
+ insideColor = "bg-blue";
  break;
  case "opened":
- outsideColor = "bg-indigo-500/30";
- insideColor = "bg-indigo-500";
+ outsideColor = "bg-purple/30";
+ insideColor = "bg-purple";
  break;
 
  case "complained":
- outsideColor = "bg-yellow-500/30";
- insideColor = "bg-yellow-500";
+ outsideColor = "bg-yellow/30";
+ insideColor = "bg-yellow";
  break;
  default:
- outsideColor = "bg-gray-600/40";
- insideColor = "bg-gray-600";
+ outsideColor = "bg-gray/40";
+ insideColor = "bg-gray";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx

@@ -103,10 +103,10 @@ export default function CampaignList() {
  <div
  className={`text-center w-[130px] rounded capitalize py-1 text-xs ${
  campaign.status === CampaignStatus.DRAFT
- ? "bg-gray-500/15 dark:bg-gray-400/15 text-gray-700 dark:text-gray-400/90 border border-gray-500/25 dark:border-gray-700/25"
+ ? "bg-gray/15 text-grayborder border-gray/25"
  : campaign.status === CampaignStatus.SENT
- ? "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-yellow-500/15 dark:bg-yellow-600/10 text-yellow-700 dark:text-yellow-600/90 border border-yellow-500/25 dark:border-yellow-700/25"
+ ? "bg-green/15 text-greenborder border-green/25"
+ : "bg-yellow/15 text-yellowborder border-yellow/25"
  }`}
  >
  {campaign.status.toLowerCase()}

apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx

@@ -62,7 +62,7 @@ export const DeleteCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx

@@ -35,7 +35,7 @@ export const DuplicateCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign duplicated`);
  },
- }
+ },
  );
  }
 
@@ -46,7 +46,7 @@ export const DuplicateCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Copy className="h-[18px] w-[18px] text-blue-600/80" />
+ <Copy className="h-[18px] w-[18px] text-blue/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx

@@ -152,21 +152,21 @@ export default function ContactList({
  </TableCell>
  <TableCell>
  {contact.subscribed ? (
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs 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">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-green/15 text-greenborder border-green/25">
  Subscribed
  </div>
  ) : (
  <Tooltip>
  <TooltipTrigger>
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red/10 text-redborder border-red/10">
  Unsubscribed
  </div>
  </TooltipTrigger>
  <TooltipContent>
  <p>
  {getUnsubscribeReason(
  contact.unsubscribeReason ??
- UnsubscribeReason.UNSUBSCRIBED
+ UnsubscribeReason.UNSUBSCRIBED,
  )}
  </p>
  </TooltipContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx

@@ -66,7 +66,7 @@ export const DeleteContact: React.FC<{
  onError: (e) => {
  toast.error(`Contact not deleted: ${e.message}`);
  },
- }
+ },
  );
  }
 
@@ -79,7 +79,7 @@ export const DeleteContact: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx

@@ -46,7 +46,7 @@ export const DeleteContactBook: React.FC<{
  });
 
  async function onContactBookDelete(
- values: z.infer<typeof contactBookSchema>
+ values: z.infer<typeof contactBookSchema>,
  ) {
  if (values.name !== contactBook.name) {
  contactBookForm.setError("name", {
@@ -65,7 +65,7 @@ export const DeleteContactBook: React.FC<{
  setOpen(false);
  toast.success(`Contact book deleted`);
  },
- }
+ },
  );
  }
 
@@ -78,7 +78,7 @@ export const DeleteContactBook: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent ">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80 hover:text-red-600/70" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80 hover:text-red/70" />
  </Button>
  </DialogTrigger>
  <DialogContent>

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

@@ -15,7 +15,6 @@ import { EmailStatus } from "@prisma/client";
 import { api } from "~/trpc/react";
 import Spinner from "@unsend/ui/src/spinner";
 import { useTheme } from "@unsend/ui";
-import { EMAIL_COLORS } from "~/lib/constants/colors";
 import { useColors } from "./hooks/useColors";
 
 interface EmailChartProps {
@@ -127,7 +126,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  </p>
  {data.delivered ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#40a02bcc] dark:bg-[#a6e3a1] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.delivered }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Delivered
  </p>
@@ -136,7 +138,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.bounced ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#d20f39cc] dark:bg-[#f38ba8] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.bounced }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Bounced
  </p>
@@ -145,7 +150,12 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.complained ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#df8e1dcc] dark:bg-[#F9E2AF] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{
+ backgroundColor: currentColors.complained,
+ }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Complained
  </p>
@@ -154,7 +164,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.opened ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#8839efcc] dark:bg-[#cba6f7] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.opened }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Opened
  </p>
@@ -163,7 +176,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.clicked ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#04a5e5cc] dark:bg-[#93c5fd] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.clicked }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Clicked
  </p>
@@ -236,16 +252,34 @@ const EmailChartItem: React.FC<DashboardItemCardProps> = ({
  count,
  percentage,
 }) => {
- const color = EMAIL_COLORS[status];
+ const currentColors = useColors();
+
+ const getColorForStatus = (status: EmailStatus | "total"): string => {
+ switch (status) {
+ case "DELIVERED":
+ return currentColors.delivered;
+ case "BOUNCED":
+ return currentColors.bounced;
+ case "COMPLAINED":
+ return currentColors.complained;
+ case "OPENED":
+ return currentColors.opened;
+ case "CLICKED":
+ return currentColors.clicked;
+ case "total":
+ default:
+ return "#6b7280"; // gray-500 for total and other statuses
+ }
+ };
 
  return (
  <div className="flex gap-3 items-stretch font-mono">
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
-
  <div>
  <div className=" flex items-center gap-2">
- <div className={`${color} w-2.5 h-2.5 rounded-[3px]`}></div>
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
+ <div
+ className="w-2.5 h-2.5 rounded-[3px]"
+ style={{ backgroundColor: getColorForStatus(status) }}
+ ></div>
 
  <div className="text-xs uppercase text-muted-foreground ">
  {status.toLowerCase()}

apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx

@@ -62,7 +62,7 @@ export default function AddApiKey() {
  setApiKey(data);
  apiKeyForm.reset();
  },
- }
+ },
  );
  }
 
@@ -132,7 +132,7 @@ export default function AddApiKey() {
  onClick={handleCopy}
  >
  {isCopied ? (
- <CheckIcon className="h-4 w-4 text-green-500" />
+ <CheckIcon className="h-4 w-4 text-green" />
  ) : (
  <ClipboardCopy className="h-4 w-4" />
  )}

apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx

@@ -62,7 +62,7 @@ export const DeleteApiKey: React.FC<{
  setOpen(false);
  toast.success(`API key deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteApiKey: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx

@@ -42,7 +42,7 @@ export default function DomainItemPage({
  {
  refetchInterval: (q) => (q?.state.data?.isVerifying ? 10000 : false),
  refetchIntervalInBackground: true,
- },
+ }
  );
 
  const verifyQuery = api.domain.startVerification.useMutation();
@@ -54,7 +54,7 @@ export default function DomainItemPage({
  onSettled: () => {
  domainQuery.refetch();
  },
- },
+ }
  );
  };
 
@@ -232,7 +232,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  const utils = api.useUtils();
 
  const [clickTracking, setClickTracking] = React.useState(
- domain.clickTracking,
+ domain.clickTracking
  );
  const [openTracking, setOpenTracking] = React.useState(domain.openTracking);
 
@@ -245,7 +245,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Click tracking updated");
  },
- },
+ }
  );
  }
 
@@ -258,7 +258,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Open tracking updated");
  },
- },
+ }
  );
  }
  return (
@@ -303,24 +303,20 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
 };
 
 const DnsVerificationStatus: React.FC<{ status: string }> = ({ status }) => {
- let badgeColor = "bg-gray-400/10 text-gray-500 border-gray-400/10"; // Default color
+ let badgeColor = "bg-gray/10 text-gray border-gray/10"; // Default color
  switch (status) {
  case DomainStatus.SUCCESS:
- 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";
+ badgeColor = "bg-green/15 text-green border border-green/25";
  break;
  case DomainStatus.FAILED:
- badgeColor =
- "bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10";
+ badgeColor = "bg-red/10 text-red border border-red/10";
  break;
  case DomainStatus.TEMPORARY_FAILURE:
  case DomainStatus.PENDING:
- badgeColor =
- "bg-yellow-500/20 dark:bg-yellow-500/10 text-yellow-600 border border-yellow-600/10";
+ badgeColor = "bg-yellow/20 text-yellow border border-yellow/10";
  break;
  default:
- badgeColor =
- "bg-gray-200/70 dark:bg-gray-400/10 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-400/20";
+ badgeColor = "bg-gray/10 text-gray border border-gray/20";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx

@@ -146,35 +146,35 @@ export default function CampaignDetailsPage({
 }
 
 const CampaignStatusBadge: React.FC<{ status: string }> = ({ status }) => {
- let outsideColor = "bg-gray-600";
- let insideColor = "bg-gray-600/50";
+ let outsideColor = "bg-gray";
+ let insideColor = "bg-gray/50";
 
  switch (status) {
  case "delivered":
- outsideColor = "bg-emerald-500/30";
- insideColor = "bg-emerald-500";
+ outsideColor = "bg-green/30";
+ insideColor = "bg-green";
  break;
  case "bounced":
  case "unsubscribed":
- outsideColor = "bg-red-500/30";
- insideColor = "bg-red-500";
+ outsideColor = "bg-red/30";
+ insideColor = "bg-red";
  break;
  case "clicked":
- outsideColor = "bg-cyan-500/30";
- insideColor = "bg-cyan-500";
+ outsideColor = "bg-blue/30";
+ insideColor = "bg-blue";
  break;
  case "opened":
- outsideColor = "bg-indigo-500/30";
- insideColor = "bg-indigo-500";
+ outsideColor = "bg-purple/30";
+ insideColor = "bg-purple";
  break;
 
  case "complained":
- outsideColor = "bg-yellow-500/30";
- insideColor = "bg-yellow-500";
+ outsideColor = "bg-yellow/30";
+ insideColor = "bg-yellow";
  break;
  default:
- outsideColor = "bg-gray-600/40";
- insideColor = "bg-gray-600";
+ outsideColor = "bg-gray/40";
+ insideColor = "bg-gray";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx

@@ -103,10 +103,10 @@ export default function CampaignList() {
  <div
  className={`text-center w-[130px] rounded capitalize py-1 text-xs ${
  campaign.status === CampaignStatus.DRAFT
- ? "bg-gray-500/15 dark:bg-gray-400/15 text-gray-700 dark:text-gray-400/90 border border-gray-500/25 dark:border-gray-700/25"
+ ? "bg-gray/15 text-grayborder border-gray/25"
  : campaign.status === CampaignStatus.SENT
- ? "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-yellow-500/15 dark:bg-yellow-600/10 text-yellow-700 dark:text-yellow-600/90 border border-yellow-500/25 dark:border-yellow-700/25"
+ ? "bg-green/15 text-greenborder border-green/25"
+ : "bg-yellow/15 text-yellowborder border-yellow/25"
  }`}
  >
  {campaign.status.toLowerCase()}

apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx

@@ -62,7 +62,7 @@ export const DeleteCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx

@@ -35,7 +35,7 @@ export const DuplicateCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign duplicated`);
  },
- }
+ },
  );
  }
 
@@ -46,7 +46,7 @@ export const DuplicateCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Copy className="h-[18px] w-[18px] text-blue-600/80" />
+ <Copy className="h-[18px] w-[18px] text-blue/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx

@@ -152,21 +152,21 @@ export default function ContactList({
  </TableCell>
  <TableCell>
  {contact.subscribed ? (
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs 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">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-green/15 text-greenborder border-green/25">
  Subscribed
  </div>
  ) : (
  <Tooltip>
  <TooltipTrigger>
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red/10 text-redborder border-red/10">
  Unsubscribed
  </div>
  </TooltipTrigger>
  <TooltipContent>
  <p>
  {getUnsubscribeReason(
  contact.unsubscribeReason ??
- UnsubscribeReason.UNSUBSCRIBED
+ UnsubscribeReason.UNSUBSCRIBED,
  )}
  </p>
  </TooltipContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx

@@ -66,7 +66,7 @@ export const DeleteContact: React.FC<{
  onError: (e) => {
  toast.error(`Contact not deleted: ${e.message}`);
  },
- }
+ },
  );
  }
 
@@ -79,7 +79,7 @@ export const DeleteContact: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx

@@ -46,7 +46,7 @@ export const DeleteContactBook: React.FC<{
  });
 
  async function onContactBookDelete(
- values: z.infer<typeof contactBookSchema>
+ values: z.infer<typeof contactBookSchema>,
  ) {
  if (values.name !== contactBook.name) {
  contactBookForm.setError("name", {
@@ -65,7 +65,7 @@ export const DeleteContactBook: React.FC<{
  setOpen(false);
  toast.success(`Contact book deleted`);
  },
- }
+ },
  );
  }
 
@@ -78,7 +78,7 @@ export const DeleteContactBook: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent ">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80 hover:text-red-600/70" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80 hover:text-red/70" />
  </Button>
  </DialogTrigger>
  <DialogContent>

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

@@ -15,7 +15,6 @@ import { EmailStatus } from "@prisma/client";
 import { api } from "~/trpc/react";
 import Spinner from "@unsend/ui/src/spinner";
 import { useTheme } from "@unsend/ui";
-import { EMAIL_COLORS } from "~/lib/constants/colors";
 import { useColors } from "./hooks/useColors";
 
 interface EmailChartProps {
@@ -127,7 +126,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  </p>
  {data.delivered ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#40a02bcc] dark:bg-[#a6e3a1] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.delivered }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Delivered
  </p>
@@ -136,7 +138,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.bounced ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#d20f39cc] dark:bg-[#f38ba8] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.bounced }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Bounced
  </p>
@@ -145,7 +150,12 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.complained ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#df8e1dcc] dark:bg-[#F9E2AF] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{
+ backgroundColor: currentColors.complained,
+ }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Complained
  </p>
@@ -154,7 +164,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.opened ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#8839efcc] dark:bg-[#cba6f7] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.opened }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Opened
  </p>
@@ -163,7 +176,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.clicked ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#04a5e5cc] dark:bg-[#93c5fd] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.clicked }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Clicked
  </p>
@@ -236,16 +252,34 @@ const EmailChartItem: React.FC<DashboardItemCardProps> = ({
  count,
  percentage,
 }) => {
- const color = EMAIL_COLORS[status];
+ const currentColors = useColors();
+
+ const getColorForStatus = (status: EmailStatus | "total"): string => {
+ switch (status) {
+ case "DELIVERED":
+ return currentColors.delivered;
+ case "BOUNCED":
+ return currentColors.bounced;
+ case "COMPLAINED":
+ return currentColors.complained;
+ case "OPENED":
+ return currentColors.opened;
+ case "CLICKED":
+ return currentColors.clicked;
+ case "total":
+ default:
+ return "#6b7280"; // gray-500 for total and other statuses
+ }
+ };
 
  return (
  <div className="flex gap-3 items-stretch font-mono">
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
-
  <div>
  <div className=" flex items-center gap-2">
- <div className={`${color} w-2.5 h-2.5 rounded-[3px]`}></div>
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
+ <div
+ className="w-2.5 h-2.5 rounded-[3px]"
+ style={{ backgroundColor: getColorForStatus(status) }}
+ ></div>
 
  <div className="text-xs uppercase text-muted-foreground ">
  {status.toLowerCase()}

apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx

@@ -62,7 +62,7 @@ export default function AddApiKey() {
  setApiKey(data);
  apiKeyForm.reset();
  },
- }
+ },
  );
  }
 
@@ -132,7 +132,7 @@ export default function AddApiKey() {
  onClick={handleCopy}
  >
  {isCopied ? (
- <CheckIcon className="h-4 w-4 text-green-500" />
+ <CheckIcon className="h-4 w-4 text-green" />
  ) : (
  <ClipboardCopy className="h-4 w-4" />
  )}

apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx

@@ -62,7 +62,7 @@ export const DeleteApiKey: React.FC<{
  setOpen(false);
  toast.success(`API key deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteApiKey: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx

@@ -42,7 +42,7 @@ export default function DomainItemPage({
  {
  refetchInterval: (q) => (q?.state.data?.isVerifying ? 10000 : false),
  refetchIntervalInBackground: true,
- },
+ }
  );
 
  const verifyQuery = api.domain.startVerification.useMutation();
@@ -54,7 +54,7 @@ export default function DomainItemPage({
  onSettled: () => {
  domainQuery.refetch();
  },
- },
+ }
  );
  };
 
@@ -232,7 +232,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  const utils = api.useUtils();
 
  const [clickTracking, setClickTracking] = React.useState(
- domain.clickTracking,
+ domain.clickTracking
  );
  const [openTracking, setOpenTracking] = React.useState(domain.openTracking);
 
@@ -245,7 +245,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Click tracking updated");
  },
- },
+ }
  );
  }
 
@@ -258,7 +258,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Open tracking updated");
  },
- },
+ }
  );
  }
  return (
@@ -303,24 +303,20 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
 };
 
 const DnsVerificationStatus: React.FC<{ status: string }> = ({ status }) => {
- let badgeColor = "bg-gray-400/10 text-gray-500 border-gray-400/10"; // Default color
+ let badgeColor = "bg-gray/10 text-gray border-gray/10"; // Default color
  switch (status) {
  case DomainStatus.SUCCESS:
- 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";
+ badgeColor = "bg-green/15 text-green border border-green/25";
  break;
  case DomainStatus.FAILED:
- badgeColor =
- "bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10";
+ badgeColor = "bg-red/10 text-red border border-red/10";
  break;
  case DomainStatus.TEMPORARY_FAILURE:
  case DomainStatus.PENDING:
- badgeColor =
- "bg-yellow-500/20 dark:bg-yellow-500/10 text-yellow-600 border border-yellow-600/10";
+ badgeColor = "bg-yellow/20 text-yellow border border-yellow/10";
  break;
  default:
- badgeColor =
- "bg-gray-200/70 dark:bg-gray-400/10 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-400/20";
+ badgeColor = "bg-gray/10 text-gray border border-gray/20";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx

@@ -146,35 +146,35 @@ export default function CampaignDetailsPage({
 }
 
 const CampaignStatusBadge: React.FC<{ status: string }> = ({ status }) => {
- let outsideColor = "bg-gray-600";
- let insideColor = "bg-gray-600/50";
+ let outsideColor = "bg-gray";
+ let insideColor = "bg-gray/50";
 
  switch (status) {
  case "delivered":
- outsideColor = "bg-emerald-500/30";
- insideColor = "bg-emerald-500";
+ outsideColor = "bg-green/30";
+ insideColor = "bg-green";
  break;
  case "bounced":
  case "unsubscribed":
- outsideColor = "bg-red-500/30";
- insideColor = "bg-red-500";
+ outsideColor = "bg-red/30";
+ insideColor = "bg-red";
  break;
  case "clicked":
- outsideColor = "bg-cyan-500/30";
- insideColor = "bg-cyan-500";
+ outsideColor = "bg-blue/30";
+ insideColor = "bg-blue";
  break;
  case "opened":
- outsideColor = "bg-indigo-500/30";
- insideColor = "bg-indigo-500";
+ outsideColor = "bg-purple/30";
+ insideColor = "bg-purple";
  break;
 
  case "complained":
- outsideColor = "bg-yellow-500/30";
- insideColor = "bg-yellow-500";
+ outsideColor = "bg-yellow/30";
+ insideColor = "bg-yellow";
  break;
  default:
- outsideColor = "bg-gray-600/40";
- insideColor = "bg-gray-600";
+ outsideColor = "bg-gray/40";
+ insideColor = "bg-gray";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx

@@ -103,10 +103,10 @@ export default function CampaignList() {
  <div
  className={`text-center w-[130px] rounded capitalize py-1 text-xs ${
  campaign.status === CampaignStatus.DRAFT
- ? "bg-gray-500/15 dark:bg-gray-400/15 text-gray-700 dark:text-gray-400/90 border border-gray-500/25 dark:border-gray-700/25"
+ ? "bg-gray/15 text-grayborder border-gray/25"
  : campaign.status === CampaignStatus.SENT
- ? "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-yellow-500/15 dark:bg-yellow-600/10 text-yellow-700 dark:text-yellow-600/90 border border-yellow-500/25 dark:border-yellow-700/25"
+ ? "bg-green/15 text-greenborder border-green/25"
+ : "bg-yellow/15 text-yellowborder border-yellow/25"
  }`}
  >
  {campaign.status.toLowerCase()}

apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx

@@ -62,7 +62,7 @@ export const DeleteCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx

@@ -35,7 +35,7 @@ export const DuplicateCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign duplicated`);
  },
- }
+ },
  );
  }
 
@@ -46,7 +46,7 @@ export const DuplicateCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Copy className="h-[18px] w-[18px] text-blue-600/80" />
+ <Copy className="h-[18px] w-[18px] text-blue/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx

@@ -152,21 +152,21 @@ export default function ContactList({
  </TableCell>
  <TableCell>
  {contact.subscribed ? (
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs 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">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-green/15 text-greenborder border-green/25">
  Subscribed
  </div>
  ) : (
  <Tooltip>
  <TooltipTrigger>
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red/10 text-redborder border-red/10">
  Unsubscribed
  </div>
  </TooltipTrigger>
  <TooltipContent>
  <p>
  {getUnsubscribeReason(
  contact.unsubscribeReason ??
- UnsubscribeReason.UNSUBSCRIBED
+ UnsubscribeReason.UNSUBSCRIBED,
  )}
  </p>
  </TooltipContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx

@@ -66,7 +66,7 @@ export const DeleteContact: React.FC<{
  onError: (e) => {
  toast.error(`Contact not deleted: ${e.message}`);
  },
- }
+ },
  );
  }
 
@@ -79,7 +79,7 @@ export const DeleteContact: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx

@@ -46,7 +46,7 @@ export const DeleteContactBook: React.FC<{
  });
 
  async function onContactBookDelete(
- values: z.infer<typeof contactBookSchema>
+ values: z.infer<typeof contactBookSchema>,
  ) {
  if (values.name !== contactBook.name) {
  contactBookForm.setError("name", {
@@ -65,7 +65,7 @@ export const DeleteContactBook: React.FC<{
  setOpen(false);
  toast.success(`Contact book deleted`);
  },
- }
+ },
  );
  }
 
@@ -78,7 +78,7 @@ export const DeleteContactBook: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent ">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80 hover:text-red-600/70" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80 hover:text-red/70" />
  </Button>
  </DialogTrigger>
  <DialogContent>

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

@@ -15,7 +15,6 @@ import { EmailStatus } from "@prisma/client";
 import { api } from "~/trpc/react";
 import Spinner from "@unsend/ui/src/spinner";
 import { useTheme } from "@unsend/ui";
-import { EMAIL_COLORS } from "~/lib/constants/colors";
 import { useColors } from "./hooks/useColors";
 
 interface EmailChartProps {
@@ -127,7 +126,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  </p>
  {data.delivered ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#40a02bcc] dark:bg-[#a6e3a1] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.delivered }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Delivered
  </p>
@@ -136,7 +138,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.bounced ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#d20f39cc] dark:bg-[#f38ba8] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.bounced }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Bounced
  </p>
@@ -145,7 +150,12 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.complained ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#df8e1dcc] dark:bg-[#F9E2AF] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{
+ backgroundColor: currentColors.complained,
+ }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Complained
  </p>
@@ -154,7 +164,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.opened ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#8839efcc] dark:bg-[#cba6f7] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.opened }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Opened
  </p>
@@ -163,7 +176,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.clicked ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#04a5e5cc] dark:bg-[#93c5fd] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.clicked }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Clicked
  </p>
@@ -236,16 +252,34 @@ const EmailChartItem: React.FC<DashboardItemCardProps> = ({
  count,
  percentage,
 }) => {
- const color = EMAIL_COLORS[status];
+ const currentColors = useColors();
+
+ const getColorForStatus = (status: EmailStatus | "total"): string => {
+ switch (status) {
+ case "DELIVERED":
+ return currentColors.delivered;
+ case "BOUNCED":
+ return currentColors.bounced;
+ case "COMPLAINED":
+ return currentColors.complained;
+ case "OPENED":
+ return currentColors.opened;
+ case "CLICKED":
+ return currentColors.clicked;
+ case "total":
+ default:
+ return "#6b7280"; // gray-500 for total and other statuses
+ }
+ };
 
  return (
  <div className="flex gap-3 items-stretch font-mono">
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
-
  <div>
  <div className=" flex items-center gap-2">
- <div className={`${color} w-2.5 h-2.5 rounded-[3px]`}></div>
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
+ <div
+ className="w-2.5 h-2.5 rounded-[3px]"
+ style={{ backgroundColor: getColorForStatus(status) }}
+ ></div>
 
  <div className="text-xs uppercase text-muted-foreground ">
  {status.toLowerCase()}

apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx

@@ -62,7 +62,7 @@ export default function AddApiKey() {
  setApiKey(data);
  apiKeyForm.reset();
  },
- }
+ },
  );
  }
 
@@ -132,7 +132,7 @@ export default function AddApiKey() {
  onClick={handleCopy}
  >
  {isCopied ? (
- <CheckIcon className="h-4 w-4 text-green-500" />
+ <CheckIcon className="h-4 w-4 text-green" />
  ) : (
  <ClipboardCopy className="h-4 w-4" />
  )}

apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx

@@ -62,7 +62,7 @@ export const DeleteApiKey: React.FC<{
  setOpen(false);
  toast.success(`API key deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteApiKey: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx

@@ -42,7 +42,7 @@ export default function DomainItemPage({
  {
  refetchInterval: (q) => (q?.state.data?.isVerifying ? 10000 : false),
  refetchIntervalInBackground: true,
- },
+ }
  );
 
  const verifyQuery = api.domain.startVerification.useMutation();
@@ -54,7 +54,7 @@ export default function DomainItemPage({
  onSettled: () => {
  domainQuery.refetch();
  },
- },
+ }
  );
  };
 
@@ -232,7 +232,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  const utils = api.useUtils();
 
  const [clickTracking, setClickTracking] = React.useState(
- domain.clickTracking,
+ domain.clickTracking
  );
  const [openTracking, setOpenTracking] = React.useState(domain.openTracking);
 
@@ -245,7 +245,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Click tracking updated");
  },
- },
+ }
  );
  }
 
@@ -258,7 +258,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Open tracking updated");
  },
- },
+ }
  );
  }
  return (
@@ -303,24 +303,20 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
 };
 
 const DnsVerificationStatus: React.FC<{ status: string }> = ({ status }) => {
- let badgeColor = "bg-gray-400/10 text-gray-500 border-gray-400/10"; // Default color
+ let badgeColor = "bg-gray/10 text-gray border-gray/10"; // Default color
  switch (status) {
  case DomainStatus.SUCCESS:
- 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";
+ badgeColor = "bg-green/15 text-green border border-green/25";
  break;
  case DomainStatus.FAILED:
- badgeColor =
- "bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10";
+ badgeColor = "bg-red/10 text-red border border-red/10";
  break;
  case DomainStatus.TEMPORARY_FAILURE:
  case DomainStatus.PENDING:
- badgeColor =
- "bg-yellow-500/20 dark:bg-yellow-500/10 text-yellow-600 border border-yellow-600/10";
+ badgeColor = "bg-yellow/20 text-yellow border border-yellow/10";
  break;
  default:
- badgeColor =
- "bg-gray-200/70 dark:bg-gray-400/10 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-400/20";
+ badgeColor = "bg-gray/10 text-gray border border-gray/20";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx

@@ -146,35 +146,35 @@ export default function CampaignDetailsPage({
 }
 
 const CampaignStatusBadge: React.FC<{ status: string }> = ({ status }) => {
- let outsideColor = "bg-gray-600";
- let insideColor = "bg-gray-600/50";
+ let outsideColor = "bg-gray";
+ let insideColor = "bg-gray/50";
 
  switch (status) {
  case "delivered":
- outsideColor = "bg-emerald-500/30";
- insideColor = "bg-emerald-500";
+ outsideColor = "bg-green/30";
+ insideColor = "bg-green";
  break;
  case "bounced":
  case "unsubscribed":
- outsideColor = "bg-red-500/30";
- insideColor = "bg-red-500";
+ outsideColor = "bg-red/30";
+ insideColor = "bg-red";
  break;
  case "clicked":
- outsideColor = "bg-cyan-500/30";
- insideColor = "bg-cyan-500";
+ outsideColor = "bg-blue/30";
+ insideColor = "bg-blue";
  break;
  case "opened":
- outsideColor = "bg-indigo-500/30";
- insideColor = "bg-indigo-500";
+ outsideColor = "bg-purple/30";
+ insideColor = "bg-purple";
  break;
 
  case "complained":
- outsideColor = "bg-yellow-500/30";
- insideColor = "bg-yellow-500";
+ outsideColor = "bg-yellow/30";
+ insideColor = "bg-yellow";
  break;
  default:
- outsideColor = "bg-gray-600/40";
- insideColor = "bg-gray-600";
+ outsideColor = "bg-gray/40";
+ insideColor = "bg-gray";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx

@@ -103,10 +103,10 @@ export default function CampaignList() {
  <div
  className={`text-center w-[130px] rounded capitalize py-1 text-xs ${
  campaign.status === CampaignStatus.DRAFT
- ? "bg-gray-500/15 dark:bg-gray-400/15 text-gray-700 dark:text-gray-400/90 border border-gray-500/25 dark:border-gray-700/25"
+ ? "bg-gray/15 text-grayborder border-gray/25"
  : campaign.status === CampaignStatus.SENT
- ? "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-yellow-500/15 dark:bg-yellow-600/10 text-yellow-700 dark:text-yellow-600/90 border border-yellow-500/25 dark:border-yellow-700/25"
+ ? "bg-green/15 text-greenborder border-green/25"
+ : "bg-yellow/15 text-yellowborder border-yellow/25"
  }`}
  >
  {campaign.status.toLowerCase()}

apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx

@@ -62,7 +62,7 @@ export const DeleteCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx

@@ -35,7 +35,7 @@ export const DuplicateCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign duplicated`);
  },
- }
+ },
  );
  }
 
@@ -46,7 +46,7 @@ export const DuplicateCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Copy className="h-[18px] w-[18px] text-blue-600/80" />
+ <Copy className="h-[18px] w-[18px] text-blue/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx

@@ -152,21 +152,21 @@ export default function ContactList({
  </TableCell>
  <TableCell>
  {contact.subscribed ? (
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs 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">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-green/15 text-greenborder border-green/25">
  Subscribed
  </div>
  ) : (
  <Tooltip>
  <TooltipTrigger>
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red/10 text-redborder border-red/10">
  Unsubscribed
  </div>
  </TooltipTrigger>
  <TooltipContent>
  <p>
  {getUnsubscribeReason(
  contact.unsubscribeReason ??
- UnsubscribeReason.UNSUBSCRIBED
+ UnsubscribeReason.UNSUBSCRIBED,
  )}
  </p>
  </TooltipContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx

@@ -66,7 +66,7 @@ export const DeleteContact: React.FC<{
  onError: (e) => {
  toast.error(`Contact not deleted: ${e.message}`);
  },
- }
+ },
  );
  }
 
@@ -79,7 +79,7 @@ export const DeleteContact: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx

@@ -46,7 +46,7 @@ export const DeleteContactBook: React.FC<{
  });
 
  async function onContactBookDelete(
- values: z.infer<typeof contactBookSchema>
+ values: z.infer<typeof contactBookSchema>,
  ) {
  if (values.name !== contactBook.name) {
  contactBookForm.setError("name", {
@@ -65,7 +65,7 @@ export const DeleteContactBook: React.FC<{
  setOpen(false);
  toast.success(`Contact book deleted`);
  },
- }
+ },
  );
  }
 
@@ -78,7 +78,7 @@ export const DeleteContactBook: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent ">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80 hover:text-red-600/70" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80 hover:text-red/70" />
  </Button>
  </DialogTrigger>
  <DialogContent>

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

@@ -15,7 +15,6 @@ import { EmailStatus } from "@prisma/client";
 import { api } from "~/trpc/react";
 import Spinner from "@unsend/ui/src/spinner";
 import { useTheme } from "@unsend/ui";
-import { EMAIL_COLORS } from "~/lib/constants/colors";
 import { useColors } from "./hooks/useColors";
 
 interface EmailChartProps {
@@ -127,7 +126,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  </p>
  {data.delivered ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#40a02bcc] dark:bg-[#a6e3a1] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.delivered }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Delivered
  </p>
@@ -136,7 +138,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.bounced ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#d20f39cc] dark:bg-[#f38ba8] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.bounced }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Bounced
  </p>
@@ -145,7 +150,12 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.complained ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#df8e1dcc] dark:bg-[#F9E2AF] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{
+ backgroundColor: currentColors.complained,
+ }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Complained
  </p>
@@ -154,7 +164,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.opened ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#8839efcc] dark:bg-[#cba6f7] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.opened }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Opened
  </p>
@@ -163,7 +176,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.clicked ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#04a5e5cc] dark:bg-[#93c5fd] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.clicked }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Clicked
  </p>
@@ -236,16 +252,34 @@ const EmailChartItem: React.FC<DashboardItemCardProps> = ({
  count,
  percentage,
 }) => {
- const color = EMAIL_COLORS[status];
+ const currentColors = useColors();
+
+ const getColorForStatus = (status: EmailStatus | "total"): string => {
+ switch (status) {
+ case "DELIVERED":
+ return currentColors.delivered;
+ case "BOUNCED":
+ return currentColors.bounced;
+ case "COMPLAINED":
+ return currentColors.complained;
+ case "OPENED":
+ return currentColors.opened;
+ case "CLICKED":
+ return currentColors.clicked;
+ case "total":
+ default:
+ return "#6b7280"; // gray-500 for total and other statuses
+ }
+ };
 
  return (
  <div className="flex gap-3 items-stretch font-mono">
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
-
  <div>
  <div className=" flex items-center gap-2">
- <div className={`${color} w-2.5 h-2.5 rounded-[3px]`}></div>
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
+ <div
+ className="w-2.5 h-2.5 rounded-[3px]"
+ style={{ backgroundColor: getColorForStatus(status) }}
+ ></div>
 
  <div className="text-xs uppercase text-muted-foreground ">
  {status.toLowerCase()}

apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx

@@ -62,7 +62,7 @@ export default function AddApiKey() {
  setApiKey(data);
  apiKeyForm.reset();
  },
- }
+ },
  );
  }
 
@@ -132,7 +132,7 @@ export default function AddApiKey() {
  onClick={handleCopy}
  >
  {isCopied ? (
- <CheckIcon className="h-4 w-4 text-green-500" />
+ <CheckIcon className="h-4 w-4 text-green" />
  ) : (
  <ClipboardCopy className="h-4 w-4" />
  )}

apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx

@@ -62,7 +62,7 @@ export const DeleteApiKey: React.FC<{
  setOpen(false);
  toast.success(`API key deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteApiKey: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx

@@ -42,7 +42,7 @@ export default function DomainItemPage({
  {
  refetchInterval: (q) => (q?.state.data?.isVerifying ? 10000 : false),
  refetchIntervalInBackground: true,
- },
+ }
  );
 
  const verifyQuery = api.domain.startVerification.useMutation();
@@ -54,7 +54,7 @@ export default function DomainItemPage({
  onSettled: () => {
  domainQuery.refetch();
  },
- },
+ }
  );
  };
 
@@ -232,7 +232,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  const utils = api.useUtils();
 
  const [clickTracking, setClickTracking] = React.useState(
- domain.clickTracking,
+ domain.clickTracking
  );
  const [openTracking, setOpenTracking] = React.useState(domain.openTracking);
 
@@ -245,7 +245,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Click tracking updated");
  },
- },
+ }
  );
  }
 
@@ -258,7 +258,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Open tracking updated");
  },
- },
+ }
  );
  }
  return (
@@ -303,24 +303,20 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
 };
 
 const DnsVerificationStatus: React.FC<{ status: string }> = ({ status }) => {
- let badgeColor = "bg-gray-400/10 text-gray-500 border-gray-400/10"; // Default color
+ let badgeColor = "bg-gray/10 text-gray border-gray/10"; // Default color
  switch (status) {
  case DomainStatus.SUCCESS:
- 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";
+ badgeColor = "bg-green/15 text-green border border-green/25";
  break;
  case DomainStatus.FAILED:
- badgeColor =
- "bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10";
+ badgeColor = "bg-red/10 text-red border border-red/10";
  break;
  case DomainStatus.TEMPORARY_FAILURE:
  case DomainStatus.PENDING:
- badgeColor =
- "bg-yellow-500/20 dark:bg-yellow-500/10 text-yellow-600 border border-yellow-600/10";
+ badgeColor = "bg-yellow/20 text-yellow border border-yellow/10";
  break;
  default:
- badgeColor =
- "bg-gray-200/70 dark:bg-gray-400/10 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-400/20";
+ badgeColor = "bg-gray/10 text-gray border border-gray/20";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx

@@ -146,35 +146,35 @@ export default function CampaignDetailsPage({
 }
 
 const CampaignStatusBadge: React.FC<{ status: string }> = ({ status }) => {
- let outsideColor = "bg-gray-600";
- let insideColor = "bg-gray-600/50";
+ let outsideColor = "bg-gray";
+ let insideColor = "bg-gray/50";
 
  switch (status) {
  case "delivered":
- outsideColor = "bg-emerald-500/30";
- insideColor = "bg-emerald-500";
+ outsideColor = "bg-green/30";
+ insideColor = "bg-green";
  break;
  case "bounced":
  case "unsubscribed":
- outsideColor = "bg-red-500/30";
- insideColor = "bg-red-500";
+ outsideColor = "bg-red/30";
+ insideColor = "bg-red";
  break;
  case "clicked":
- outsideColor = "bg-cyan-500/30";
- insideColor = "bg-cyan-500";
+ outsideColor = "bg-blue/30";
+ insideColor = "bg-blue";
  break;
  case "opened":
- outsideColor = "bg-indigo-500/30";
- insideColor = "bg-indigo-500";
+ outsideColor = "bg-purple/30";
+ insideColor = "bg-purple";
  break;
 
  case "complained":
- outsideColor = "bg-yellow-500/30";
- insideColor = "bg-yellow-500";
+ outsideColor = "bg-yellow/30";
+ insideColor = "bg-yellow";
  break;
  default:
- outsideColor = "bg-gray-600/40";
- insideColor = "bg-gray-600";
+ outsideColor = "bg-gray/40";
+ insideColor = "bg-gray";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx

@@ -103,10 +103,10 @@ export default function CampaignList() {
  <div
  className={`text-center w-[130px] rounded capitalize py-1 text-xs ${
  campaign.status === CampaignStatus.DRAFT
- ? "bg-gray-500/15 dark:bg-gray-400/15 text-gray-700 dark:text-gray-400/90 border border-gray-500/25 dark:border-gray-700/25"
+ ? "bg-gray/15 text-grayborder border-gray/25"
  : campaign.status === CampaignStatus.SENT
- ? "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-yellow-500/15 dark:bg-yellow-600/10 text-yellow-700 dark:text-yellow-600/90 border border-yellow-500/25 dark:border-yellow-700/25"
+ ? "bg-green/15 text-greenborder border-green/25"
+ : "bg-yellow/15 text-yellowborder border-yellow/25"
  }`}
  >
  {campaign.status.toLowerCase()}

apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx

@@ -62,7 +62,7 @@ export const DeleteCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx

@@ -35,7 +35,7 @@ export const DuplicateCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign duplicated`);
  },
- }
+ },
  );
  }
 
@@ -46,7 +46,7 @@ export const DuplicateCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Copy className="h-[18px] w-[18px] text-blue-600/80" />
+ <Copy className="h-[18px] w-[18px] text-blue/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx

@@ -152,21 +152,21 @@ export default function ContactList({
  </TableCell>
  <TableCell>
  {contact.subscribed ? (
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs 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">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-green/15 text-greenborder border-green/25">
  Subscribed
  </div>
  ) : (
  <Tooltip>
  <TooltipTrigger>
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red/10 text-redborder border-red/10">
  Unsubscribed
  </div>
  </TooltipTrigger>
  <TooltipContent>
  <p>
  {getUnsubscribeReason(
  contact.unsubscribeReason ??
- UnsubscribeReason.UNSUBSCRIBED
+ UnsubscribeReason.UNSUBSCRIBED,
  )}
  </p>
  </TooltipContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx

@@ -66,7 +66,7 @@ export const DeleteContact: React.FC<{
  onError: (e) => {
  toast.error(`Contact not deleted: ${e.message}`);
  },
- }
+ },
  );
  }
 
@@ -79,7 +79,7 @@ export const DeleteContact: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx

@@ -46,7 +46,7 @@ export const DeleteContactBook: React.FC<{
  });
 
  async function onContactBookDelete(
- values: z.infer<typeof contactBookSchema>
+ values: z.infer<typeof contactBookSchema>,
  ) {
  if (values.name !== contactBook.name) {
  contactBookForm.setError("name", {
@@ -65,7 +65,7 @@ export const DeleteContactBook: React.FC<{
  setOpen(false);
  toast.success(`Contact book deleted`);
  },
- }
+ },
  );
  }
 
@@ -78,7 +78,7 @@ export const DeleteContactBook: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent ">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80 hover:text-red-600/70" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80 hover:text-red/70" />
  </Button>
  </DialogTrigger>
  <DialogContent>

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

@@ -15,7 +15,6 @@ import { EmailStatus } from "@prisma/client";
 import { api } from "~/trpc/react";
 import Spinner from "@unsend/ui/src/spinner";
 import { useTheme } from "@unsend/ui";
-import { EMAIL_COLORS } from "~/lib/constants/colors";
 import { useColors } from "./hooks/useColors";
 
 interface EmailChartProps {
@@ -127,7 +126,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  </p>
  {data.delivered ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#40a02bcc] dark:bg-[#a6e3a1] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.delivered }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Delivered
  </p>
@@ -136,7 +138,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.bounced ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#d20f39cc] dark:bg-[#f38ba8] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.bounced }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Bounced
  </p>
@@ -145,7 +150,12 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.complained ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#df8e1dcc] dark:bg-[#F9E2AF] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{
+ backgroundColor: currentColors.complained,
+ }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Complained
  </p>
@@ -154,7 +164,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.opened ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#8839efcc] dark:bg-[#cba6f7] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.opened }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Opened
  </p>
@@ -163,7 +176,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.clicked ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#04a5e5cc] dark:bg-[#93c5fd] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.clicked }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Clicked
  </p>
@@ -236,16 +252,34 @@ const EmailChartItem: React.FC<DashboardItemCardProps> = ({
  count,
  percentage,
 }) => {
- const color = EMAIL_COLORS[status];
+ const currentColors = useColors();
+
+ const getColorForStatus = (status: EmailStatus | "total"): string => {
+ switch (status) {
+ case "DELIVERED":
+ return currentColors.delivered;
+ case "BOUNCED":
+ return currentColors.bounced;
+ case "COMPLAINED":
+ return currentColors.complained;
+ case "OPENED":
+ return currentColors.opened;
+ case "CLICKED":
+ return currentColors.clicked;
+ case "total":
+ default:
+ return "#6b7280"; // gray-500 for total and other statuses
+ }
+ };
 
  return (
  <div className="flex gap-3 items-stretch font-mono">
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
-
  <div>
  <div className=" flex items-center gap-2">
- <div className={`${color} w-2.5 h-2.5 rounded-[3px]`}></div>
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
+ <div
+ className="w-2.5 h-2.5 rounded-[3px]"
+ style={{ backgroundColor: getColorForStatus(status) }}
+ ></div>
 
  <div className="text-xs uppercase text-muted-foreground ">
  {status.toLowerCase()}

apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx

@@ -62,7 +62,7 @@ export default function AddApiKey() {
  setApiKey(data);
  apiKeyForm.reset();
  },
- }
+ },
  );
  }
 
@@ -132,7 +132,7 @@ export default function AddApiKey() {
  onClick={handleCopy}
  >
  {isCopied ? (
- <CheckIcon className="h-4 w-4 text-green-500" />
+ <CheckIcon className="h-4 w-4 text-green" />
  ) : (
  <ClipboardCopy className="h-4 w-4" />
  )}

apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx

@@ -62,7 +62,7 @@ export const DeleteApiKey: React.FC<{
  setOpen(false);
  toast.success(`API key deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteApiKey: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx

@@ -42,7 +42,7 @@ export default function DomainItemPage({
  {
  refetchInterval: (q) => (q?.state.data?.isVerifying ? 10000 : false),
  refetchIntervalInBackground: true,
- },
+ }
  );
 
  const verifyQuery = api.domain.startVerification.useMutation();
@@ -54,7 +54,7 @@ export default function DomainItemPage({
  onSettled: () => {
  domainQuery.refetch();
  },
- },
+ }
  );
  };
 
@@ -232,7 +232,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  const utils = api.useUtils();
 
  const [clickTracking, setClickTracking] = React.useState(
- domain.clickTracking,
+ domain.clickTracking
  );
  const [openTracking, setOpenTracking] = React.useState(domain.openTracking);
 
@@ -245,7 +245,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Click tracking updated");
  },
- },
+ }
  );
  }
 
@@ -258,7 +258,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Open tracking updated");
  },
- },
+ }
  );
  }
  return (
@@ -303,24 +303,20 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
 };
 
 const DnsVerificationStatus: React.FC<{ status: string }> = ({ status }) => {
- let badgeColor = "bg-gray-400/10 text-gray-500 border-gray-400/10"; // Default color
+ let badgeColor = "bg-gray/10 text-gray border-gray/10"; // Default color
  switch (status) {
  case DomainStatus.SUCCESS:
- 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";
+ badgeColor = "bg-green/15 text-green border border-green/25";
  break;
  case DomainStatus.FAILED:
- badgeColor =
- "bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10";
+ badgeColor = "bg-red/10 text-red border border-red/10";
  break;
  case DomainStatus.TEMPORARY_FAILURE:
  case DomainStatus.PENDING:
- badgeColor =
- "bg-yellow-500/20 dark:bg-yellow-500/10 text-yellow-600 border border-yellow-600/10";
+ badgeColor = "bg-yellow/20 text-yellow border border-yellow/10";
  break;
  default:
- badgeColor =
- "bg-gray-200/70 dark:bg-gray-400/10 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-400/20";
+ badgeColor = "bg-gray/10 text-gray border border-gray/20";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx

@@ -146,35 +146,35 @@ export default function CampaignDetailsPage({
 }
 
 const CampaignStatusBadge: React.FC<{ status: string }> = ({ status }) => {
- let outsideColor = "bg-gray-600";
- let insideColor = "bg-gray-600/50";
+ let outsideColor = "bg-gray";
+ let insideColor = "bg-gray/50";
 
  switch (status) {
  case "delivered":
- outsideColor = "bg-emerald-500/30";
- insideColor = "bg-emerald-500";
+ outsideColor = "bg-green/30";
+ insideColor = "bg-green";
  break;
  case "bounced":
  case "unsubscribed":
- outsideColor = "bg-red-500/30";
- insideColor = "bg-red-500";
+ outsideColor = "bg-red/30";
+ insideColor = "bg-red";
  break;
  case "clicked":
- outsideColor = "bg-cyan-500/30";
- insideColor = "bg-cyan-500";
+ outsideColor = "bg-blue/30";
+ insideColor = "bg-blue";
  break;
  case "opened":
- outsideColor = "bg-indigo-500/30";
- insideColor = "bg-indigo-500";
+ outsideColor = "bg-purple/30";
+ insideColor = "bg-purple";
  break;
 
  case "complained":
- outsideColor = "bg-yellow-500/30";
- insideColor = "bg-yellow-500";
+ outsideColor = "bg-yellow/30";
+ insideColor = "bg-yellow";
  break;
  default:
- outsideColor = "bg-gray-600/40";
- insideColor = "bg-gray-600";
+ outsideColor = "bg-gray/40";
+ insideColor = "bg-gray";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx

@@ -103,10 +103,10 @@ export default function CampaignList() {
  <div
  className={`text-center w-[130px] rounded capitalize py-1 text-xs ${
  campaign.status === CampaignStatus.DRAFT
- ? "bg-gray-500/15 dark:bg-gray-400/15 text-gray-700 dark:text-gray-400/90 border border-gray-500/25 dark:border-gray-700/25"
+ ? "bg-gray/15 text-grayborder border-gray/25"
  : campaign.status === CampaignStatus.SENT
- ? "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-yellow-500/15 dark:bg-yellow-600/10 text-yellow-700 dark:text-yellow-600/90 border border-yellow-500/25 dark:border-yellow-700/25"
+ ? "bg-green/15 text-greenborder border-green/25"
+ : "bg-yellow/15 text-yellowborder border-yellow/25"
  }`}
  >
  {campaign.status.toLowerCase()}

apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx

@@ -62,7 +62,7 @@ export const DeleteCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx

@@ -35,7 +35,7 @@ export const DuplicateCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign duplicated`);
  },
- }
+ },
  );
  }
 
@@ -46,7 +46,7 @@ export const DuplicateCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Copy className="h-[18px] w-[18px] text-blue-600/80" />
+ <Copy className="h-[18px] w-[18px] text-blue/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx

@@ -152,21 +152,21 @@ export default function ContactList({
  </TableCell>
  <TableCell>
  {contact.subscribed ? (
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs 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">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-green/15 text-greenborder border-green/25">
  Subscribed
  </div>
  ) : (
  <Tooltip>
  <TooltipTrigger>
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red/10 text-redborder border-red/10">
  Unsubscribed
  </div>
  </TooltipTrigger>
  <TooltipContent>
  <p>
  {getUnsubscribeReason(
  contact.unsubscribeReason ??
- UnsubscribeReason.UNSUBSCRIBED
+ UnsubscribeReason.UNSUBSCRIBED,
  )}
  </p>
  </TooltipContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx

@@ -66,7 +66,7 @@ export const DeleteContact: React.FC<{
  onError: (e) => {
  toast.error(`Contact not deleted: ${e.message}`);
  },
- }
+ },
  );
  }
 
@@ -79,7 +79,7 @@ export const DeleteContact: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx

@@ -46,7 +46,7 @@ export const DeleteContactBook: React.FC<{
  });
 
  async function onContactBookDelete(
- values: z.infer<typeof contactBookSchema>
+ values: z.infer<typeof contactBookSchema>,
  ) {
  if (values.name !== contactBook.name) {
  contactBookForm.setError("name", {
@@ -65,7 +65,7 @@ export const DeleteContactBook: React.FC<{
  setOpen(false);
  toast.success(`Contact book deleted`);
  },
- }
+ },
  );
  }
 
@@ -78,7 +78,7 @@ export const DeleteContactBook: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent ">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80 hover:text-red-600/70" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80 hover:text-red/70" />
  </Button>
  </DialogTrigger>
  <DialogContent>

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

@@ -15,7 +15,6 @@ import { EmailStatus } from "@prisma/client";
 import { api } from "~/trpc/react";
 import Spinner from "@unsend/ui/src/spinner";
 import { useTheme } from "@unsend/ui";
-import { EMAIL_COLORS } from "~/lib/constants/colors";
 import { useColors } from "./hooks/useColors";
 
 interface EmailChartProps {
@@ -127,7 +126,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  </p>
  {data.delivered ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#40a02bcc] dark:bg-[#a6e3a1] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.delivered }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Delivered
  </p>
@@ -136,7 +138,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.bounced ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#d20f39cc] dark:bg-[#f38ba8] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.bounced }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Bounced
  </p>
@@ -145,7 +150,12 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.complained ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#df8e1dcc] dark:bg-[#F9E2AF] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{
+ backgroundColor: currentColors.complained,
+ }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Complained
  </p>
@@ -154,7 +164,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.opened ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#8839efcc] dark:bg-[#cba6f7] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.opened }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Opened
  </p>
@@ -163,7 +176,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.clicked ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#04a5e5cc] dark:bg-[#93c5fd] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.clicked }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Clicked
  </p>
@@ -236,16 +252,34 @@ const EmailChartItem: React.FC<DashboardItemCardProps> = ({
  count,
  percentage,
 }) => {
- const color = EMAIL_COLORS[status];
+ const currentColors = useColors();
+
+ const getColorForStatus = (status: EmailStatus | "total"): string => {
+ switch (status) {
+ case "DELIVERED":
+ return currentColors.delivered;
+ case "BOUNCED":
+ return currentColors.bounced;
+ case "COMPLAINED":
+ return currentColors.complained;
+ case "OPENED":
+ return currentColors.opened;
+ case "CLICKED":
+ return currentColors.clicked;
+ case "total":
+ default:
+ return "#6b7280"; // gray-500 for total and other statuses
+ }
+ };
 
  return (
  <div className="flex gap-3 items-stretch font-mono">
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
-
  <div>
  <div className=" flex items-center gap-2">
- <div className={`${color} w-2.5 h-2.5 rounded-[3px]`}></div>
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
+ <div
+ className="w-2.5 h-2.5 rounded-[3px]"
+ style={{ backgroundColor: getColorForStatus(status) }}
+ ></div>
 
  <div className="text-xs uppercase text-muted-foreground ">
  {status.toLowerCase()}

apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx

@@ -62,7 +62,7 @@ export default function AddApiKey() {
  setApiKey(data);
  apiKeyForm.reset();
  },
- }
+ },
  );
  }
 
@@ -132,7 +132,7 @@ export default function AddApiKey() {
  onClick={handleCopy}
  >
  {isCopied ? (
- <CheckIcon className="h-4 w-4 text-green-500" />
+ <CheckIcon className="h-4 w-4 text-green" />
  ) : (
  <ClipboardCopy className="h-4 w-4" />
  )}

apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx

@@ -62,7 +62,7 @@ export const DeleteApiKey: React.FC<{
  setOpen(false);
  toast.success(`API key deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteApiKey: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx

@@ -42,7 +42,7 @@ export default function DomainItemPage({
  {
  refetchInterval: (q) => (q?.state.data?.isVerifying ? 10000 : false),
  refetchIntervalInBackground: true,
- },
+ }
  );
 
  const verifyQuery = api.domain.startVerification.useMutation();
@@ -54,7 +54,7 @@ export default function DomainItemPage({
  onSettled: () => {
  domainQuery.refetch();
  },
- },
+ }
  );
  };
 
@@ -232,7 +232,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  const utils = api.useUtils();
 
  const [clickTracking, setClickTracking] = React.useState(
- domain.clickTracking,
+ domain.clickTracking
  );
  const [openTracking, setOpenTracking] = React.useState(domain.openTracking);
 
@@ -245,7 +245,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Click tracking updated");
  },
- },
+ }
  );
  }
 
@@ -258,7 +258,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Open tracking updated");
  },
- },
+ }
  );
  }
  return (
@@ -303,24 +303,20 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
 };
 
 const DnsVerificationStatus: React.FC<{ status: string }> = ({ status }) => {
- let badgeColor = "bg-gray-400/10 text-gray-500 border-gray-400/10"; // Default color
+ let badgeColor = "bg-gray/10 text-gray border-gray/10"; // Default color
  switch (status) {
  case DomainStatus.SUCCESS:
- 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";
+ badgeColor = "bg-green/15 text-green border border-green/25";
  break;
  case DomainStatus.FAILED:
- badgeColor =
- "bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10";
+ badgeColor = "bg-red/10 text-red border border-red/10";
  break;
  case DomainStatus.TEMPORARY_FAILURE:
  case DomainStatus.PENDING:
- badgeColor =
- "bg-yellow-500/20 dark:bg-yellow-500/10 text-yellow-600 border border-yellow-600/10";
+ badgeColor = "bg-yellow/20 text-yellow border border-yellow/10";
  break;
  default:
- badgeColor =
- "bg-gray-200/70 dark:bg-gray-400/10 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-400/20";
+ badgeColor = "bg-gray/10 text-gray border border-gray/20";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx

@@ -146,35 +146,35 @@ export default function CampaignDetailsPage({
 }
 
 const CampaignStatusBadge: React.FC<{ status: string }> = ({ status }) => {
- let outsideColor = "bg-gray-600";
- let insideColor = "bg-gray-600/50";
+ let outsideColor = "bg-gray";
+ let insideColor = "bg-gray/50";
 
  switch (status) {
  case "delivered":
- outsideColor = "bg-emerald-500/30";
- insideColor = "bg-emerald-500";
+ outsideColor = "bg-green/30";
+ insideColor = "bg-green";
  break;
  case "bounced":
  case "unsubscribed":
- outsideColor = "bg-red-500/30";
- insideColor = "bg-red-500";
+ outsideColor = "bg-red/30";
+ insideColor = "bg-red";
  break;
  case "clicked":
- outsideColor = "bg-cyan-500/30";
- insideColor = "bg-cyan-500";
+ outsideColor = "bg-blue/30";
+ insideColor = "bg-blue";
  break;
  case "opened":
- outsideColor = "bg-indigo-500/30";
- insideColor = "bg-indigo-500";
+ outsideColor = "bg-purple/30";
+ insideColor = "bg-purple";
  break;
 
  case "complained":
- outsideColor = "bg-yellow-500/30";
- insideColor = "bg-yellow-500";
+ outsideColor = "bg-yellow/30";
+ insideColor = "bg-yellow";
  break;
  default:
- outsideColor = "bg-gray-600/40";
- insideColor = "bg-gray-600";
+ outsideColor = "bg-gray/40";
+ insideColor = "bg-gray";
  }
 
  return (

apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx

@@ -103,10 +103,10 @@ export default function CampaignList() {
  <div
  className={`text-center w-[130px] rounded capitalize py-1 text-xs ${
  campaign.status === CampaignStatus.DRAFT
- ? "bg-gray-500/15 dark:bg-gray-400/15 text-gray-700 dark:text-gray-400/90 border border-gray-500/25 dark:border-gray-700/25"
+ ? "bg-gray/15 text-grayborder border-gray/25"
  : campaign.status === CampaignStatus.SENT
- ? "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-yellow-500/15 dark:bg-yellow-600/10 text-yellow-700 dark:text-yellow-600/90 border border-yellow-500/25 dark:border-yellow-700/25"
+ ? "bg-green/15 text-greenborder border-green/25"
+ : "bg-yellow/15 text-yellowborder border-yellow/25"
  }`}
  >
  {campaign.status.toLowerCase()}

apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx

@@ -62,7 +62,7 @@ export const DeleteCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx

@@ -35,7 +35,7 @@ export const DuplicateCampaign: React.FC<{
  setOpen(false);
  toast.success(`Campaign duplicated`);
  },
- }
+ },
  );
  }
 
@@ -46,7 +46,7 @@ export const DuplicateCampaign: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent">
- <Copy className="h-[18px] w-[18px] text-blue-600/80" />
+ <Copy className="h-[18px] w-[18px] text-blue/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx

@@ -152,21 +152,21 @@ export default function ContactList({
  </TableCell>
  <TableCell>
  {contact.subscribed ? (
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs 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">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-green/15 text-greenborder border-green/25">
  Subscribed
  </div>
  ) : (
  <Tooltip>
  <TooltipTrigger>
- <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10">
+ <div className="text-center w-[130px] rounded capitalize py-1 text-xs bg-red/10 text-redborder border-red/10">
  Unsubscribed
  </div>
  </TooltipTrigger>
  <TooltipContent>
  <p>
  {getUnsubscribeReason(
  contact.unsubscribeReason ??
- UnsubscribeReason.UNSUBSCRIBED
+ UnsubscribeReason.UNSUBSCRIBED,
  )}
  </p>
  </TooltipContent>

apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx

@@ -66,7 +66,7 @@ export const DeleteContact: React.FC<{
  onError: (e) => {
  toast.error(`Contact not deleted: ${e.message}`);
  },
- }
+ },
  );
  }
 
@@ -79,7 +79,7 @@ export const DeleteContact: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx

@@ -46,7 +46,7 @@ export const DeleteContactBook: React.FC<{
  });
 
  async function onContactBookDelete(
- values: z.infer<typeof contactBookSchema>
+ values: z.infer<typeof contactBookSchema>,
  ) {
  if (values.name !== contactBook.name) {
  contactBookForm.setError("name", {
@@ -65,7 +65,7 @@ export const DeleteContactBook: React.FC<{
  setOpen(false);
  toast.success(`Contact book deleted`);
  },
- }
+ },
  );
  }
 
@@ -78,7 +78,7 @@ export const DeleteContactBook: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm" className="p-0 hover:bg-transparent ">
- <Trash2 className="h-[18px] w-[18px] text-red-600/80 hover:text-red-600/70" />
+ <Trash2 className="h-[18px] w-[18px] text-red/80 hover:text-red/70" />
  </Button>
  </DialogTrigger>
  <DialogContent>

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

@@ -15,7 +15,6 @@ import { EmailStatus } from "@prisma/client";
 import { api } from "~/trpc/react";
 import Spinner from "@unsend/ui/src/spinner";
 import { useTheme } from "@unsend/ui";
-import { EMAIL_COLORS } from "~/lib/constants/colors";
 import { useColors } from "./hooks/useColors";
 
 interface EmailChartProps {
@@ -127,7 +126,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  </p>
  {data.delivered ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#40a02bcc] dark:bg-[#a6e3a1] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.delivered }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Delivered
  </p>
@@ -136,7 +138,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.bounced ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#d20f39cc] dark:bg-[#f38ba8] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.bounced }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Bounced
  </p>
@@ -145,7 +150,12 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.complained ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#df8e1dcc] dark:bg-[#F9E2AF] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{
+ backgroundColor: currentColors.complained,
+ }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Complained
  </p>
@@ -154,7 +164,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.opened ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#8839efcc] dark:bg-[#cba6f7] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.opened }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Opened
  </p>
@@ -163,7 +176,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) {
  ) : null}
  {data.clicked ? (
  <div className="flex gap-2 items-center">
- <div className="w-2.5 h-2.5 bg-[#04a5e5cc] dark:bg-[#93c5fd] rounded-[2px]"></div>
+ <div
+ className="w-2.5 h-2.5 rounded-[2px]"
+ style={{ backgroundColor: currentColors.clicked }}
+ ></div>
  <p className="text-xs text-muted-foreground w-[70px]">
  Clicked
  </p>
@@ -236,16 +252,34 @@ const EmailChartItem: React.FC<DashboardItemCardProps> = ({
  count,
  percentage,
 }) => {
- const color = EMAIL_COLORS[status];
+ const currentColors = useColors();
+
+ const getColorForStatus = (status: EmailStatus | "total"): string => {
+ switch (status) {
+ case "DELIVERED":
+ return currentColors.delivered;
+ case "BOUNCED":
+ return currentColors.bounced;
+ case "COMPLAINED":
+ return currentColors.complained;
+ case "OPENED":
+ return currentColors.opened;
+ case "CLICKED":
+ return currentColors.clicked;
+ case "total":
+ default:
+ return "#6b7280"; // gray-500 for total and other statuses
+ }
+ };
 
  return (
  <div className="flex gap-3 items-stretch font-mono">
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
-
  <div>
  <div className=" flex items-center gap-2">
- <div className={`${color} w-2.5 h-2.5 rounded-[3px]`}></div>
- {/* <div className={`${color} w-0.5 rounded-full`}></div> */}
+ <div
+ className="w-2.5 h-2.5 rounded-[3px]"
+ style={{ backgroundColor: getColorForStatus(status) }}
+ ></div>
 
  <div className="text-xs uppercase text-muted-foreground ">
  {status.toLowerCase()}

apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx

@@ -62,7 +62,7 @@ export default function AddApiKey() {
  setApiKey(data);
  apiKeyForm.reset();
  },
- }
+ },
  );
  }
 
@@ -132,7 +132,7 @@ export default function AddApiKey() {
  onClick={handleCopy}
  >
  {isCopied ? (
- <CheckIcon className="h-4 w-4 text-green-500" />
+ <CheckIcon className="h-4 w-4 text-green" />
  ) : (
  <ClipboardCopy className="h-4 w-4" />
  )}

apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx

@@ -62,7 +62,7 @@ export const DeleteApiKey: React.FC<{
  setOpen(false);
  toast.success(`API key deleted`);
  },
- }
+ },
  );
  }
 
@@ -75,7 +75,7 @@ export const DeleteApiKey: React.FC<{
  >
  <DialogTrigger asChild>
  <Button variant="ghost" size="sm">
- <Trash2 className="h-4 w-4 text-red-600/80" />
+ <Trash2 className="h-4 w-4 text-red/80" />
  </Button>
  </DialogTrigger>
  <DialogContent>

apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx

@@ -42,7 +42,7 @@ export default function DomainItemPage({
  {
  refetchInterval: (q) => (q?.state.data?.isVerifying ? 10000 : false),
  refetchIntervalInBackground: true,
- },
+ }
  );
 
  const verifyQuery = api.domain.startVerification.useMutation();
@@ -54,7 +54,7 @@ export default function DomainItemPage({
  onSettled: () => {
  domainQuery.refetch();
  },
- },
+ }
  );
  };
 
@@ -232,7 +232,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  const utils = api.useUtils();
 
  const [clickTracking, setClickTracking] = React.useState(
- domain.clickTracking,
+ domain.clickTracking
  );
  const [openTracking, setOpenTracking] = React.useState(domain.openTracking);
 
@@ -245,7 +245,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Click tracking updated");
  },
- },
+ }
  );
  }
 
@@ -258,7 +258,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
  utils.domain.invalidate();
  toast.success("Open tracking updated");
  },
- },
+ }
  );
  }
  return (
@@ -303,24 +303,20 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
 };
 
 const DnsVerificationStatus: React.FC<{ status: string }> = ({ status }) => {
- let badgeColor = "bg-gray-400/10 text-gray-500 border-gray-400/10"; // Default color
+ let badgeColor = "bg-gray/10 text-gray border-gray/10"; // Default color
  switch (status) {
  case DomainStatus.SUCCESS:
- 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";
+ badgeColor = "bg-green/15 text-green border border-green/25";
  break;
  case DomainStatus.FAILED:
- badgeColor =
- "bg-red-500/10 text-red-600 dark:text-red-700/90 border border-red-600/10";
+ badgeColor = "bg-red/10 text-red border border-red/10";
  break;
  case DomainStatus.TEMPORARY_FAILURE:
  case DomainStatus.PENDING:
- badgeColor =
- "bg-yellow-500/20 dark:bg-yellow-500/10 text-yellow-600 border border-yellow-600/10";
+ badgeColor = "bg-yellow/20 text-yellow border border-yellow/10";
  break;
  default:
- badgeColor =
- "bg-gray-200/70 dark:bg-gray-400/10 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-400/20";
+ badgeColor = "bg-gray/10 text-gray border border-gray/20";
  }
 
  return (