feat(buttons): Change onboarding buttons to new design (#5423)

### Description Update the onboarding buttons ### Test plan unit/e2e tests pass Manual Tests: ![Simulator Screenshot - iPhone 14 Pro - 2024-05-16 at 12 33 56](https://github.com/valora-inc/wallet/assets/140328381/f616523d-e24b-46f3-bff1-650b51c7f0ad) ![Simulator Screenshot - iPhone 14 Pro - 2024-05-16 at 12 34 02](https://github.com/valora-inc/wallet/assets/140328381/fea7646c-cda6-470d-b5b4-3f30b6bb1842) ![Simulator Screenshot - iPhone 14 Pro - 2024-05-16 at 12 34 25](https://github.com/valora-inc/wallet/assets/140328381/2ab26ff4-89dd-4a58-a8bc-6f2cd0bebc1b) ### Related issues - N/A ### Backwards compatibility Yes ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [X] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added)
valora-inc · May 20, 2024 · 6c3366d · 6c3366d
1 parent c55cd0a
commit 6c3366d
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 20 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -16,9 +16,8 @@ export enum BtnTypes {
   PRIMARY = 'Primary',
   SECONDARY = 'Secondary',
   SECONDARY_WHITE_BG = 'SecondaryWhiteBg',
-  ONBOARDING = 'Onboarding',
-  ONBOARDING_SECONDARY = 'OnboardingSecondary',
   GRAY_WITH_BORDER = 'GrayWithBorder',
+  ONBOARDING_SECONDARY = 'OnboardingSecondary',
 }
 
 export enum BtnSizes {
@@ -173,22 +172,18 @@ function getColors(type: BtnTypes, disabled: boolean | undefined) {
       textColor = colors.gray3
       backgroundColor = colors.white
       break
-    case BtnTypes.ONBOARDING:
-      textColor = colors.white
-      backgroundColor = colors.successDark
+    case BtnTypes.GRAY_WITH_BORDER:
+      textColor = colors.black
+      backgroundColor = colors.gray1
+      borderColor = colors.gray2
       opacity = disabled ? 0.5 : 1.0
       break
+    /** @deprecated TODO(ACT-1200): Remove and replace with GRAY_WITHBORDER*/
     case BtnTypes.ONBOARDING_SECONDARY:
       textColor = colors.successDark
       backgroundColor = colors.white
       opacity = disabled ? 0.5 : 1.0
       break
-    case BtnTypes.GRAY_WITH_BORDER:
-      textColor = colors.black
-      backgroundColor = colors.gray1
-      borderColor = colors.gray2
-      opacity = disabled ? 0.5 : 1.0
-      break
   }
 
   return { textColor, backgroundColor, opacity, borderColor }

diff --git a/src/import/ImportWallet.tsx b/src/import/ImportWallet.tsx
@@ -221,7 +221,7 @@ function ImportWallet({ navigation, route }: Props) {
                   onPress={onPressRestore}
                   text={t('restore')}
                   size={BtnSizes.FULL}
-                  type={BtnTypes.ONBOARDING}
+                  type={BtnTypes.PRIMARY}
                   disabled={
                     isImportingWallet || !isValidBackupPhrase(backupPhrase) || !appConnected
                   }

diff --git a/src/keylessBackup/KeylessBackupProgress.tsx b/src/keylessBackup/KeylessBackupProgress.tsx
@@ -315,7 +315,7 @@ function Setup() {
             onPress={onPressLater}
             text={t('keylessBackupStatus.setup.failed.later')}
             size={BtnSizes.FULL}
-            type={BtnTypes.ONBOARDING}
+            type={BtnTypes.PRIMARY}
             style={styles.button}
             touchableStyle={styles.buttonTouchable}
           />
@@ -324,7 +324,7 @@ function Setup() {
             onPress={onPressManual}
             text={t('keylessBackupStatus.setup.failed.manual')}
             size={BtnSizes.FULL}
-            type={BtnTypes.ONBOARDING_SECONDARY}
+            type={BtnTypes.GRAY_WITH_BORDER}
             style={styles.button}
             touchableStyle={styles.buttonTouchable}
           />

diff --git a/src/onboarding/registration/EnableBiometry.tsx b/src/onboarding/registration/EnableBiometry.tsx
@@ -129,7 +129,7 @@ export default function EnableBiometry({ navigation }: Props) {
             biometryType: t(`biometryType.${supportedBiometryType}`),
           })}
           size={BtnSizes.FULL}
-          type={BtnTypes.ONBOARDING}
+          type={BtnTypes.PRIMARY}
           testID="EnableBiometryButton"
           icon={
             supportedBiometryType && (

diff --git a/src/onboarding/registration/OnboardingRecoveryPhrase.tsx b/src/onboarding/registration/OnboardingRecoveryPhrase.tsx
@@ -108,7 +108,7 @@ function OnboardingRecoveryPhrase({ navigation }: Props) {
             onPress={onPressContinue}
             text={t('recoveryPhrase.continue')}
             size={BtnSizes.FULL}
-            type={BtnTypes.ONBOARDING}
+            type={BtnTypes.PRIMARY}
             testID={'protectWalletBottomSheetContinue'}
           />
         </View>

diff --git a/src/onboarding/registration/RegulatoryTerms.tsx b/src/onboarding/registration/RegulatoryTerms.tsx
@@ -181,7 +181,7 @@ export class RegulatoryTerms extends React.Component<Props> {
           {(insets) => (
             <Button
               style={[styles.button, insets && insets.bottom <= MARGIN && { marginBottom: MARGIN }]}
-              type={BtnTypes.ONBOARDING}
+              type={BtnTypes.PRIMARY}
               size={BtnSizes.FULL}
               text={t('accept')}
               onPress={this.onPressAccept}

diff --git a/src/onboarding/welcome/Welcome.tsx b/src/onboarding/welcome/Welcome.tsx
@@ -116,7 +116,7 @@ export default function Welcome() {
           onPress={onPressCreateAccount}
           text={t('welcome.getStarted')}
           size={BtnSizes.FULL}
-          type={BtnTypes.ONBOARDING}
+          type={BtnTypes.PRIMARY}
           style={styles.createAccountButton}
           testID={'CreateAccountButton'}
           disabled={buttonsDisabled}
@@ -125,7 +125,7 @@ export default function Welcome() {
           onPress={onPressRestoreAccount}
           text={t('welcome.hasWallet')}
           size={BtnSizes.FULL}
-          type={BtnTypes.ONBOARDING_SECONDARY}
+          type={BtnTypes.GRAY_WITH_BORDER}
           testID={'RestoreAccountButton'}
           disabled={buttonsDisabled}
         />

diff --git a/src/verify/VerificationStartScreen.tsx b/src/verify/VerificationStartScreen.tsx
@@ -232,7 +232,7 @@ function VerificationStartScreen({
         <Button
           text={t('phoneVerificationScreen.startButtonLabel')}
           onPress={onPressStart}
-          type={BtnTypes.ONBOARDING}
+          type={BtnTypes.PRIMARY}
           size={BtnSizes.FULL}
           showLoading={!signedMessageCreated}
           style={styles.startButton}