From bfc79dfb593be7aef6fa4e06a1345da74908a8ef Mon Sep 17 00:00:00 2001
From: Taylor Ho <taylorkmho@gmail.com>
Date: Wed, 29 Jul 2026 23:05:47 -0700
Subject: [PATCH] fix(desktop): scope inverted buttons to backup flows

- Restore the standard primary CTA treatment for general onboarding steps.
- Add a dedicated inverted CTA style for dark backup-security surfaces.
- Apply the white button treatment only to backup creation, file selection, verification, and password-reset actions.

Co-authored-by: Taylor Ho <taylorkmho@gmail.com>
Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
---
 desktop/src/features/onboarding/ui/BackupTestFlow.tsx  |  6 +++---
 desktop/src/features/onboarding/ui/DownloadKeyStep.tsx |  4 ++--
 .../features/onboarding/ui/EncryptedBackupCreator.tsx  |  4 ++--
 .../src/features/onboarding/ui/OnboardingChrome.tsx    | 10 +++++++---
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
index 0cfa4ab74..34222aee4 100644
--- a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
+++ b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
@@ -13,7 +13,7 @@ import { Input } from "@/shared/ui/input";
 import { PubKey } from "@/shared/ui/PubKey";
 import { Spinner } from "@/shared/ui/spinner";
 import {
-  ONBOARDING_PRIMARY_CTA_CLASS,
+  ONBOARDING_SECURITY_PRIMARY_CTA_CLASS,
   ONBOARDING_SECONDARY_CTA_CLASS,
   ONBOARDING_SECURITY_ICON_CLASS,
 } from "./OnboardingChrome";
@@ -378,7 +378,7 @@ export function BackupTestFlow({
             className={cn(
               "mx-auto",
               isSpotlight
-                ? ONBOARDING_PRIMARY_CTA_CLASS
+                ? ONBOARDING_SECURITY_PRIMARY_CTA_CLASS
                 : "h-9 px-6 text-primary-foreground",
             )}
             data-testid="backup-test-dropzone"
@@ -539,7 +539,7 @@ export function BackupTestFlow({
               className={cn(
                 "font-medium",
                 isSpotlight
-                  ? ONBOARDING_PRIMARY_CTA_CLASS
+                  ? ONBOARDING_SECURITY_PRIMARY_CTA_CLASS
                   : "h-9 px-6 text-sm text-primary-foreground",
               )}
               data-testid="backup-test-verify"
diff --git a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
index 303cbea10..ab797b47d 100644
--- a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
+++ b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 
 import { Button } from "@/shared/ui/button";
 import {
-  ONBOARDING_PRIMARY_CTA_CLASS,
+  ONBOARDING_SECURITY_PRIMARY_CTA_CLASS,
   ONBOARDING_SECONDARY_CTA_CLASS,
 } from "./OnboardingChrome";
 import { OnboardingFooter } from "./OnboardingFooter";
@@ -89,7 +89,7 @@ export function DownloadKeyStep({
               data-testid="backup-password-panel"
             >
               <EncryptedBackupCreator
-                createButtonClassName={ONBOARDING_PRIMARY_CTA_CLASS}
+                createButtonClassName={ONBOARDING_SECURITY_PRIMARY_CTA_CLASS}
                 createButtonPortal={createButtonSlot}
                 session={session}
                 variant="spotlight"
diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
index c0b0e0532..35249b471 100644
--- a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -46,7 +46,7 @@ import {
   initialBackupTestProgress,
 } from "./BackupTestFlow";
 import {
-  ONBOARDING_PRIMARY_CTA_CLASS,
+  ONBOARDING_SECURITY_PRIMARY_CTA_CLASS,
   ONBOARDING_SECONDARY_CTA_CLASS,
 } from "./OnboardingChrome";
 
@@ -939,7 +939,7 @@ export function EncryptedBackupCreator({
             <AlertDialogAction
               className={
                 variant === "spotlight"
-                  ? ONBOARDING_PRIMARY_CTA_CLASS
+                  ? ONBOARDING_SECURITY_PRIMARY_CTA_CLASS
                   : undefined
               }
               data-testid="backup-start-new-password"
diff --git a/desktop/src/features/onboarding/ui/OnboardingChrome.tsx b/desktop/src/features/onboarding/ui/OnboardingChrome.tsx
index 8845033de..7a52ae499 100644
--- a/desktop/src/features/onboarding/ui/OnboardingChrome.tsx
+++ b/desktop/src/features/onboarding/ui/OnboardingChrome.tsx
@@ -11,10 +11,14 @@ export const TOTAL_ONBOARDING_PAGES = 7;
 const ONBOARDING_CTA_SHAPE = "h-[2.375rem] rounded-full px-6";
 
 /**
- * Primary-CTA styling for the in-step onboarding pages: an inverted white pill
- * with dark text that stays legible across every onboarding surface.
+ * Primary-CTA styling for the in-step onboarding pages: the shared pill with a
+ * light-blue label (`--buzz-onboarding-cta-label`, available on any
+ * `.buzz-onboarding-neutral-theme` subtree).
  */
-export const ONBOARDING_PRIMARY_CTA_CLASS = `${ONBOARDING_CTA_SHAPE} bg-white text-black/80 hover:bg-white/90 hover:text-black`;
+export const ONBOARDING_PRIMARY_CTA_CLASS = `${ONBOARDING_CTA_SHAPE} text-[var(--buzz-onboarding-cta-label)]`;
+
+/** Inverted primary action used only on dark backup-security surfaces. */
+export const ONBOARDING_SECURITY_PRIMARY_CTA_CLASS = `${ONBOARDING_CTA_SHAPE} bg-white text-black/80 hover:bg-white/90 hover:text-black`;
 
 /**
  * Primary-CTA styling for the landing screen only: the shared pill with the