From bc5089206825dd0f69b924d24524c98687e9ba45 Mon Sep 17 00:00:00 2001
From: Satish Ravi <satish.ravi@valoraapp.com>
Date: Fri, 25 Oct 2024 00:01:51 -0700
Subject: [PATCH 1/2] fix: use the right colors

---
 src/components/SegmentedControl.tsx               |  6 +++---
 src/keylessBackup/KeylessBackupIntro.tsx          |  2 +-
 src/keylessBackup/SignInWithEmail.tsx             | 15 ++++++++++-----
 .../registration/OnboardingRecoveryPhrase.tsx     |  6 +++---
 src/styles/progressDots.ts                        | 13 ++-----------
 5 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/components/SegmentedControl.tsx b/src/components/SegmentedControl.tsx
index 6bb0d84fd08..0a44b054d35 100644
--- a/src/components/SegmentedControl.tsx
+++ b/src/components/SegmentedControl.tsx
@@ -29,7 +29,7 @@ export default function SegmentedControl({ values, selectedIndex = 0, onChange }
     Extrapolation.CLAMP
   )
 
-  const color = interpolateColor(selectedIndex, [0.5, 1], [colors.accent, colors.white])
+  const color = interpolateColor(selectedIndex, [0.5, 1], [colors.black, colors.white])
   const colorInverted = interpolateColor(selectedIndex, [0.5, 1], [colors.white, colors.black])
 
   const onLayout = ({
@@ -118,7 +118,7 @@ const styles = StyleSheet.create({
     height: HEIGHT,
     borderRadius: HEIGHT / 2,
     borderWidth: 1,
-    borderColor: colors.accent,
+    borderColor: colors.black,
     overflow: 'hidden',
     marginHorizontal: 30,
   },
@@ -128,7 +128,7 @@ const styles = StyleSheet.create({
     bottom: 0,
     right: 0,
     left: 0,
-    backgroundColor: colors.accent,
+    backgroundColor: colors.black,
   },
   maskedContainer: {
     // Transparent background because mask is based off alpha channel.
diff --git a/src/keylessBackup/KeylessBackupIntro.tsx b/src/keylessBackup/KeylessBackupIntro.tsx
index 77be5934004..e3c8c7e8d4a 100644
--- a/src/keylessBackup/KeylessBackupIntro.tsx
+++ b/src/keylessBackup/KeylessBackupIntro.tsx
@@ -171,7 +171,7 @@ const styles = StyleSheet.create({
   recoveryPhrase: {
     ...typeScale.labelSemiBoldMedium,
     textAlign: 'center',
-    color: Colors.black,
+    color: Colors.accent,
     margin: Spacing.Thick24,
   },
   button: {
diff --git a/src/keylessBackup/SignInWithEmail.tsx b/src/keylessBackup/SignInWithEmail.tsx
index abd6694a60b..77d980adc8e 100644
--- a/src/keylessBackup/SignInWithEmail.tsx
+++ b/src/keylessBackup/SignInWithEmail.tsx
@@ -10,6 +10,7 @@ import BackButton from 'src/components/BackButton'
 import BottomSheet, { BottomSheetModalRefType } from 'src/components/BottomSheet'
 import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
 import CustomHeader from 'src/components/header/CustomHeader'
+import TextButton from 'src/components/TextButton'
 import AppleIcon from 'src/icons/Apple'
 import GoogleIcon from 'src/icons/Google'
 import { email } from 'src/images/Images'
@@ -255,13 +256,13 @@ function SignInWithEmail({ route }: Props) {
           />
         )}
         {isSetupInOnboarding && (
-          <Button
+          <TextButton
+            style={styles.signInAnotherWay}
             testID="SignInWithEmail/SignInAnotherWay"
             onPress={onPressSignInAnotherWay}
-            size={BtnSizes.FULL}
-            type={BtnTypes.SECONDARY}
-            text={t('signInWithEmail.signInAnotherWay')}
-          />
+          >
+            {t('signInWithEmail.signInAnotherWay')}
+          </TextButton>
         )}
       </View>
       {isSetupInOnboarding && (
@@ -328,4 +329,8 @@ const styles = StyleSheet.create({
   bottomSheetButtonContainer: {
     gap: Spacing.Smallest8,
   },
+  signInAnotherWay: {
+    alignSelf: 'center',
+    marginTop: Spacing.Smallest8,
+  },
 })
diff --git a/src/onboarding/registration/OnboardingRecoveryPhrase.tsx b/src/onboarding/registration/OnboardingRecoveryPhrase.tsx
index a648c4b59ee..99d6e735f9c 100644
--- a/src/onboarding/registration/OnboardingRecoveryPhrase.tsx
+++ b/src/onboarding/registration/OnboardingRecoveryPhrase.tsx
@@ -60,7 +60,7 @@ function OnboardingRecoveryPhrase({ navigation, route }: Props) {
           testID="helpButton"
           title={t('help')}
           onPress={onPressHelp}
-          titleStyle={{ color: colors.black }}
+          titleStyle={{ color: colors.accent }}
         />
       ),
     })
@@ -105,7 +105,7 @@ function OnboardingRecoveryPhrase({ navigation, route }: Props) {
           testID={'protectWalletCopy'}
         >
           <View style={styles.copyIconStyle}>
-            <CopyIcon color={colors.black} />
+            <CopyIcon color={colors.accent} />
           </View>
           {t('recoveryPhrase.copy')}
         </TextButton>
@@ -161,7 +161,7 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     justifyContent: 'center',
     paddingBottom: 30,
-    color: colors.black,
+    color: colors.accent,
   },
   buttonStyle: {
     marginTop: 37,
diff --git a/src/styles/progressDots.ts b/src/styles/progressDots.ts
index bbf2c21d1f3..1610f4d566e 100644
--- a/src/styles/progressDots.ts
+++ b/src/styles/progressDots.ts
@@ -14,19 +14,10 @@ const circle = {
 export default StyleSheet.create({
   circlePassive: {
     ...circle,
-    backgroundColor: colors.gray4,
+    backgroundColor: colors.gray2,
   },
   circleActive: {
     ...circle,
-    backgroundColor: colors.black,
-  },
-  circlePassiveOnboarding: {
-    ...circle,
-    backgroundColor: colors.onboardingBrownLight,
-    opacity: 0.5,
-  },
-  circleActiveOnboarding: {
-    ...circle,
-    backgroundColor: colors.infoDark,
+    backgroundColor: colors.accent,
   },
 })

From 2e7a188690df13a276e9ffdc17001777a343cc2b Mon Sep 17 00:00:00 2001
From: Satish Ravi <satish.ravi@valoraapp.com>
Date: Fri, 25 Oct 2024 15:28:39 -0700
Subject: [PATCH 2/2] fix snapshots

---
 .../__snapshots__/AccountKeyEducation.test.tsx.snap       | 8 ++++----
 src/account/__snapshots__/GoldEducation.test.tsx.snap     | 8 ++++----
 src/home/__snapshots__/NotificationBox.test.tsx.snap      | 8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/account/__snapshots__/AccountKeyEducation.test.tsx.snap b/src/account/__snapshots__/AccountKeyEducation.test.tsx.snap
index 6dc1f07a9de..817cbcbb649 100644
--- a/src/account/__snapshots__/AccountKeyEducation.test.tsx.snap
+++ b/src/account/__snapshots__/AccountKeyEducation.test.tsx.snap
@@ -417,7 +417,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
       <View
         style={
           {
-            "backgroundColor": "#2E3338",
+            "backgroundColor": "#1AB775",
             "borderRadius": 5,
             "flex": 0,
             "height": 5,
@@ -429,7 +429,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
       <View
         style={
           {
-            "backgroundColor": "#666666",
+            "backgroundColor": "#E6E6E6",
             "borderRadius": 5,
             "flex": 0,
             "height": 5,
@@ -441,7 +441,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
       <View
         style={
           {
-            "backgroundColor": "#666666",
+            "backgroundColor": "#E6E6E6",
             "borderRadius": 5,
             "flex": 0,
             "height": 5,
@@ -453,7 +453,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
       <View
         style={
           {
-            "backgroundColor": "#666666",
+            "backgroundColor": "#E6E6E6",
             "borderRadius": 5,
             "flex": 0,
             "height": 5,
diff --git a/src/account/__snapshots__/GoldEducation.test.tsx.snap b/src/account/__snapshots__/GoldEducation.test.tsx.snap
index fe181a1ddc7..29f1dffdb99 100644
--- a/src/account/__snapshots__/GoldEducation.test.tsx.snap
+++ b/src/account/__snapshots__/GoldEducation.test.tsx.snap
@@ -417,7 +417,7 @@ exports[`renders correctly 1`] = `
       <View
         style={
           {
-            "backgroundColor": "#2E3338",
+            "backgroundColor": "#1AB775",
             "borderRadius": 5,
             "flex": 0,
             "height": 5,
@@ -429,7 +429,7 @@ exports[`renders correctly 1`] = `
       <View
         style={
           {
-            "backgroundColor": "#666666",
+            "backgroundColor": "#E6E6E6",
             "borderRadius": 5,
             "flex": 0,
             "height": 5,
@@ -441,7 +441,7 @@ exports[`renders correctly 1`] = `
       <View
         style={
           {
-            "backgroundColor": "#666666",
+            "backgroundColor": "#E6E6E6",
             "borderRadius": 5,
             "flex": 0,
             "height": 5,
@@ -453,7 +453,7 @@ exports[`renders correctly 1`] = `
       <View
         style={
           {
-            "backgroundColor": "#666666",
+            "backgroundColor": "#E6E6E6",
             "borderRadius": 5,
             "flex": 0,
             "height": 5,
diff --git a/src/home/__snapshots__/NotificationBox.test.tsx.snap b/src/home/__snapshots__/NotificationBox.test.tsx.snap
index cf70f4cfc1b..7d812280188 100644
--- a/src/home/__snapshots__/NotificationBox.test.tsx.snap
+++ b/src/home/__snapshots__/NotificationBox.test.tsx.snap
@@ -879,7 +879,7 @@ exports[`NotificationBox renders correctly for with all notifications 1`] = `
     <View
       style={
         {
-          "backgroundColor": "#2E3338",
+          "backgroundColor": "#1AB775",
           "borderRadius": 5,
           "flex": 0,
           "height": 5,
@@ -891,7 +891,7 @@ exports[`NotificationBox renders correctly for with all notifications 1`] = `
     <View
       style={
         {
-          "backgroundColor": "#666666",
+          "backgroundColor": "#E6E6E6",
           "borderRadius": 5,
           "flex": 0,
           "height": 5,
@@ -903,7 +903,7 @@ exports[`NotificationBox renders correctly for with all notifications 1`] = `
     <View
       style={
         {
-          "backgroundColor": "#666666",
+          "backgroundColor": "#E6E6E6",
           "borderRadius": 5,
           "flex": 0,
           "height": 5,
@@ -915,7 +915,7 @@ exports[`NotificationBox renders correctly for with all notifications 1`] = `
     <View
       style={
         {
-          "backgroundColor": "#666666",
+          "backgroundColor": "#E6E6E6",
           "borderRadius": 5,
           "flex": 0,
           "height": 5,