diff --git a/apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx b/apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx index 8c802eb..726d628 100644 --- a/apps/web/src/app/(dashboard)/campaigns/[campaignId]/page.tsx +++ b/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 ( diff --git a/apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx b/apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx index 2fae9c2..b8be18f 100644 --- a/apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx +++ b/apps/web/src/app/(dashboard)/campaigns/campaign-list.tsx @@ -103,10 +103,10 @@ export default function CampaignList() {
{campaign.status.toLowerCase()} diff --git a/apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx b/apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx index 584b1c1..b00e710 100644 --- a/apps/web/src/app/(dashboard)/campaigns/delete-campaign.tsx +++ b/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<{ > diff --git a/apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx b/apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx index 90fa3b2..4c1c51d 100644 --- a/apps/web/src/app/(dashboard)/campaigns/duplicate-campaign.tsx +++ b/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<{ > diff --git a/apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx b/apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx index 1dffbb1..d85b086 100644 --- a/apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx +++ b/apps/web/src/app/(dashboard)/contacts/[contactBookId]/contact-list.tsx @@ -152,13 +152,13 @@ export default function ContactList({ {contact.subscribed ? ( -
+
Subscribed
) : ( -
+
Unsubscribed
@@ -166,7 +166,7 @@ export default function ContactList({

{getUnsubscribeReason( contact.unsubscribeReason ?? - UnsubscribeReason.UNSUBSCRIBED + UnsubscribeReason.UNSUBSCRIBED, )}

diff --git a/apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx b/apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx index 1f03843..3ffc2f1 100644 --- a/apps/web/src/app/(dashboard)/contacts/[contactBookId]/delete-contact.tsx +++ b/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<{ > diff --git a/apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx b/apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx index b29ac1e..5876fe7 100644 --- a/apps/web/src/app/(dashboard)/contacts/delete-contact-book.tsx +++ b/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 + values: z.infer, ) { 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<{ > diff --git a/apps/web/src/app/(dashboard)/dashboard/email-chart.tsx b/apps/web/src/app/(dashboard)/dashboard/email-chart.tsx index 87e293d..5014f3f 100644 --- a/apps/web/src/app/(dashboard)/dashboard/email-chart.tsx +++ b/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) {

{data.delivered ? (
-
+

Delivered

@@ -136,7 +138,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) { ) : null} {data.bounced ? (
-
+

Bounced

@@ -145,7 +150,12 @@ export default function EmailChart({ days, domain }: EmailChartProps) { ) : null} {data.complained ? (
-
+

Complained

@@ -154,7 +164,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) { ) : null} {data.opened ? (
-
+

Opened

@@ -163,7 +176,10 @@ export default function EmailChart({ days, domain }: EmailChartProps) { ) : null} {data.clicked ? (
-
+

Clicked

@@ -236,16 +252,34 @@ const EmailChartItem: React.FC = ({ 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 (
- {/*
*/} -
-
- {/*
*/} +
{status.toLowerCase()} diff --git a/apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx b/apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx index 8245f32..d556b59 100644 --- a/apps/web/src/app/(dashboard)/dev-settings/api-keys/add-api-key.tsx +++ b/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 ? ( - + ) : ( )} diff --git a/apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx b/apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx index c95264e..7c1aed1 100644 --- a/apps/web/src/app/(dashboard)/dev-settings/api-keys/delete-api-key.tsx +++ b/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<{ > diff --git a/apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx b/apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx index 0b57183..f485903 100644 --- a/apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx +++ b/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 ( diff --git a/apps/web/src/app/(dashboard)/domains/domain-badge.tsx b/apps/web/src/app/(dashboard)/domains/domain-badge.tsx index 841fef6..566e67b 100644 --- a/apps/web/src/app/(dashboard)/domains/domain-badge.tsx +++ b/apps/web/src/app/(dashboard)/domains/domain-badge.tsx @@ -3,24 +3,20 @@ import { DomainStatus } from "@prisma/client"; export const DomainStatusBadge: React.FC<{ status: DomainStatus }> = ({ 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/70 text-gray border border-gray/20"; } return ( diff --git a/apps/web/src/app/(dashboard)/domains/status-indicator.tsx b/apps/web/src/app/(dashboard)/domains/status-indicator.tsx index d070690..baaacd7 100644 --- a/apps/web/src/app/(dashboard)/domains/status-indicator.tsx +++ b/apps/web/src/app/(dashboard)/domains/status-indicator.tsx @@ -3,23 +3,23 @@ import { DomainStatus } from "@prisma/client"; export const StatusIndicator: React.FC<{ status: DomainStatus }> = ({ status, }) => { - let badgeColor = "bg-gray-400"; // Default color + let badgeColor = "bg-gray"; // Default color switch (status) { case DomainStatus.NOT_STARTED: - badgeColor = "bg-gray-400"; + badgeColor = "bg-gray"; break; case DomainStatus.SUCCESS: - badgeColor = "bg-emerald-500"; + badgeColor = "bg-green"; break; case DomainStatus.FAILED: - badgeColor = "bg-red-500"; + badgeColor = "bg-red"; break; case DomainStatus.TEMPORARY_FAILURE: case DomainStatus.PENDING: - badgeColor = "bg-yellow-500"; + badgeColor = "bg-yellow"; break; default: - badgeColor = "bg-gray-400"; + badgeColor = "bg-gray"; } return
; diff --git a/apps/web/src/app/(dashboard)/emails/cancel-email.tsx b/apps/web/src/app/(dashboard)/emails/cancel-email.tsx index 8734342..544e513 100644 --- a/apps/web/src/app/(dashboard)/emails/cancel-email.tsx +++ b/apps/web/src/app/(dashboard)/emails/cancel-email.tsx @@ -64,7 +64,7 @@ export const CancelEmail: React.FC<{ onError: (e) => { toast.error(`Error cancelling email: ${e.message}`); }, - } + }, ); } @@ -77,7 +77,7 @@ export const CancelEmail: React.FC<{ > diff --git a/apps/web/src/app/(dashboard)/emails/email-list.tsx b/apps/web/src/app/(dashboard)/emails/email-list.tsx index 9cb1501..a1a3f92 100644 --- a/apps/web/src/app/(dashboard)/emails/email-list.tsx +++ b/apps/web/src/app/(dashboard)/emails/email-list.tsx @@ -46,12 +46,12 @@ import { SheetTitle, SheetDescription } from "@unsend/ui/src/sheet"; /* Stupid hydrating error. And I so stupid to understand the stupid NextJS docs */ const DynamicSheetWithNoSSR = dynamic( () => import("@unsend/ui/src/sheet").then((mod) => mod.Sheet), - { ssr: false } + { ssr: false }, ); const DynamicSheetContentWithNoSSR = dynamic( () => import("@unsend/ui/src/sheet").then((mod) => mod.SheetContent), - { ssr: false } + { ssr: false }, ); export default function EmailsList() { @@ -231,7 +231,7 @@ export default function EmailsList() { Scheduled at{" "} {formatDate( email.scheduledAt, - "MMM dd'th', hh:mm a" + "MMM dd'th', hh:mm a", )} @@ -247,7 +247,7 @@ export default function EmailsList() { {email.latestStatus !== "SCHEDULED" ? formatDate( email.scheduledAt ?? email.createdAt, - "MMM do, hh:mm a" + "MMM do, hh:mm a", ) : "--"} @@ -301,39 +301,39 @@ const EmailIcon: React.FC<{ status: EmailStatus }> = ({ status }) => { case "SENT": return ( //
- + //
); case "DELIVERED": return ( //
- + //
); case "BOUNCED": case "FAILED": return ( //
- + //
); case "CLICKED": return ( //
- + //
); case "OPENED": return ( //
- + //
); case "DELIVERY_DELAYED": case "COMPLAINED": return ( //
- + //
); default: diff --git a/apps/web/src/app/(dashboard)/payments/page.tsx b/apps/web/src/app/(dashboard)/payments/page.tsx index 9f9408b..65fc2da 100644 --- a/apps/web/src/app/(dashboard)/payments/page.tsx +++ b/apps/web/src/app/(dashboard)/payments/page.tsx @@ -37,7 +37,7 @@ function VerifySuccess() { return (
- +

Your account has been upgraded to the paid plan.

diff --git a/apps/web/src/app/(dashboard)/settings/team/delete-team-invite.tsx b/apps/web/src/app/(dashboard)/settings/team/delete-team-invite.tsx index d0480a0..8c06da1 100644 --- a/apps/web/src/app/(dashboard)/settings/team/delete-team-invite.tsx +++ b/apps/web/src/app/(dashboard)/settings/team/delete-team-invite.tsx @@ -36,7 +36,7 @@ export const DeleteTeamInvite: React.FC<{ onError: async (error) => { toast.error(error.message); }, - } + }, ); } @@ -47,7 +47,7 @@ export const DeleteTeamInvite: React.FC<{ > diff --git a/apps/web/src/app/(dashboard)/settings/team/delete-team-member.tsx b/apps/web/src/app/(dashboard)/settings/team/delete-team-member.tsx index 8531ff2..f16503b 100644 --- a/apps/web/src/app/(dashboard)/settings/team/delete-team-member.tsx +++ b/apps/web/src/app/(dashboard)/settings/team/delete-team-member.tsx @@ -38,7 +38,7 @@ export const DeleteTeamMember: React.FC<{ onError: async (error) => { toast.error(error.message); }, - } + }, ); } @@ -50,9 +50,9 @@ export const DeleteTeamMember: React.FC<{ diff --git a/apps/web/src/app/(dashboard)/settings/team/team-members-list.tsx b/apps/web/src/app/(dashboard)/settings/team/team-members-list.tsx index e548c93..ceb0ea1 100644 --- a/apps/web/src/app/(dashboard)/settings/team/team-members-list.tsx +++ b/apps/web/src/app/(dashboard)/settings/team/team-members-list.tsx @@ -67,7 +67,7 @@ export default function TeamMembersList() {
-
+
Active
@@ -122,7 +122,7 @@ export default function TeamMembersList() {
-
+
Pending
diff --git a/apps/web/src/app/(dashboard)/templates/[templateId]/edit/page.tsx b/apps/web/src/app/(dashboard)/templates/[templateId]/edit/page.tsx index aaea8b2..6ce1802 100644 --- a/apps/web/src/app/(dashboard)/templates/[templateId]/edit/page.tsx +++ b/apps/web/src/app/(dashboard)/templates/[templateId]/edit/page.tsx @@ -29,7 +29,7 @@ export default function EditTemplatePage({ { templateId: templateId }, { enabled: !!templateId, - } + }, ); if (isLoading) { @@ -63,7 +63,7 @@ function TemplateEditor({ const utils = api.useUtils(); const [json, setJson] = useState | undefined>( - template.content ? JSON.parse(template.content) : undefined + template.content ? JSON.parse(template.content) : undefined, ); const [isSaving, setIsSaving] = useState(false); const [name, setName] = useState(template.name); @@ -86,13 +86,13 @@ function TemplateEditor({ const deboucedUpdateTemplate = useDebouncedCallback( updateEditorContent, - 1000 + 1000, ); const handleFileChange = async (file: File) => { if (file.size > IMAGE_SIZE_LIMIT) { throw new Error( - `File should be less than ${IMAGE_SIZE_LIMIT / 1024 / 1024}MB` + `File should be less than ${IMAGE_SIZE_LIMIT / 1024 / 1024}MB`, ); } @@ -143,7 +143,7 @@ function TemplateEditor({ toast.error(`${e.message}. Reverting changes.`); setName(template.name); }, - } + }, ); }} /> @@ -152,9 +152,9 @@ function TemplateEditor({
{isSaving ? ( -
+
) : ( -
+
)} {formatDistanceToNow(template.updatedAt) === "less than a minute" ? "just now" @@ -188,7 +188,7 @@ function TemplateEditor({ toast.error(`${e.message}. Reverting changes.`); setSubject(template.subject); }, - } + }, ); }} className="mt-1 py-1 text-sm block w-full outline-none border-b border-transparent focus:border-border bg-transparent" diff --git a/apps/web/src/app/(dashboard)/templates/delete-template.tsx b/apps/web/src/app/(dashboard)/templates/delete-template.tsx index 73ef6c2..47a39b9 100644 --- a/apps/web/src/app/(dashboard)/templates/delete-template.tsx +++ b/apps/web/src/app/(dashboard)/templates/delete-template.tsx @@ -62,7 +62,7 @@ export const DeleteTemplate: React.FC<{ setOpen(false); toast.success(`Template deleted`); }, - } + }, ); } @@ -75,7 +75,7 @@ export const DeleteTemplate: React.FC<{ > diff --git a/apps/web/src/app/(dashboard)/templates/duplicate-template.tsx b/apps/web/src/app/(dashboard)/templates/duplicate-template.tsx index cc11935..0804f1e 100644 --- a/apps/web/src/app/(dashboard)/templates/duplicate-template.tsx +++ b/apps/web/src/app/(dashboard)/templates/duplicate-template.tsx @@ -35,7 +35,7 @@ export const DuplicateTemplate: React.FC<{ setOpen(false); toast.success(`Template duplicated`); }, - } + }, ); } @@ -46,7 +46,7 @@ export const DuplicateTemplate: React.FC<{ > diff --git a/apps/web/src/components/payments/PlanDetails.tsx b/apps/web/src/components/payments/PlanDetails.tsx index b3b0de6..2033b14 100644 --- a/apps/web/src/components/payments/PlanDetails.tsx +++ b/apps/web/src/components/payments/PlanDetails.tsx @@ -36,7 +36,7 @@ export const PlanDetails = () => {
    {perks.map((perk, index) => (
  • - + {perk}
    • ))} diff --git a/apps/web/src/components/payments/UpgradeModal.tsx b/apps/web/src/components/payments/UpgradeModal.tsx index 8c70097..3288e1e 100644 --- a/apps/web/src/components/payments/UpgradeModal.tsx +++ b/apps/web/src/components/payments/UpgradeModal.tsx @@ -52,7 +52,7 @@ export const UpgradeModal = () => {
      {basicPlanPerks.map((perk, index) => (
    • - + {perk}
      • ))}