From b6dc2da667d0a85ee2f33b98134203d23ea29d54 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 6 Feb 2026 21:28:37 +0000 Subject: [PATCH 1/2] refactor: use semantic dark mode tokens Co-authored-by: Kent C. Dodds --- app/components/ui/button.tsx | 10 +- app/routes/_app+/_auth+/verify.tsx | 2 +- app/routes/_app+/_layout.tsx | 30 ++-- app/routes/_app+/_marketing+/index.tsx | 34 ++--- .../_app+/recipients+/$recipientId.index.tsx | 16 +-- app/routes/_app+/recipients+/$recipientId.tsx | 2 +- app/routes/_app+/recipients+/index.tsx | 8 +- .../_app+/settings.profile+/subscription.tsx | 4 +- app/styles/tailwind.css | 132 ++++++++++++++++++ app/utils/extended-theme.ts | 51 +++++++ 10 files changed, 230 insertions(+), 59 deletions(-) diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx index 603aaa87..f3dc4124 100644 --- a/app/components/ui/button.tsx +++ b/app/components/ui/button.tsx @@ -13,19 +13,17 @@ const buttonVariants = cva( default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm', brand: - 'bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))] shadow-sm', + 'bg-brand text-brand-foreground hover:bg-brand/90 shadow-sm', 'brand-soft': - 'bg-[hsl(var(--palette-green-300))] text-[hsl(var(--palette-dark-navy))] hover:bg-[hsl(var(--palette-green-500))] hover:text-[hsl(var(--palette-cream))] shadow-sm', - warm: - 'bg-[hsl(var(--palette-chestnut))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-hot-fire-red))] shadow-sm', + 'bg-brand-soft text-brand-soft-foreground hover:bg-brand hover:text-brand-foreground shadow-sm', + warm: 'bg-warm text-warm-foreground hover:bg-warm/90 shadow-sm', destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm', outline: 'border-border bg-card text-foreground hover:bg-muted border', secondary: 'border-border text-foreground hover:bg-muted border bg-transparent', ghost: 'text-foreground hover:bg-muted', - 'ghost-inverse': - 'text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15]', + 'ghost-inverse': 'text-inverse hover:bg-inverse/15', link: 'text-primary underline-offset-4 hover:underline', }, size: { diff --git a/app/routes/_app+/_auth+/verify.tsx b/app/routes/_app+/_auth+/verify.tsx index bda909ad..fc0d82a6 100644 --- a/app/routes/_app+/_auth+/verify.tsx +++ b/app/routes/_app+/_auth+/verify.tsx @@ -132,7 +132,7 @@ export default function VerifyRoute() { errors={fields[codeQueryParam].errors} groupClassName="gap-2 sm:gap-3" showSeparator={false} - slotClassName="h-11 w-11 rounded-full bg-white text-base font-semibold shadow-none dark:bg-[hsl(var(--palette-navy))] sm:h-14 sm:w-14 sm:text-lg" + slotClassName="bg-card text-foreground h-11 w-11 rounded-full text-base font-semibold shadow-none sm:h-14 sm:w-14 sm:text-lg" />
No text after 5 minutes? diff --git a/app/routes/_app+/_layout.tsx b/app/routes/_app+/_layout.tsx index 5974da3d..bbc7fa43 100644 --- a/app/routes/_app+/_layout.tsx +++ b/app/routes/_app+/_layout.tsx @@ -1,4 +1,4 @@ -import { useRef, useState, type CSSProperties } from 'react' +import { useRef, useState } from 'react' import { Form, Link, @@ -67,18 +67,8 @@ export default function Layout() { const data = useLoaderData() const user = useOptionalUser() const requestInfo = useRequestInfo() - const isRecipientsRoute = requestInfo.path.startsWith('/recipients') - const recipientsTheme = isRecipientsRoute - ? ({ - '--background': '0 0% 100%', - '--card': '0 0% 100%', - } as CSSProperties) - : undefined return ( -
+
-

- $14.99 -

+

$14.99

-
diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx index dd7b63b2..03a3ce45 100644 --- a/app/routes/_app+/recipients+/$recipientId.index.tsx +++ b/app/routes/_app+/recipients+/$recipientId.index.tsx @@ -647,7 +647,7 @@ export default function RecipientRoute() {
-

- $4.99 -

+

$4.99

{isBasic || isPremium ? ( @@ -89,9 +87,7 @@ export default function Subscribe() { 10 messages per day

-

- $14.99 -

+

$14.99

{isPremium ? ( diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css index e988f2f9..b537ad77 100644 --- a/app/styles/tailwind.css +++ b/app/styles/tailwind.css @@ -244,7 +244,9 @@ --color-hero-orb: hsl(var(--hero-orb)); --color-hero-sparkle: hsl(var(--hero-sparkle)); --color-marketing-feature: hsl(var(--marketing-feature)); - --color-marketing-feature-foreground: hsl(var(--marketing-feature-foreground)); + --color-marketing-feature-foreground: hsl( + var(--marketing-feature-foreground) + ); --color-marketing-feature-muted: hsl(var(--marketing-feature-muted)); --color-marketing-feature-accent: hsl(var(--marketing-feature-accent)); --color-marketing-feature-accent-secondary: hsl( diff --git a/app/utils/cron-runner.server.ts b/app/utils/cron-runner.server.ts index ae2076a2..783606ae 100644 --- a/app/utils/cron-runner.server.ts +++ b/app/utils/cron-runner.server.ts @@ -3,6 +3,7 @@ import { clearIntervalAsync, setIntervalAsync, } from 'set-interval-async/dynamic' +import { getScheduleWindow } from './cron.server.ts' import { prisma } from './db.server.ts' import { getrecipientsforcron } from './prisma-generated.server/sql.ts' import { @@ -10,7 +11,6 @@ import { PREV_SCHEDULE_SENTINEL_DATE, } from './schedule-constants.server.ts' import { sendText, sendTextToRecipient } from './text.server.ts' -import { getScheduleWindow } from './cron.server.ts' const cronIntervalRef = remember<{ current: ReturnType | null diff --git a/app/utils/cron.server.test.ts b/app/utils/cron.server.test.ts index fe84610b..d09d134f 100644 --- a/app/utils/cron.server.test.ts +++ b/app/utils/cron.server.test.ts @@ -2,8 +2,8 @@ import '#tests/setup/setup-test-env.ts' import { faker } from '@faker-js/faker' import { expect, test } from 'bun:test' import { createMessage, createRecipient, createUser } from '#tests/db-utils.ts' -import { getScheduleWindow } from './cron.server.ts' import { sendNextTexts } from './cron-runner.server.ts' +import { getScheduleWindow } from './cron.server.ts' import { prisma } from './db.server.ts' test('does not send any texts if there are none to be sent', async () => {