refactor(colors): remove gray3 and update icons to mostly default to …

…textPrimary (#6414) ### Description This PR: 1. replace the last usages of gray3 and remove it from the colors 2. our icons sometimes default to different colors and it's unpredictable, i tried to default all to textPrimary and add additional styling where needed 3. some icons (e.g. LinkArrow) have a non-textPrimary default color where it makes sense 4. there were 2 Help icons, I consolidated them (and copied the newer one from the file in icons/navigator to the file in icons) ### Test plan n/a ### Related issues - Related to RET-1293 ### Backwards compatibility  ### 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 15, 2025 · 135d6bd · 135d6bd
1 parent 554753f
commit 135d6bd
Show file tree

Hide file tree

Showing 25 changed files with 56 additions and 71 deletions.
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
@@ -12,7 +12,7 @@ export default function SearchInput({ style, ...passThroughProps }: Props) {
   return (
     <View style={[styles.container, style]}>
       <View style={styles.iconContainer}>
-        <Search />
+        <Search color={colors.inactive} />
       </View>
       <TextInput {...passThroughProps} inputStyle={styles.input} testID="SearchInput" />
     </View>

diff --git a/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap b/src/components/__snapshots__/PhoneNumberInput.test.tsx.snap
@@ -138,8 +138,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="#757575"
-                stroke="#757575"
+                fill="#2E3338"
+                stroke="#2E3338"
               />
             </svg>
           </View>
@@ -211,4 +211,4 @@ exports[`PhoneNumberInput renders and behaves correctly 1`] = `
     </View>
   </View>
 </View>
-`;
+`;
diff --git a/src/components/__snapshots__/SelectionOption.test.tsx.snap b/src/components/__snapshots__/SelectionOption.test.tsx.snap
@@ -61,7 +61,6 @@ exports[`renders selected correctly 1`] = `
         style={{}}
         viewBox="0 0 20 20"
         width={20}
-        xmlns="http://www.w3.org/2000/svg"
       >
         <circle
           cx="10"
@@ -160,7 +159,6 @@ exports[`renders unselected correctly 1`] = `
         style={{}}
         viewBox="0 0 20 20"
         width={20}
-        xmlns="http://www.w3.org/2000/svg"
       >
         <circle
           cx="10"

diff --git a/src/dappsExplorer/DappCard.tsx b/src/dappsExplorer/DappCard.tsx
@@ -89,7 +89,13 @@ function DappCard({
             hitSlop={favoriteIconHitslop}
             testID={`Dapp/Favorite/${dapp.id}`}
           >
-            {isFavorited ? <Star /> : !disableFavoriting ? <StarOutline /> : <></>}
+            {isFavorited ? (
+              <Star />
+            ) : !disableFavoriting ? (
+              <StarOutline color={Colors.inactive} />
+            ) : (
+              <></>
+            )}
           </Touchable>
         </>
       </Touchable>

diff --git a/src/fiatconnect/KycLanding.tsx b/src/fiatconnect/KycLanding.tsx
@@ -162,7 +162,11 @@ function KycAgreement(props: {
           style={styles.checkBoxContainer}
         >
           {/* If disabled, the user is in step 2 and this should be completed already*/}
-          <CheckBox testID="checkbox" checked={disabled || agreementChecked} />
+          <CheckBox
+            testID="checkbox"
+            checked={disabled || agreementChecked}
+            checkedColor={Colors.accent}
+          />
         </TouchableOpacity>
         <Text style={styles.disclaimer}>
           <Trans i18nKey={'fiatConnectKycLandingScreen.disclaimer'}>

diff --git a/src/icons/ArrowRightThick.tsx b/src/icons/ArrowRightThick.tsx
@@ -7,7 +7,7 @@ interface Props {
   size?: number
 }
 
-const ArrowRightThick = ({ color = colors.gray3, size = 24 }: Props) => (
+const ArrowRightThick = ({ color = colors.textPrimary, size = 24 }: Props) => (
   <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     <Path d="M14 18L12.6 16.55L16.15 13H4V11H16.15L12.6 7.45L14 6L20 12L14 18Z" fill={color} />
   </Svg>

diff --git a/src/icons/CheckBox.tsx b/src/icons/CheckBox.tsx
@@ -12,8 +12,8 @@ type Props = {
 const CheckBox = ({
   checked,
   testID,
-  checkedColor = Colors.accent,
-  uncheckedColor = Colors.gray3,
+  checkedColor = Colors.textPrimary,
+  uncheckedColor = Colors.inactive,
 }: Props) => {
   if (checked)
     return (

diff --git a/src/icons/CrossChainIndicator.tsx b/src/icons/CrossChainIndicator.tsx
@@ -10,7 +10,7 @@ interface Props {
 
 function CrossChainIndicator({
   size = 16,
-  backgroundColor = Colors.gray3,
+  backgroundColor = Colors.textPrimary,
   color = Colors.textInverse,
 }: Props) {
   return (
@@ -27,7 +27,7 @@ function CrossChainIndicator({
       </G>
       <Defs>
         <ClipPath id="a">
-          <Path fill={Colors.textInverse} d="M1 4h14v9H1z" />
+          <Path fill={color} d="M1 4h14v9H1z" />
         </ClipPath>
       </Defs>
     </Svg>

diff --git a/src/icons/DownArrowIcon.tsx b/src/icons/DownArrowIcon.tsx
@@ -13,7 +13,7 @@ interface Props {
 
 export default function DownArrowIcon({
   height,
-  color = colors.gray3,
+  color = colors.textPrimary,
   strokeWidth = 1,
   style = {},
 }: Props) {

diff --git a/src/icons/Envelope.tsx b/src/icons/Envelope.tsx
@@ -19,7 +19,7 @@ export function Envelope({ color, size }: Props) {
 }
 
 Envelope.defaultProps = {
-  color: Colors.gray3,
+  color: Colors.textPrimary,
   size: 24,
 }
 

diff --git a/src/icons/Help.tsx b/src/icons/Help.tsx
@@ -1,16 +1,21 @@
 import * as React from 'react'
-import Svg, { Circle, Path } from 'react-native-svg'
-import Colors from 'src/styles/colors'
+import Svg, { Path } from 'react-native-svg'
+import colors from 'src/styles/colors'
 
-export default function Help({ size = 32, color = Colors.gray3 }) {
+interface Props {
+  color?: string
+  size?: number
+}
+
+export function Help({ color = colors.textPrimary, size = 32 }: Props) {
   return (
-    <Svg testID="Help" width={size} height={size} viewBox="0 0 32 32" fill="none">
-      <Circle cx={16} cy={16} r={11} stroke={color} strokeWidth={2} />
+    <Svg testID="Help" width={size} height={size} viewBox="0 0 24 24" fill="none">
       <Path
-        d="M15.753 19.546a.845.845 0 01-.836-.807c-.02-.482-.023-.962.123-1.415.17-.53.412-.959.726-1.287a5.91 5.91 0 011.13-.907c.395-.248.726-.574.995-.977.27-.403.404-.883.404-1.441 0-.46-.103-.858-.31-1.195a2.113 2.113 0 00-.827-.78 2.42 2.42 0 00-1.15-.275c-.367 0-.721.08-1.062.24-.341.159-.626.41-.854.752a2.136 2.136 0 00-.26.555c-.134.43-.488.787-.938.787-.487 0-.886-.41-.777-.885a3.616 3.616 0 011.908-2.461c.596-.3 1.257-.45 1.983-.45.79 0 1.476.164 2.058.492a3.44 3.44 0 011.359 1.35c.323.572.484 1.223.484 1.954 0 .778-.166 1.444-.498 1.997a4.205 4.205 0 01-1.385 1.392c-.395.258-.71.53-.948.816-.238.28-.41.616-.518 1.005-.066.24-.069.486-.053.734a.746.746 0 01-.754.806z"
         fill={color}
+        d="M11.95 18c.35 0 .646-.12.888-.363.241-.241.362-.537.362-.887s-.12-.646-.362-.887a1.207 1.207 0 0 0-.888-.363c-.35 0-.646.12-.887.363a1.207 1.207 0 0 0-.363.887c0 .35.12.646.363.887.241.242.537.363.887.363Zm-.9-3.85h1.85c0-.55.063-.983.188-1.3.125-.317.479-.75 1.062-1.3a7.494 7.494 0 0 0 1.025-1.238c.25-.391.375-.862.375-1.412 0-.933-.342-1.65-1.025-2.15-.683-.5-1.492-.75-2.425-.75-.95 0-1.72.25-2.313.75-.591.5-1.004 1.1-1.237 1.8l1.65.65c.083-.3.27-.625.563-.975.291-.35.737-.525 1.337-.525.533 0 .933.146 1.2.437.267.292.4.613.4.963 0 .333-.1.646-.3.938-.2.291-.45.562-.75.812-.733.65-1.183 1.142-1.35 1.475-.167.333-.25.942-.25 1.825ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12c0-1.383.263-2.683.788-3.9a10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2c1.383 0 2.683.263 3.9.788a10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z"
       />
-      <Circle cx={15.735} cy={22.099} r={1.098} fill={color} />
     </Svg>
   )
 }
+
+export default React.memo(Help)
diff --git a/src/icons/ImageErrorIcon.tsx b/src/icons/ImageErrorIcon.tsx
@@ -9,7 +9,7 @@ interface Props {
 }
 
 export function ImageErrorIcon({
-  color = colors.gray3,
+  color = colors.inactive,
   size = 88,
   testID = 'ImageErrorIcon',
 }: Props) {

diff --git a/src/icons/LinkArrow.tsx b/src/icons/LinkArrow.tsx
@@ -4,18 +4,19 @@ import Colors from 'src/styles/colors'
 
 interface Props {
   size?: number
+  color?: Colors
 }
 
-const LinkArrow = ({ size = 32 }: Props) => {
+const LinkArrow = ({ color = Colors.textLink, size = 32 }: Props) => {
   return (
     <Svg width={size} height={size} viewBox={`0 0 24 24`} fill="none">
       <Path
         d="M4.5 14.5C4.5 17.2614 6.73858 19.5 9.5 19.5H14.5C17.2614 19.5 19.5 17.2614 19.5 14.5V9.5C19.5 6.73858 17.2614 4.5 14.5 4.5H9.5C6.73858 4.5 4.5 6.73858 4.5 9.5V14.5Z"
-        stroke={Colors.gray3}
+        stroke={color}
       />
       <Path
         d="M8.23381 15.7656L15.1281 8.87132M15.1281 8.87132H10.8855M15.1281 8.87132V13.114"
-        stroke={Colors.gray3}
+        stroke={color}
         strokeLinecap="round"
         strokeLinejoin="round"
       />

diff --git a/src/icons/RadioButton.tsx b/src/icons/RadioButton.tsx
@@ -25,17 +25,11 @@ export default class RadioButton extends React.PureComponent<Props> {
     } else if (this.props.selected) {
       stroke = this.props.color
     } else if (!this.props.selected) {
-      stroke = colors.gray3
+      stroke = colors.inactive
     }
     const fill = this.props.selected && !this.props.disabled ? this.props.color : 'none'
     return (
-      <Svg
-        xmlns="http://www.w3.org/2000/svg"
-        height={this.props.height}
-        width={this.props.height}
-        viewBox="0 0 20 20"
-        fill="none"
-      >
+      <Svg height={this.props.height} width={this.props.height} viewBox="0 0 20 20" fill="none">
         <Circle cx="10" cy="10" r="9" stroke={stroke} strokeWidth={2} />
         <Circle cx="10" cy="10" r="6" fill={fill} />
       </Svg>

diff --git a/src/icons/Search.tsx b/src/icons/Search.tsx
@@ -12,7 +12,7 @@ export default class Search extends React.PureComponent<Props> {
   static defaultProps = {
     width: 14,
     height: 15,
-    color: colors.gray3,
+    color: colors.textPrimary,
   }
 
   render() {

diff --git a/src/icons/StarOutline.tsx b/src/icons/StarOutline.tsx
@@ -2,13 +2,13 @@ import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
 import Colors from 'src/styles/colors'
 
-const Star = () => (
+const StarOutline = ({ color = Colors.textPrimary }: { color?: Colors }) => (
   <Svg width={24} height={24} fill="none">
     <Path
       d="m22.026 9.18-7.379-.636-2.884-6.794L8.88 8.554 1.5 9.181l5.604 4.854L5.42 21.25l6.342-3.828 6.343 3.828-1.673-7.215 5.593-4.854Zm-10.263 6.323-3.859 2.33 1.027-4.393-3.408-2.956 4.495-.39 1.745-4.136 1.755 4.146 4.495.39-3.407 2.956 1.026 4.393-3.869-2.34Z"
-      fill={Colors.gray3}
+      fill={color}
     />
   </Svg>
 )
 
-export default Star
+export default StarOutline
diff --git a/src/icons/TripleDotVertical.tsx b/src/icons/TripleDotVertical.tsx
@@ -6,7 +6,7 @@ interface Props {
   color?: string
 }
 
-const TripleDotVertical = ({ color = Colors.gray3 }: Props) => (
+const TripleDotVertical = ({ color = Colors.textPrimary }: Props) => (
   <Svg width={4} height={16} fill="none">
     <Path
       d="M.688 1.414a1.313 1.313 0 1 0 2.625 0 1.313 1.313 0 0 0-2.626 0Zm0 6.563a1.313 1.313 0 1 0 2.625 0 1.313 1.313 0 0 0-2.626 0Zm0 6.562a1.312 1.312 0 1 0 2.624 0 1.312 1.312 0 0 0-2.624 0Z"

diff --git a/src/icons/navigator/Help.tsx b/src/icons/navigator/Help.tsx
diff --git a/src/images/Star.tsx b/src/images/Star.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg'
 import Colors from 'src/styles/colors'
 
-const StarOutline = () => (
+const Star = () => (
   <Svg width={24} height={24} fill="none">
     <G clipPath="url(#a)">
       <Path
@@ -18,4 +18,4 @@ const StarOutline = () => (
   </Svg>
 )
 
-export default StarOutline
+export default Star
diff --git a/src/navigator/SettingsMenu.tsx b/src/navigator/SettingsMenu.tsx
@@ -34,11 +34,11 @@ import Touchable from 'src/components/Touchable'
 import { STATSIG_ENABLED } from 'src/config'
 import Envelope from 'src/icons/Envelope'
 import ForwardChevron from 'src/icons/ForwardChevron'
+import Help from 'src/icons/Help'
 import Lock from 'src/icons/Lock'
 import Wallet from 'src/icons/navigator/Wallet'
 import Preferences from 'src/icons/Preferences'
 import Stack from 'src/icons/Stack'
-import Help from 'src/icons/navigator/Help'
 import { headerWithCloseButton } from 'src/navigator/Headers'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'

diff --git a/src/styles/colors.tsx b/src/styles/colors.tsx
@@ -48,8 +48,6 @@ enum Colors {
   /** @deprecated */
   gray4 = '#666666',
   /** @deprecated */
-  gray3 = '#757575',
-  /** @deprecated */
   gray2 = '#E6E6E6',
   /** @deprecated */
   gray1 = '#F8F9F9',

diff --git a/src/swap/SwapScreen.tsx b/src/swap/SwapScreen.tsx
@@ -830,7 +830,7 @@ export function SwapScreen({ route }: Props) {
 
           {showCrossChainSwapNotification && (
             <View style={styles.crossChainNotificationWrapper}>
-              <CrossChainIndicator />
+              <CrossChainIndicator backgroundColor={colors.textSecondary} />
               <Text style={styles.crossChainNotification}>
                 {t('swapScreen.crossChainNotification')}
               </Text>
@@ -1155,7 +1155,7 @@ const styles = StyleSheet.create({
   crossChainNotification: {
     ...typeScale.labelXSmall,
     paddingLeft: Spacing.Tiny4,
-    color: colors.gray4,
+    color: colors.textSecondary,
   },
 })
 

diff --git a/src/swap/SwapScreenV2.tsx b/src/swap/SwapScreenV2.tsx
@@ -739,7 +739,7 @@ export default function SwapScreenV2({ route }: Props) {
 
             {showCrossChainSwapNotification && (
               <View style={styles.crossChainNotificationWrapper}>
-                <CrossChainIndicator />
+                <CrossChainIndicator backgroundColor={colors.textSecondary} />
                 <Text style={styles.crossChainNotification}>
                   {t('swapScreen.crossChainNotification')}
                 </Text>
@@ -1101,6 +1101,6 @@ const styles = StyleSheet.create({
   crossChainNotification: {
     ...typeScale.labelXSmall,
     paddingLeft: Spacing.Tiny4,
-    color: colors.gray4,
+    color: colors.textSecondary,
   },
 })
diff --git a/src/tokens/TokenDetails.tsx b/src/tokens/TokenDetails.tsx
@@ -310,7 +310,7 @@ function LearnMore({
           <Text style={styles.learnMoreText} testID="TokenDetails/LearnMore">
             {t('tokenDetails.learnMore', { tokenName: tokenName })}
           </Text>
-          <ArrowRightThick />
+          <ArrowRightThick color={Colors.textLink} />
         </View>
       </Touchable>
     </View>

diff --git a/src/transactions/feed/TransactionDetails.tsx b/src/transactions/feed/TransactionDetails.tsx
@@ -111,7 +111,7 @@ function TransactionDetails({ transaction, title, subtitle, children, retryHandl
             >
               <View style={styles.rowContainer}>
                 <Text style={styles.blockExplorerLink}>{explorerName}</Text>
-                <ArrowRightThick size={16} />
+                <ArrowRightThick size={16} color={Colors.textLink} />
               </View>
             </Touchable>
           </>