External/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-08-18 06:50:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(desktop): scope inverted buttons to backup flows

Browse Source 
- 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>
This commit is contained in:
Taylor Ho
2026-07-29 23:52:31 -07:00
committed by npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
parent 4a8aec83ff
commit bfc79dfb59
4 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
desktop/src/features/onboarding/ui/BackupTestFlow.tsx
+3 -3
View File
@@ -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"
desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
+2 -2
View File
@@ -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"
desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+2 -2
View File
@@ -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"
desktop/src/features/onboarding/ui/OnboardingChrome.tsx
+7 -3
View File
@@ -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