elie222 · elie222 · Feb 15, 2025 · Feb 15, 2025 · Feb 15, 2025
diff --git a/apps/web/app/(app)/automation/ExecutedRulesTable.tsx b/apps/web/app/(app)/automation/ExecutedRulesTable.tsx
@@ -160,7 +160,7 @@ function OpenInGmailButton({
     <Link
       href={getGmailUrl(messageId, userEmail)}
       target="_blank"
-      className="ml-2 text-gray-700 hover:text-gray-900"
+      className="ml-2 text-muted-foreground hover:text-foreground"
     >
       <ExternalLinkIcon className="h-4 w-4" />
     </Link>

diff --git a/apps/web/app/(app)/automation/ProcessResultDisplay.tsx b/apps/web/app/(app)/automation/ProcessResultDisplay.tsx
@@ -23,7 +23,7 @@ export function ProcessResultDisplay({
       <HoverCard
         className="w-auto max-w-3xl"
         content={
-          <Alert variant="destructive" className="bg-white">
+          <Alert variant="destructive" className="bg-background">
             <AlertTitle>No rule matched</AlertTitle>
             <AlertDescription className="space-y-2">
               <div>
@@ -49,9 +49,9 @@ export function ProcessResultDisplay({
   const aiGeneratedContent = result.actionItems?.map((action, i) => (
     <div
       key={i}
-      className="space-y-2 rounded-md border border-gray-200 bg-gray-50 p-3"
+      className="space-y-2 rounded-md border border-border bg-muted p-3"
     >
-      <div className="text-xs font-semibold uppercase tracking-wide text-gray-900">
+      <div className="text-xs font-semibold uppercase tracking-wide text-foreground">
         {capitalCase(action.type)}
       </div>
       {Object.entries(action)
@@ -63,8 +63,8 @@ export function ProcessResultDisplay({
             ),
         )
         .map(([key, value]) => (
-          <div key={key} className="flex text-sm text-gray-800">
-            <span className="min-w-16 font-medium text-gray-600">
+          <div key={key} className="flex text-sm text-foreground">
+            <span className="min-w-16 font-medium text-muted-foreground">
               {capitalCase(key)}:
             </span>
             <span className="ml-2 max-h-40 flex-1 overflow-y-auto">
@@ -79,7 +79,7 @@ export function ProcessResultDisplay({
     <HoverCard
       className="w-auto max-w-5xl"
       content={
-        <Alert variant="blue" className="max-w-prose bg-white">
+        <Alert variant="blue" className="max-w-prose bg-background">
           <CheckCircle2Icon className="h-4 w-4" />
           <AlertTitle className="flex items-center justify-between">
             Matched rule "{result.rule.name}"

diff --git a/apps/web/app/(app)/automation/ProcessRules.tsx b/apps/web/app/(app)/automation/ProcessRules.tsx
@@ -163,7 +163,7 @@ export function ProcessRulesContent({ testMode }: { testMode: boolean }) {
 
   return (
     <div>
-      <div className="flex items-center justify-between gap-2 border-b border-gray-200 px-6 pb-4">
+      <div className="flex items-center justify-between gap-2 border-b border-border px-6 pb-4">
         <div className="flex items-center gap-2">
           {isRunningAll ? (
             <Button onClick={handleStop} variant="outline">
@@ -208,7 +208,7 @@ export function ProcessRulesContent({ testMode }: { testMode: boolean }) {
 
       <LoadingContent loading={isLoading} error={error}>
         {messages.length === 0 ? (
-          <div className="p-4 text-center text-sm text-gray-500">
+          <div className="p-4 text-center text-sm text-muted-foreground">
             No emails found
           </div>
         ) : (

diff --git a/apps/web/app/(app)/automation/ReportMistake.tsx b/apps/web/app/(app)/automation/ReportMistake.tsx
@@ -932,7 +932,7 @@ function Instructions({
   return (
     <div>
       <p className="text-sm">{label}</p>
-      <div className="mt-2 rounded border border-gray-200 bg-gray-50 p-2 text-sm">
+      <div className="mt-2 rounded border border-border bg-muted p-2 text-sm">
         {instructions}
       </div>
     </div>

diff --git a/apps/web/app/(app)/automation/group/LearnedPatterns.tsx b/apps/web/app/(app)/automation/group/LearnedPatterns.tsx
@@ -18,9 +18,9 @@ export function LearnedPatterns({ groupId }: { groupId: string }) {
       onOpenChange={setIsOpen}
       className="overflow-hidden rounded-lg border"
     >
-      <CollapsibleTrigger className="flex w-full items-center justify-between bg-white p-4 hover:bg-slate-50">
+      <CollapsibleTrigger className="flex w-full items-center justify-between bg-background p-4 hover:bg-muted">
         <div className="flex items-center gap-2">
-          <BrainIcon size={16} className="text-slate-600" />
+          <BrainIcon size={16} className="text-muted-foreground" />
           <span className="font-medium">
             Learned Patterns (previously known as Groups)
           </span>

diff --git a/apps/web/app/(app)/automation/page.tsx b/apps/web/app/(app)/automation/page.tsx
@@ -10,6 +10,7 @@ import { Groups } from "@/app/(app)/automation/group/Groups";
 import { RulesPrompt } from "@/app/(app)/automation/RulesPrompt";
 import { OnboardingModal } from "@/components/OnboardingModal";
 import { PermissionsCheck } from "@/app/(app)/PermissionsCheck";
+import { TabsToolbar } from "@/components/TabsToolbar";
 
 export const maxDuration = 300; // Applies to the actions
 
@@ -22,7 +23,7 @@ export default async function AutomationPage() {
       <PermissionsCheck />
 
       <Tabs defaultValue="prompt">
-        <div className="content-container flex shrink-0 flex-col justify-between gap-x-4 space-y-2 border-b border-gray-200 bg-white py-2 shadow-sm md:flex-row md:gap-x-6 md:space-y-0">
+        <TabsToolbar>
           <div className="w-full overflow-x-auto">
             <TabsList>
               <TabsTrigger value="prompt">Prompt</TabsTrigger>
@@ -44,7 +45,7 @@ export default async function AutomationPage() {
             }
             videoId="SoeNDVr7ve4"
           />
-        </div>
+        </TabsToolbar>
 
         <TabsContent value="prompt" className="content-container mb-10">
           <RulesPrompt />

diff --git a/apps/web/app/(app)/cold-email-blocker/page.tsx b/apps/web/app/(app)/cold-email-blocker/page.tsx
@@ -7,6 +7,7 @@ import { PremiumAlertWithData } from "@/components/PremiumAlert";
 import { ColdEmailRejected } from "@/app/(app)/cold-email-blocker/ColdEmailRejected";
 import { PermissionsCheck } from "@/app/(app)/PermissionsCheck";
 import { ColdEmailTest } from "@/app/(app)/cold-email-blocker/ColdEmailTest";
+import { TabsToolbar } from "@/components/TabsToolbar";
 
 export default function ColdEmailBlockerPage() {
   return (
@@ -16,15 +17,15 @@ export default function ColdEmailBlockerPage() {
         <PremiumAlertWithData className="mt-2" />
       </div>
 
-      <Tabs defaultValue="cold-emails" className="mt-2">
-        <div className="content-container flex shrink-0 flex-col items-center justify-between gap-x-4 space-y-2 border-b border-gray-200 bg-white pb-2 shadow-sm md:flex-row md:gap-x-6 md:space-y-0">
+      <Tabs defaultValue="cold-emails">
+        <TabsToolbar>
           <TabsList>
             <TabsTrigger value="cold-emails">Cold Emails</TabsTrigger>
             <TabsTrigger value="rejected">Marked Not Cold</TabsTrigger>
             <TabsTrigger value="test">Test</TabsTrigger>
             <TabsTrigger value="settings">Settings</TabsTrigger>
           </TabsList>
-        </div>
+        </TabsToolbar>
 
         <TabsContent value="cold-emails" className="content-container mb-10">
           <Card>

diff --git a/apps/web/app/(app)/compose/ComposeEmailForm.tsx b/apps/web/app/(app)/compose/ComposeEmailForm.tsx
@@ -181,7 +181,7 @@ export const ComposeEmailForm = ({
           onClick={() => setEditReply(true)}
         >
           <span className="text-green-500">Draft</span>{" "}
-          <span className="max-w-md break-words">
+          <span className="max-w-md break-words text-foreground">
             to {extractNameFromEmail(replyingToEmail.to)}
           </span>
         </button>
@@ -197,7 +197,7 @@ export const ComposeEmailForm = ({
                 onChange={handleComboboxOnChange}
                 multiple
               >
-                <div className="flex min-h-10 w-full flex-1 flex-wrap items-center gap-1.5 rounded-md text-sm disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500">
+                <div className="flex min-h-10 w-full flex-1 flex-wrap items-center gap-1.5 rounded-md text-sm disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-muted-foreground">
                   {selectedEmailAddressses.map((emailAddress) => (
                     <Badge
                       key={emailAddress}
@@ -222,7 +222,7 @@ export const ComposeEmailForm = ({
                   <div className="relative flex-1">
                     <ComboboxInput
                       value={searchQuery}
-                      className="w-full border-none p-0 text-sm focus:border-none focus:ring-0"
+                      className="w-full border-none bg-background p-0 text-sm focus:border-none focus:ring-0"
                       onChange={(event) => setSearchQuery(event.target.value)}
                       onKeyUp={(event) => {
                         if (event.key === "Enter") {
@@ -239,7 +239,7 @@ export const ComposeEmailForm = ({
                     {!!data?.result?.length && (
                       <ComboboxOptions
                         className={
-                          "absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
+                          "absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-popover py-1 text-base shadow-lg ring-1 ring-border focus:outline-none sm:text-sm"
                         }
                       >
                         <ComboboxOption
@@ -257,8 +257,8 @@ export const ComposeEmailForm = ({
                           return (
                             <ComboboxOption
                               className={({ focus }) =>
-                                `cursor-default select-none px-4 py-1 text-gray-900 ${
-                                  focus && "bg-gray-50"
+                                `cursor-default select-none px-4 py-1 text-foreground ${
+                                  focus && "bg-accent"
                                 }`
                               }
                               key={person.emailAddress}
@@ -285,8 +285,10 @@ export const ComposeEmailForm = ({
                                     </Avatar>
                                   )}
                                   <div className="ml-4 flex flex-col justify-center">
-                                    <div>{person.name}</div>
-                                    <div className="text-sm font-semibold">
+                                    <div className="text-foreground">
+                                      {person.name}
+                                    </div>
+                                    <div className="text-sm font-semibold text-muted-foreground">
                                       {person.emailAddress}
                                     </div>
                                   </div>

diff --git a/apps/web/app/(app)/new-senders/page.tsx b/apps/web/app/(app)/new-senders/page.tsx
@@ -14,7 +14,7 @@ export default function NewSendersPage() {
 
   return (
     <div>
-      <div className="sticky top-0 z-10 flex border-b bg-white px-2 py-2 shadow sm:justify-between sm:px-4">
+      <div className="sticky top-0 z-10 flex border-b bg-background px-2 py-2 shadow sm:justify-between sm:px-4">
         <div />
         <div className="space-y-1 sm:flex sm:space-x-1 sm:space-y-0">
           <LoadStatsButton />

diff --git a/apps/web/app/(app)/no-reply/page.tsx b/apps/web/app/(app)/no-reply/page.tsx
@@ -14,7 +14,7 @@ export default function NoReplyPage() {
 
   return (
     <div>
-      <div className="border-b border-gray-200 px-8 py-6">
+      <div className="border-b border-border px-8 py-6">
         <PageHeading>Emails Sent With No Reply</PageHeading>
       </div>
       <LoadingContent loading={isLoading} error={error}>

diff --git a/apps/web/app/(app)/onboarding/OnboardingEmailAssistant.tsx b/apps/web/app/(app)/onboarding/OnboardingEmailAssistant.tsx
@@ -177,7 +177,7 @@ function EmailAssistantTestResults({
           loadingComponent={
             <div className="flex flex-col items-center justify-center pb-8">
               <Loading />
-              <p className="text-sm text-gray-500">
+              <p className="text-sm text-muted-foreground">
                 Loading example matches... This may take a minute.
               </p>
             </div>
@@ -200,7 +200,7 @@ function EmailAssistantTestResults({
                         <p className="text-base font-semibold">
                           {match.subject}
                         </p>
-                        <p className="line-clamp-2 text-sm text-gray-600">
+                        <p className="line-clamp-2 text-sm text-slate-600">
                           {decodeSnippet(match.snippet)}
                         </p>
                       </div>
@@ -215,7 +215,7 @@ function EmailAssistantTestResults({
               </TableBody>
             </Table>
           ) : (
-            <p className="p-4 text-center text-sm text-slate-500">
+            <p className="p-4 text-center text-sm text-muted-foreground">
               No matches found 😔
             </p>
           )}

diff --git a/apps/web/app/(app)/onboarding/Steps.tsx b/apps/web/app/(app)/onboarding/Steps.tsx
@@ -64,11 +64,11 @@ export function Steps({
                 "absolute left-0 top-0 flex w-6 justify-center",
               )}
             >
-              <div className="w-px bg-gray-200" />
+              <div className="w-px bg-slate-200 dark:bg-slate-800" />
             </div>
 
-            <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-white">
-              <div className="h-1.5 w-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300" />
+            <div className="relative flex h-6 w-6 flex-none items-center justify-center bg-background">
+              <div className="h-1.5 w-1.5 rounded-full bg-slate-100 ring-1 ring-slate-300 dark:bg-slate-800 dark:ring-slate-700" />
             </div>
 
             <div

diff --git a/apps/web/app/(app)/premium/Pricing.tsx b/apps/web/app/(app)/premium/Pricing.tsx
@@ -12,8 +12,7 @@ import clsx from "clsx";
 import { env } from "@/env";
 import { LoadingContent } from "@/components/LoadingContent";
 import { usePremium } from "@/components/PremiumAlert";
-import { Button } from "@/components/Button";
-import { Button as ShadcnButton } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import { getUserTier } from "@/utils/premium";
 import {
   frequencies,
@@ -105,24 +104,27 @@ export function Pricing(props: { header?: React.ReactNode }) {
 
         {isPremium && (
           <div className="mb-8 mt-8 text-center">
-            <Button
-              link={{
-                href: `https://${env.NEXT_PUBLIC_LEMON_STORE_ID}.lemonsqueezy.com/billing`,
-                target: "_blank",
-              }}
-            >
-              <CreditCardIcon className="mr-2 h-4 w-4" />
-              Manage subscription
+            <Button asChild>
+              <Link
+                href={`https://${env.NEXT_PUBLIC_LEMON_STORE_ID}.lemonsqueezy.com/billing`}
+                target="_blank"
+              >
+                <CreditCardIcon className="mr-2 h-4 w-4" />
+                Manage subscription
+              </Link>
             </Button>
 
-            <Button link={{ href: "/automation" }} color="blue">
-              <SparklesIcon className="mr-2 h-4 w-4" />
-              Use Inbox Zero
+            <Button variant="primaryBlue" className="ml-2" asChild>
+              <Link href="/automation">
+                <SparklesIcon className="mr-2 h-4 w-4" />
+                Use Inbox Zero
+              </Link>
             </Button>
 
             {premiumTier && (
               <div className="mx-auto mt-4 max-w-md">
                 <AlertWithButton
+                  className="bg-background"
                   variant="blue"
                   title="Add extra users to your account!"
                   description={`You can upgrade extra accounts to ${capitalCase(
@@ -133,9 +135,9 @@ export function Pricing(props: { header?: React.ReactNode }) {
                   icon={null}
                   button={
                     <div className="ml-4 whitespace-nowrap">
-                      <ShadcnButton asChild variant="blue">
+                      <Button variant="primaryBlue" asChild>
                         <Link href="/settings#manage-users">Add users</Link>
-                      </ShadcnButton>
+                      </Button>
                     </div>
                   }
                 />

diff --git a/apps/web/app/(app)/premium/page.tsx b/apps/web/app/(app)/premium/page.tsx
@@ -4,7 +4,7 @@ import { Pricing } from "@/app/(app)/premium/Pricing";
 export default function Premium() {
   return (
     <Suspense>
-      <div className="pb-20">
+      <div className="bg-white pb-20">
         <Pricing />
       </div>
     </Suspense>

diff --git a/apps/web/app/(app)/reply-zero/ReplyTrackerEmails.tsx b/apps/web/app/(app)/reply-zero/ReplyTrackerEmails.tsx
@@ -209,7 +209,7 @@ export function ReplyTrackerEmails({
           <div className="h-full overflow-y-auto">{listView}</div>
         </ResizablePanel>
         <ResizableHandle withHandle />
-        <ResizablePanel defaultSize={65} minSize={0} className="bg-slate-100">
+        <ResizablePanel defaultSize={65} minSize={0} className="bg-secondary">
           <div className="h-full overflow-y-auto">
             <ThreadContent
               threadId={selectedEmail.threadId}
@@ -291,8 +291,9 @@ function Row({
     <TableRow
       ref={rowRef}
       className={cn(
-        "transition-colors duration-100 hover:bg-white",
-        isSelected && "bg-blue-50 hover:bg-blue-50",
+        "transition-colors duration-100 hover:bg-background",
+        isSelected &&
+          "bg-blue-50 hover:bg-blue-50 dark:bg-slate-800 dark:hover:bg-slate-800",
       )}
       onMouseEnter={onSelect}
     >
@@ -434,7 +435,7 @@ function EmptyState({
 
   return (
     <div className="content-container">
-      <div className="flex min-h-[200px] flex-col items-center justify-center rounded-md border border-dashed bg-slate-50 p-8 text-center animate-in fade-in-50">
+      <div className="flex min-h-[200px] flex-col items-center justify-center rounded-md border border-dashed bg-muted p-8 text-center animate-in fade-in-50">
         {isAnalyzing ? (
           <>
             <p className="text-sm text-muted-foreground">

diff --git a/apps/web/app/(app)/reply-zero/page.tsx b/apps/web/app/(app)/reply-zero/page.tsx
@@ -17,6 +17,7 @@ import { TimeRangeFilter } from "./TimeRangeFilter";
 import type { TimeRange } from "./date-filter";
 import { isAnalyzingReplyTracker } from "@/utils/redis/reply-tracker-analyzing";
 import { Button } from "@/components/ui/button";
+import { TabsToolbar } from "@/components/TabsToolbar";
 
 export const maxDuration = 600;
 
@@ -47,7 +48,7 @@ export default async function ReplyTrackerPage({
 
   return (
     <Tabs defaultValue="needsReply" className="flex h-full flex-col">
-      <div className="content-container flex shrink-0 flex-col justify-between gap-x-4 space-y-2 border-b border-gray-200 bg-white py-2 shadow-sm md:flex-row md:gap-x-6 md:space-y-0">
+      <TabsToolbar>
         <div className="w-full overflow-x-auto">
           <div className="flex items-center justify-between gap-2">
             <TabsList>
@@ -92,7 +93,7 @@ export default async function ReplyTrackerPage({
             </div>
           </div>
         </div>
-      </div>
+      </TabsToolbar>
 
       <TabsContent value="needsReply" className="mt-0 flex-1">
         <NeedsReply