From 21517052aa425c00cdee33ac64378a79df34c05a Mon Sep 17 00:00:00 2001
From: Fred Souza <1396615+fmsouza@users.noreply.github.com>
Date: Fri, 24 Jul 2026 14:46:03 +0100
Subject: [PATCH] fix(accounts): PQ-010 QA visual fixes for Quantum add-account
 [PERA-4483]

Address QA feedback on the Add Quantum Account entry:

- "NEW" badge: add a solid-mint PWBadge `new` variant (wallet4 /
  wallet4Icon tokens) matching Figma, replacing the faint `positive`
  variant.
- "Learn more" link: use `linkPositive` so the link keeps the teal tone
  in dark mode (the `link` variant resolves to the brand yellow in dark).
- Title wrap: keep the panel title on one line when a badge is present,
  so "Add Quantum Account" no longer breaks to two lines on high-density
  devices (e.g. Galaxy S25).
---
 .../src/components/PanelButton/PanelButton.tsx      | 13 ++++++++++++-
 apps/mobile/src/components/core/PWBadge/PWBadge.tsx |  2 +-
 .../core/PWBadge/__tests__/PWBadge.spec.tsx         | 10 ++++++++++
 apps/mobile/src/components/core/PWBadge/styles.ts   |  5 +++++
 .../screens/AddAccountScreen/useAddAccountScreen.ts |  2 +-
 .../gallery-catalog/components.catalog.tsx          |  9 +++++++++
 6 files changed, 38 insertions(+), 3 deletions(-)

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) => {
                             <PWText
                                 style={themeStyle.textStyle}
                                 variant={titleWeight}
+                                // Keep the title on one line when a badge sits
+                                // beside it — on higher-density devices the
+                                // scaled title + badge would otherwise wrap.
+                                truncate={!!badge}
                                 {...getTestProps(testID, 'text')}
                             >
                                 {title}
@@ -109,7 +113,14 @@ export const PanelButton = (props: PanelButtonProps) => {
                             }}
                             {...getTestProps(testID, 'learn_more')}
                         >
-                            <PWText variant='link'>{learnMore.label}</PWText>
+                            {/*
+                              linkPositive keeps the teal link tone in both
+                              themes (link's dark tone is the brand yellow),
+                              per the Quantum "Learn more" design.
+                            */}
+                            <PWText variant='linkPositive'>
+                                {learnMore.label}
+                            </PWText>
                         </PWTouchableOpacity>
                     )}
                 </PWView>
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(
+            <PWBadge
+                variant='new'
+                value='NEW'
+            />,
+        )
+        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: (
+                        <PWBadge
+                            value='NEW'
+                            variant='new'
+                        />
+                    ),
+                },
             ]}
         />
     ),