From e40993ef002b79947046d8e8566d4395940c9ad2 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 27 Mar 2025 11:55:28 +0000
Subject: [PATCH 1/3] Move to indigo primary button to better fit in with the
 app UI style

---
 .../app/components/primitives/Buttons.tsx     | 10 ++---
 .../app/routes/storybook.buttons/route.tsx    | 42 ++++++++++++-------
 apps/webapp/tailwind.config.js                |  1 +
 3 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx
index 6b5f22c385..2adddb40cc 100644
--- a/apps/webapp/app/components/primitives/Buttons.tsx
+++ b/apps/webapp/app/components/primitives/Buttons.tsx
@@ -42,17 +42,17 @@ type Size = keyof typeof sizes;
 const theme = {
   primary: {
     textColor:
-      "text-charcoal-900 group-hover/button:text-charcoal-900 transition group-disabled/button:text-charcoal-900",
+      "text-text-bright group-hover/button:text-white transition group-disabled/button:text-text-dimmed",
     button:
-      "bg-primary group-hover/button:bg-apple-200 group-disabled/button:opacity-50 group-disabled/button:bg-primary group-disabled/button:pointer-events-none",
+      "bg-indigo-600 border border-indigo-500 group-hover/button:bg-indigo-500 group-hover/button:border-indigo-400 group-disabled/button:opacity-50 group-disabled/button:bg-indigo-600 group-disabled/button:border-indigo-500 group-disabled/button:pointer-events-none",
     shortcut:
-      "border-black/40 text-charcoal-900 group-hover/button:border-black/60 group-hover/button:text-charcoal-900",
-    icon: "text-charcoal-900",
+      "border-text-bright/40 text-text-bright group-hover/button:border-text-bright/60 group-hover/button:text-text-bright",
+    icon: "text-text-bright",
   },
   secondary: {
     textColor: "text-text-bright transition group-disabled/button:text-text-dimmed/80",
     button:
-      "bg-secondary group-hover/button:bg-charcoal-600 group-hover/button:border-charcoal-650 border border-charcoal-600 group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
+      "bg-secondary group-hover/button:bg-charcoal-600 group-hover/button:border-charcoal-550 border border-charcoal-600 group-disabled/button:bg-secondary group-disabled/button:opacity-60 group-disabled/button:pointer-events-none",
     shortcut:
       "border-text-dimmed/40 text-text-dimmed group-hover/button:text-text-bright group-hover/button:border-text-dimmed",
     icon: "text-text-bright",
diff --git a/apps/webapp/app/routes/storybook.buttons/route.tsx b/apps/webapp/app/routes/storybook.buttons/route.tsx
index 9fe9ba6812..941e39c4d8 100644
--- a/apps/webapp/app/routes/storybook.buttons/route.tsx
+++ b/apps/webapp/app/routes/storybook.buttons/route.tsx
@@ -108,7 +108,10 @@ export default function Story() {
         </div>
         <div className="flex flex-col items-start gap-2">
           <Header3 className="mb-1 uppercase">Loading</Header3>
-          <Button variant="primary/small" LeadingIcon={Spinner}>
+          <Button
+            variant="primary/small"
+            LeadingIcon={<Spinner color="white" className="size-3.5" />}
+          >
             Loading Primary…
           </Button>
           <Button variant="secondary/small" LeadingIcon={Spinner}>
@@ -120,7 +123,10 @@ export default function Story() {
           <Button variant="minimal/small" LeadingIcon={Spinner}>
             Loading Minimal…
           </Button>
-          <Button variant="danger/small" LeadingIcon={Spinner}>
+          <Button
+            variant="danger/small"
+            LeadingIcon={<Spinner color="white" className="size-3.5" />}
+          >
             Loading Danger…
           </Button>
         </div>
@@ -231,7 +237,10 @@ export default function Story() {
         </div>
         <div className="flex flex-col items-start gap-2">
           <Header3 className="mb-1 uppercase">Loading</Header3>
-          <Button variant="primary/medium" LeadingIcon={Spinner}>
+          <Button
+            variant="primary/medium"
+            LeadingIcon={<Spinner color="white" className="size-4" />}
+          >
             Loading Primary…
           </Button>
           <Button variant="secondary/medium" LeadingIcon={Spinner}>
@@ -243,7 +252,10 @@ export default function Story() {
           <Button variant="minimal/medium" LeadingIcon={Spinner}>
             Loading Minimal…
           </Button>
-          <Button variant="danger/medium" LeadingIcon={Spinner}>
+          <Button
+            variant="danger/medium"
+            LeadingIcon={<Spinner color="white" className="size-4" />}
+          >
             Loading Danger…
           </Button>
         </div>
@@ -279,12 +291,12 @@ export default function Story() {
         <div className="flex flex-col gap-2">
           <div className="flex flex-col items-start gap-2">
             <Button variant="primary/large" fullWidth>
-              <GitHubDarkIcon className={"mr-1.5 size-[1.2rem]"} />
-              <span className="text-charcoal-900">Continue with GitHub</span>
+              <GitHubLightIcon className={"mr-1.5 size-[1.2rem]"} />
+              <span className="text-text-bright">Continue with GitHub</span>
             </Button>
             <Button variant="secondary/large" fullWidth>
-              <EnvelopeIcon className={"mr-1.5 h-5 w-5 text-secondary transition"} />
-              <span className="text-secondary">Continue with Email</span>
+              <EnvelopeIcon className={"mr-1.5 size-[1.2rem] text-text-bright transition"} />
+              <span className="text-text-bright">Continue with Email</span>
             </Button>
             <Button variant="tertiary/large" fullWidth>
               <GitHubLightIcon className={"mr-1.5 size-[1.2rem]"} />
@@ -306,22 +318,20 @@ export default function Story() {
         <div className="flex flex-col gap-2">
           <div className="flex flex-col items-start gap-2">
             <Button variant="primary/extra-large" fullWidth>
-              <GitHubDarkIcon className={"mr-1.5 h-5 w-5"} />
-              <span className="text-charcoal-900">Continue with GitHub</span>
+              <GitHubLightIcon className={"mr-1.5 size-5"} />
+              <span className="text-text-bright">Continue with GitHub</span>
             </Button>
             <Button variant="secondary/extra-large" fullWidth>
-              <EnvelopeIcon className={"mr-1.5 h-5 w-5 text-secondary transition"} />
-              <span className="text-secondary">Continue with Email</span>
+              <EnvelopeIcon className={"mr-1.5 h-5 w-5 text-text-bright transition"} />
+              <span className="text-text-bright">Continue with Email</span>
             </Button>
             <Button variant="tertiary/extra-large" fullWidth>
-              <GitHubLightIcon className={"mr-1.5 h-5 w-5"} />
+              <GitHubLightIcon className={"mr-1.5 size-5"} />
               <span className="text-text-bright">Continue with GitHub</span>
             </Button>
             <Button variant="danger/extra-large" fullWidth>
               <TrashIcon
-                className={
-                  "mr-1.5 h-5 w-5 text-text-bright transition group-hover:text-text-bright"
-                }
+                className={"mr-1.5 size-5 text-text-bright transition group-hover:text-text-bright"}
               />
               <span className="text-text-bright">This is a delete button</span>
             </Button>
diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js
index db62f107f0..5b41bcafd8 100644
--- a/apps/webapp/tailwind.config.js
+++ b/apps/webapp/tailwind.config.js
@@ -61,6 +61,7 @@ const charcoal = {
   300: "#B5B8C0",
   400: "#878C99",
   500: "#5F6570",
+  550: "#4D525B",
   600: "#3B3E45",
   650: "#2C3034",
   700: "#272A2E",

From a3b8a56bb337d0ecadb641fee8d05363c39f6dc2 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 27 Mar 2025 12:01:26 +0000
Subject: [PATCH 2/3] Updates Pause queue button to secondary

---
 .../route.tsx                                                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx
index 472fb01b69..7ca6f09a56 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx
@@ -486,7 +486,7 @@ function EnvironmentPauseResumeButton({
                 <DialogTrigger asChild>
                   <Button
                     type="button"
-                    variant="tertiary/small"
+                    variant="secondary/small"
                     LeadingIcon={env.paused ? PlayIcon : PauseIcon}
                     leadingIconClassName={env.paused ? "text-success" : "text-amber-500"}
                   >
@@ -495,7 +495,7 @@ function EnvironmentPauseResumeButton({
                 </DialogTrigger>
               </div>
             </TooltipTrigger>
-            <TooltipContent side="right" className={"text-xs"}>
+            <TooltipContent className={"text-xs"}>
               {env.paused
                 ? `Resume processing runs in ${environmentFullTitle(env)}.`
                 : `Pause processing runs in ${environmentFullTitle(env)}.`}

From 26267c31da8ac586140e658199b3344445617f87 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 27 Mar 2025 12:01:46 +0000
Subject: [PATCH 3/3] Updates some blank state CTA buttons to primary

---
 apps/webapp/app/components/BlankStatePanels.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/webapp/app/components/BlankStatePanels.tsx b/apps/webapp/app/components/BlankStatePanels.tsx
index 0547d49129..0a07bd4b8e 100644
--- a/apps/webapp/app/components/BlankStatePanels.tsx
+++ b/apps/webapp/app/components/BlankStatePanels.tsx
@@ -200,8 +200,7 @@ export function TestHasNoTasks() {
       accessory={
         <LinkButton
           to={v3EnvironmentPath(organization, project, environment)}
-          variant="secondary/small"
-          LeadingIcon={PlusIcon}
+          variant="primary/small"
         >
           Create a task
         </LinkButton>
@@ -396,8 +395,7 @@ export function QueuesHasNoTasks() {
       accessory={
         <LinkButton
           to={v3EnvironmentPath(organization, project, environment)}
-          variant="secondary/small"
-          LeadingIcon={PlusIcon}
+          variant="primary/small"
         >
           Create a task
         </LinkButton>