refactor(colors): replace deprecated blue and gold colours with seman…

…tic counterparts (#6419) ### Description This PR removes infoDark and onboardingBrownLight: 1. onboardingBrownLight was used mostly as text, so replaced with textSecondary 2. infoDark was replaced with warning when it was used for no results messages 3. infoDark was used to show the "bridged via X" text in the tokens list, replaced with textSecondary with increased font weight Also fixed a couple of display bugs along the way: - flag and arrow on the phone verification screen are now aligned horizontally again - pincode text hierarchy fixed (before there were 2 lines of titleMedium) - no results text on the token bottom sheet padding fixed ### Test plan n/a ### Related issues - Related to RET-1293 ### Backwards compatibility Y ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [ ] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added)
valora-inc · Jan 16, 2025 · 5db161b · 5db161b
1 parent 4079e7d
commit 5db161b
Show file tree

Hide file tree

Showing 17 changed files with 27 additions and 32 deletions.
diff --git a/src/components/Expandable.tsx b/src/components/Expandable.tsx
@@ -53,6 +53,5 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    flexWrap: 'wrap',
   },
 })
diff --git a/src/components/FormLabel.tsx b/src/components/FormLabel.tsx
@@ -15,6 +15,6 @@ export default function FormLabel({ style, children }: Props) {
 const styles = StyleSheet.create({
   container: {
     ...typeScale.labelSemiBoldSmall,
-    color: colors.onboardingBrownLight,
+    color: colors.textSecondary,
   },
 })
diff --git a/src/components/FormUnderline.tsx b/src/components/FormUnderline.tsx
@@ -9,7 +9,7 @@ export default function FormUnderline() {
 const styles = StyleSheet.create({
   container: {
     height: 1,
-    backgroundColor: colors.onboardingBrownLight,
+    backgroundColor: colors.textSecondary,
     opacity: 0.2,
   },
 })
diff --git a/src/components/InfoBottomSheet.tsx b/src/components/InfoBottomSheet.tsx
@@ -54,6 +54,6 @@ const styles = StyleSheet.create({
     marginTop: 37,
     marginBottom: 9,
     textAlign: 'center',
-    color: colors.onboardingBrownLight,
+    color: colors.textSecondary,
   },
 })
diff --git a/src/components/PhoneNumberInput.tsx b/src/components/PhoneNumberInput.tsx
@@ -108,6 +108,7 @@ export default function PhoneNumberInput({
               isExpandable={editable}
               isExpanded={false}
               containerStyle={styles.countryFlagContainer}
+              arrowColor={colors.textSecondary}
             >
               <Text style={styles.flag} testID={'countryCodeFlag'}>
                 {flagEmoji}

diff --git a/src/components/RecoveryPhraseInput.tsx b/src/components/RecoveryPhraseInput.tsx
@@ -171,7 +171,7 @@ const styles = StyleSheet.create({
   },
   labelLong: {
     ...typeScale.labelSemiBoldSmall,
-    color: colors.onboardingBrownLight,
+    color: colors.textSecondary,
     opacity: 0.5,
     marginBottom: 4,
   },
@@ -180,7 +180,7 @@ const styles = StyleSheet.create({
   },
   codeValueLong: {
     ...typeScale.bodyMedium,
-    color: colors.onboardingBrownLight,
+    color: colors.textSecondary,
   },
   statusContainer: {
     width: 32,

diff --git a/src/components/SmartTopAlert.tsx b/src/components/SmartTopAlert.tsx
@@ -151,7 +151,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: colors.infoDark,
+    backgroundColor: colors.warning,
     paddingBottom: PADDING_VERTICAL,
     paddingHorizontal: 25,
   },

diff --git a/src/components/TokenBottomSheet.tsx b/src/components/TokenBottomSheet.tsx
@@ -104,7 +104,7 @@ function NoResults({
   return (
     <View testID={testID} style={styles.noResultsContainer}>
       <View style={styles.iconContainer}>
-        <InfoIcon color={Colors.infoDark} />
+        <InfoIcon color={Colors.warning} />
       </View>
       <Text style={styles.noResultsText}>
         {t(noResultsText, { searchTerm: searchTerm, filterNames: activeFilterNames.join(', ') })}
@@ -386,10 +386,9 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   noResultsContainer: {
-    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    marginVertical: Spacing.Regular16,
+    margin: Spacing.Thick24,
   },
   tokenBalanceItemContainer: {
     marginHorizontal: Spacing.Thick24,

diff --git a/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap b/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`PhoneNumberInput renders and behaves correctly 1`] = `
     style={
       [
         {
-          "color": "#A49B80",
+          "color": "#757575",
           "fontFamily": "Inter-SemiBold",
           "fontSize": 14,
           "lineHeight": 20,
@@ -97,7 +97,6 @@ exports[`PhoneNumberInput renders and behaves correctly 1`] = `
               {
                 "alignItems": "center",
                 "flexDirection": "row",
-                "flexWrap": "wrap",
               },
               {
                 "justifyContent": "center",
@@ -138,8 +137,8 @@ exports[`PhoneNumberInput renders and behaves correctly 1`] = `
             >
               <path
                 d="m16.59 8.707.703.703L12 14.703 6.707 9.41l.703-.703 4.237 4.227.353.352.353-.352 4.237-4.227Z"
-                fill="#2E3338"
-                stroke="#2E3338"
+                fill="#757575"
+                stroke="#757575"
               />
             </svg>
           </View>
@@ -202,7 +201,7 @@ exports[`PhoneNumberInput renders and behaves correctly 1`] = `
       <View
         style={
           {
-            "backgroundColor": "#A49B80",
+            "backgroundColor": "#757575",
             "height": 1,
             "opacity": 0.2,
           }

diff --git a/src/components/__snapshots__/SmartTopAlert.test.tsx.snap b/src/components/__snapshots__/SmartTopAlert.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`SmartTopAlert renders correctly 1`] = `
       [
         {
           "alignItems": "center",
-          "backgroundColor": "#0768AE",
+          "backgroundColor": "#9C6E00",
           "flexDirection": "row",
           "justifyContent": "center",
           "paddingBottom": 10,

diff --git a/src/dappsExplorer/NoResults.tsx b/src/dappsExplorer/NoResults.tsx
@@ -34,7 +34,7 @@ function NoResults({ selectedFilter, removeFilter, testID, searchTerm }: Props)
       {searchTerm !== '' && (
         <View style={styles.searchContainer}>
           <View style={styles.iconContainer}>
-            <InfoIcon color={Colors.infoDark} />
+            <InfoIcon color={Colors.warning} />
           </View>
           <View style={styles.searchTextContainer}>
             <Text style={styles.text}>
@@ -101,7 +101,7 @@ const styles = StyleSheet.create({
   },
   filterText: {
     ...typeScale.labelSmall,
-    color: Colors.infoDark,
+    color: Colors.textSecondary,
   },
   filterAppliedText: {
     ...typeScale.labelSmall,
@@ -120,7 +120,6 @@ const styles = StyleSheet.create({
   },
   removeFilterText: {
     ...typeScale.labelSmall,
-    color: Colors.infoDark,
   },
 })
 

diff --git a/src/invite/InviteModal.tsx b/src/invite/InviteModal.tsx
@@ -118,7 +118,7 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   helpLink: {
-    color: colors.infoDark,
+    color: colors.textLink,
     flexWrap: 'wrap',
     textDecorationLine: 'underline',
   },

diff --git a/src/nfts/NftsLoadError.tsx b/src/nfts/NftsLoadError.tsx
@@ -79,7 +79,7 @@ const styles = StyleSheet.create({
     padding: Spacing.Regular16,
   },
   contactSupportLink: {
-    color: colors.infoDark,
+    color: colors.textLink,
     textDecorationLine: 'underline',
   },
   contentContainerStyle: {

diff --git a/src/pincode/Pincode.tsx b/src/pincode/Pincode.tsx
@@ -91,7 +91,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   subtitle: {
-    ...typeScale.titleMedium,
+    ...typeScale.labelMedium,
     textAlign: 'center',
   },
   title: {

diff --git a/src/styles/colors.tsx b/src/styles/colors.tsx
@@ -39,10 +39,6 @@ enum Colors {
   gradientBorderLeft = '#26d98a',
   gradientBorderRight = '#ffd52c',
 
-  /** @deprecated */
-  infoDark = '#0768AE',
-  /** @deprecated */
-  onboardingBrownLight = '#A49B80',
   /** @deprecated */
   gray5 = '#505050',
   /** @deprecated */

diff --git a/src/tokens/TokenBalanceItem.tsx b/src/tokens/TokenBalanceItem.tsx
@@ -73,11 +73,7 @@ export const TokenBalanceItem = ({
           )}
         </View>
         {!!token.bridge && (
-          <Text
-            testID="BridgeLabel"
-            numberOfLines={1}
-            style={[styles.subLabel, { color: colors.infoDark }]}
-          >
+          <Text testID="BridgeLabel" numberOfLines={1} style={styles.bridgeLabel}>
             {t('assets.bridge', { bridge: token.bridge })}
           </Text>
         )}
@@ -129,6 +125,12 @@ const styles = StyleSheet.create({
     flexShrink: 1,
     color: colors.textSecondary,
   },
+  bridgeLabel: {
+    ...typeScale.labelSmall,
+    color: colors.textSecondary,
+    overflow: 'hidden',
+    flexShrink: 1,
+  },
   textContainer: {
     flex: 1,
     gap: 2,

diff --git a/src/verify/ResendButtonWithDelay.tsx b/src/verify/ResendButtonWithDelay.tsx
@@ -41,7 +41,7 @@ function ResendButtonWithDelay({ onPress }: Props) {
       testID="PhoneVerificationResendSmsBtn"
       disabled={disabled}
       style={{
-        color: disabled ? colors.gray2 : colors.onboardingBrownLight,
+        color: disabled ? colors.gray2 : colors.textSecondary,
         fontVariant: ['tabular-nums'],
       }}
       onPress={handleOnPress}