diff --git a/apps/mobile/src/components/PanelButton/PanelButton.tsx b/apps/mobile/src/components/PanelButton/PanelButton.tsx index 05aedbdec..1571d40a3 100644 --- a/apps/mobile/src/components/PanelButton/PanelButton.tsx +++ b/apps/mobile/src/components/PanelButton/PanelButton.tsx @@ -80,6 +80,10 @@ export const PanelButton = (props: PanelButtonProps) => { {title} @@ -109,7 +113,14 @@ export const PanelButton = (props: PanelButtonProps) => { }} {...getTestProps(testID, 'learn_more')} > - {learnMore.label} + {/* + linkPositive keeps the teal link tone in both + themes (link's dark tone is the brand yellow), + per the Quantum "Learn more" design. + */} + + {learnMore.label} + )} diff --git a/apps/mobile/src/components/core/PWBadge/PWBadge.tsx b/apps/mobile/src/components/core/PWBadge/PWBadge.tsx index d671afbe5..b49e603f6 100644 --- a/apps/mobile/src/components/core/PWBadge/PWBadge.tsx +++ b/apps/mobile/src/components/core/PWBadge/PWBadge.tsx @@ -14,7 +14,7 @@ import { Badge, type BadgeProps } from '@rneui/themed' import { useStyles } from './styles' export type PWBadgeProps = { - variant?: 'primary' | 'testnet' | 'secondary' | 'positive' | 'alert' + variant?: 'primary' | 'testnet' | 'secondary' | 'positive' | 'alert' | 'new' } & BadgeProps export const PWBadge = ({ diff --git a/apps/mobile/src/components/core/PWBadge/__tests__/PWBadge.spec.tsx b/apps/mobile/src/components/core/PWBadge/__tests__/PWBadge.spec.tsx index f8f0cd2d5..21b91ac01 100644 --- a/apps/mobile/src/components/core/PWBadge/__tests__/PWBadge.spec.tsx +++ b/apps/mobile/src/components/core/PWBadge/__tests__/PWBadge.spec.tsx @@ -30,4 +30,14 @@ describe('PWBadge', () => { ) expect(screen.getByText('3')).toBeTruthy() }) + + it('renders new variant value correctly', () => { + render( + , + ) + expect(screen.getByText('NEW')).toBeTruthy() + }) }) diff --git a/apps/mobile/src/components/core/PWBadge/styles.ts b/apps/mobile/src/components/core/PWBadge/styles.ts index 4834c85a4..efccc0779 100644 --- a/apps/mobile/src/components/core/PWBadge/styles.ts +++ b/apps/mobile/src/components/core/PWBadge/styles.ts @@ -26,6 +26,11 @@ export const useStyles = makeStyles((theme, props: PWBadgeProps) => { } else if (variant === 'positive') { textColor = theme.colors.positive backgroundColor = theme.colors.buttonSquareBg + } else if (variant === 'new') { + // Solid "NEW feature" highlight pill (e.g. Quantum accounts) — mint + // fill with dark text, per the Wallet/4 design tokens. + textColor = theme.colors.wallet4Icon + backgroundColor = theme.colors.wallet4 } else if (variant === 'alert') { textColor = theme.colors.textWhite backgroundColor = theme.colors.alertNegative diff --git a/apps/mobile/src/modules/onboarding/screens/AddAccountScreen/useAddAccountScreen.ts b/apps/mobile/src/modules/onboarding/screens/AddAccountScreen/useAddAccountScreen.ts index 68c1b72f1..fc3c54d5e 100644 --- a/apps/mobile/src/modules/onboarding/screens/AddAccountScreen/useAddAccountScreen.ts +++ b/apps/mobile/src/modules/onboarding/screens/AddAccountScreen/useAddAccountScreen.ts @@ -237,7 +237,7 @@ export const useAddAccountScreen = () => { badge: { labelKey: 'onboarding.add_account.quantum_account_option_badge', - variant: 'positive', + variant: 'new', }, learnMore: { labelKey: diff --git a/apps/mobile/src/modules/settings/screens/developer/gallery-catalog/components.catalog.tsx b/apps/mobile/src/modules/settings/screens/developer/gallery-catalog/components.catalog.tsx index 8f3e67bd0..2985cc203 100644 --- a/apps/mobile/src/modules/settings/screens/developer/gallery-catalog/components.catalog.tsx +++ b/apps/mobile/src/modules/settings/screens/developer/gallery-catalog/components.catalog.tsx @@ -676,6 +676,15 @@ registerPreview({ /> ), }, + { + label: 'new', + node: ( + + ), + }, ]} /> ),