chore(colors): remove some deprecated colors (#6415)

### Description This PR removes the following colors: - error (replace with errorDark) - ivory (replace with gray1) - accentDisabled (since this is technically part of the colors, i just inlined the opacity in the 2 places that need it) - goldBrand (it wasn't being used except in a loading indicator, which i changed to `accent` like most other loaders) - infoLight (replace with successLight, it is part of the dapp claim shortcuts card and is not so important) ### 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 15, 2025 · 70f2708 · 70f2708
1 parent ffd0eaf
commit 70f2708
Show file tree

Hide file tree

Showing 19 changed files with 20 additions and 37 deletions.
diff --git a/src/backup/QuizzBottom.tsx b/src/backup/QuizzBottom.tsx
@@ -52,6 +52,6 @@ const styles = StyleSheet.create({
   incorrect: {
     ...typeScale.labelMedium,
     textAlign: 'center',
-    color: colors.error,
+    color: colors.errorDark,
   },
 })
diff --git a/src/components/CircleButton.tsx b/src/components/CircleButton.tsx
@@ -20,7 +20,7 @@ export default class CircleButton extends React.PureComponent<ButtonProps> {
     size: 50,
     disable: false,
     activeColor: colors.accent,
-    inactiveColor: colors.accentDisabled,
+    inactiveColor: `${colors.accent}80`,
   }
 
   render() {

diff --git a/src/components/CodeInput.tsx b/src/components/CodeInput.tsx
@@ -43,7 +43,7 @@ export default function CodeInput({
   const textColorForStatus = {
     [CodeInputStatus.Inputting]: colors.textPrimary,
     [CodeInputStatus.Processing]: colors.gray3,
-    [CodeInputStatus.Error]: colors.error,
+    [CodeInputStatus.Error]: colors.errorDark,
     [CodeInputStatus.Accepted]: colors.successDark,
   }
   return (
@@ -85,7 +85,7 @@ export default function CodeInput({
 
           {showError && (
             <AttentionIcon
-              color={colors.error}
+              color={colors.errorDark}
               testId={testID ? `${testID}/ErrorIcon` : undefined}
               size={20}
             />

diff --git a/src/components/CurrencyDisplay.tsx b/src/components/CurrencyDisplay.tsx
@@ -6,7 +6,6 @@ import { LocalCurrencyCode, LocalCurrencySymbol } from 'src/localCurrency/consts
 import { convertCurrencyToLocalAmount } from 'src/localCurrency/convert'
 import { useLocalCurrencyToShow } from 'src/localCurrency/hooks'
 import { CurrencyInfo } from 'src/localCurrency/types'
-import colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { CURRENCIES, Currency } from 'src/utils/currencies'
 import {
@@ -36,7 +35,6 @@ interface Props {
   type: DisplayType
   amount: MoneyAmount
   size: number // only used for DisplayType.Big
-  useColors: boolean
   hideSign: boolean
   hideSymbol: boolean
   hideCode: boolean
@@ -122,7 +120,6 @@ export function getFullCurrencyName(currency: Currency | null) {
 export default function CurrencyDisplay({
   type,
   size,
-  useColors,
   hideSign,
   hideSymbol,
   hideCode,
@@ -164,11 +161,7 @@ export default function CurrencyDisplay({
   const code = displayAmount?.currencyCode
   const fullCurrencyName = getFullCurrencyName(amountCurrency)
 
-  const color = useColors
-    ? amountCurrency === Currency.Celo
-      ? colors.goldBrand
-      : colors.accent
-    : StyleSheet.flatten(style)?.color
+  const color = StyleSheet.flatten(style)?.color
 
   if (type === DisplayType.Big) {
     // In this type the symbol is displayed as superscript
@@ -233,7 +226,6 @@ export default function CurrencyDisplay({
 CurrencyDisplay.defaultProps = {
   type: DisplayType.Default,
   size: 48,
-  useColors: false,
   hideSign: false,
   hideSymbol: false,
   hideCode: true,

diff --git a/src/components/DevSkipButton.tsx b/src/components/DevSkipButton.tsx
@@ -93,7 +93,7 @@ const styles = StyleSheet.create({
     height: 25,
   },
   skipButton: {
-    backgroundColor: colors.error,
+    backgroundColor: colors.errorDark,
   },
   hiddenButton: {
     flex: 1,

diff --git a/src/components/ErrorMessageInline.tsx b/src/components/ErrorMessageInline.tsx
@@ -68,7 +68,7 @@ const styles = StyleSheet.create({
   },
   errorMessage: {
     ...typeScale.bodySmall,
-    color: colors.error,
+    color: colors.errorDark,
   },
 })
 

diff --git a/src/components/PercentageIndicator.tsx b/src/components/PercentageIndicator.tsx
@@ -45,7 +45,7 @@ function PercentageIndicator({
     color = Colors.accent
     indicator = <UpIcon color={color} testID={`${testID}:UpIndicator`} />
   } else if (comparison < 0) {
-    color = Colors.error
+    color = Colors.errorDark
     indicator = <DownIcon color={color} testID={`${testID}:DownIndicator`} />
   } else {
     color = Colors.gray3

diff --git a/src/components/SmartTopAlert.tsx b/src/components/SmartTopAlert.tsx
@@ -156,7 +156,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 25,
   },
   containerError: {
-    backgroundColor: colors.error,
+    backgroundColor: colors.errorDark,
   },
   containerWithButton: {
     flexDirection: 'column',

diff --git a/src/dapps/DappShortcutsRewards.tsx b/src/dapps/DappShortcutsRewards.tsx
@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next'
 import { Image, StyleSheet, Text, View } from 'react-native'
 import Animated from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { DappShortcutsEvents } from 'src/analytics/Events'
 import AppAnalytics from 'src/analytics/AppAnalytics'
+import { DappShortcutsEvents } from 'src/analytics/Events'
 import Button, { BtnSizes } from 'src/components/Button'
 import LegacyTokenDisplay from 'src/components/LegacyTokenDisplay'
 import TokenDisplay from 'src/components/TokenDisplay'
@@ -268,7 +268,7 @@ const styles = StyleSheet.create({
   },
   chip: {
     marginTop: Spacing.Smallest8,
-    backgroundColor: Colors.infoLight,
+    backgroundColor: Colors.successLight,
     paddingVertical: 2,
     paddingHorizontal: Spacing.Smallest8,
     borderRadius: 100,

diff --git a/src/earn/poolInfoScreen/SafetyCard.tsx b/src/earn/poolInfoScreen/SafetyCard.tsx
@@ -29,7 +29,7 @@ function Risk({ risk }: { risk: SafetyRisk }) {
         {risk.isPositive ? (
           <DataUp color={Colors.accent} testID="SafetyCard/RiskPositive" />
         ) : (
-          <DataDown color={Colors.error} testID="SafetyCard/RiskNegative" />
+          <DataDown color={Colors.errorDark} testID="SafetyCard/RiskNegative" />
         )}
       </View>
       <View style={styles.riskTextContainer}>

diff --git a/src/fiatconnect/kyc/KycPending.tsx b/src/fiatconnect/kyc/KycPending.tsx
@@ -41,7 +41,7 @@ function KycPending({ route, navigation }: Props) {
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.iconContainer}>
-        <CircledIcon radius={80} backgroundColor={colors.ivory} style={styles.bankIcon}>
+        <CircledIcon radius={80} backgroundColor={colors.gray1} style={styles.bankIcon}>
           <BankIcon color={colors.textPrimary} height={24} width={24} />
         </CircledIcon>
         <CircledIcon radius={85} backgroundColor={colors.white} style={styles.clockIcon}>

diff --git a/src/icons/DataDown.tsx b/src/icons/DataDown.tsx
@@ -7,7 +7,7 @@ interface Props {
   testID?: string
 }
 
-const DataDown = ({ color = colors.error, testID }: Props) => (
+const DataDown = ({ color = colors.textPrimary, testID }: Props) => (
   <Svg width={10} height={6} viewBox="0 0 10 6" fill="none" testID={testID}>
     <Path d="M5 6L10 -9.53674e-07L4.29138e-07 -7.94466e-08L5 6Z" fill={color} />
   </Svg>

diff --git a/src/icons/ThumbsUpIllustration.tsx b/src/icons/ThumbsUpIllustration.tsx
@@ -9,7 +9,7 @@ export interface Props {
 const ThumbsUpIllustration = ({ size = 72 }: Props) => (
   <Svg width={size} height={size} fill="none" viewBox="0 0 72 72">
     <Path
-      fill={Colors.accentDisabled}
+      fill={`${Colors.accent}80`}
       fill-rule="evenodd"
       d="M22.95 36.138c3.475-7.578-.332-20.911 13.982-18.603 14.466 2.332 18.973 15.283 24.031 24.732 3.496 6.532 4.065 12.679-2.324 15.822-12.112 5.958-27.096 16.644-43.348 6.647-16.057-9.875 3.113-18.682 7.66-28.598Z"
       clip-rule="evenodd"

diff --git a/src/pincode/Pincode.tsx b/src/pincode/Pincode.tsx
@@ -81,7 +81,7 @@ const styles = StyleSheet.create({
   },
   error: {
     ...typeScale.labelMedium,
-    color: colors.error,
+    color: colors.errorDark,
     textAlign: 'center',
     marginBottom: Spacing.Thick24,
   },

diff --git a/src/priceHistory/PriceHistoryChart.tsx b/src/priceHistory/PriceHistoryChart.tsx
@@ -31,7 +31,7 @@ const CHART_MIN_VERTICAL_RANGE = 0.01 // one cent
 const CHART_DOMAIN_PADDING = { y: [30, 30] as [number, number], x: [5, 5] as [number, number] }
 const CHART_STEP_IN_HOURS = 12
 
-function Loader({ color = colors.goldBrand, style }: { color?: colors; style?: ViewStyle }) {
+function Loader({ color = colors.accent, style }: { color?: colors; style?: ViewStyle }) {
   return (
     <View style={[styles.loader, style]}>
       <ActivityIndicator testID="PriceHistoryChart/Loader" size="large" color={color} />

diff --git a/src/shared/DisconnectBanner.tsx b/src/shared/DisconnectBanner.tsx
@@ -72,7 +72,7 @@ const styles = StyleSheet.create({
     color: colors.gray4,
   },
   textRed: {
-    color: colors.error,
+    color: colors.errorDark,
   },
 })
 

diff --git a/src/styles/colors.tsx b/src/styles/colors.tsx
@@ -27,7 +27,6 @@ enum Colors {
   successLight = '#F1FDF1',
   warningDark = '#9C6E00',
   warningLight = '#FFF9EA',
-  error = '#EA6042',
   errorDark = '#C93717',
   errorLight = '#FBF2F0',
   gradientBorderLeft = '#26d98a',
@@ -36,14 +35,6 @@ enum Colors {
   /** @deprecated */
   infoDark = '#0768AE',
   /** @deprecated */
-  infoLight = '#E8F8FF',
-  /** @deprecated */
-  ivory = '#F9F6F0',
-  /** @deprecated */
-  accentDisabled = `${accent}80`, // 50% opacity
-  /** @deprecated */
-  goldBrand = '#FBCC5C',
-  /** @deprecated */
   onboardingBrownLight = '#A49B80',
   /** @deprecated */
   white = '#FFFFFF',

diff --git a/src/swap/SwapAmountInput.tsx b/src/swap/SwapAmountInput.tsx
@@ -189,7 +189,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   inputError: {
-    color: Colors.error,
+    color: Colors.errorDark,
   },
   inputText: {
     ...typeScale.titleSmall,

diff --git a/src/tokens/TokenImport.tsx b/src/tokens/TokenImport.tsx
@@ -375,6 +375,6 @@ const styles = StyleSheet.create({
   },
   errorLabel: {
     ...typeScale.labelSmall,
-    color: Colors.error,
+    color: Colors.errorDark,
   },
 })