[Wallet] Migrate all colors to v2 (#4575)

### Description This PR migrate usage of old `colors` to `colors.v2` and then renames `colors.v2` to just `colors`, so v2 now is the only version and a default one. All colors, which were not in the `colors.v2` are replaced with similar ones. ### Tested `yarn build` and `yarn test` ### Backwards compatibility Yes
celo-org · Aug 11, 2020 · 390b57a · 390b57a
1 parent 3a600ec
commit 390b57a
Show file tree

Hide file tree

Showing 186 changed files with 353 additions and 439 deletions.
diff --git a/packages/mobile/branding/celo/src/icons/Logo.v2.tsx b/packages/mobile/branding/celo/src/icons/Logo.v2.tsx
@@ -1,4 +1,4 @@
-import colors from '@celo/react-components/styles/colors.v2'
+import colors from '@celo/react-components/styles/colors'
 import * as React from 'react'
 import Svg, { Path } from 'svgs'
 

diff --git a/packages/mobile/src/account/Education.tsx b/packages/mobile/src/account/Education.tsx
@@ -1,7 +1,7 @@
 import Button, { BtnTypes } from '@celo/react-components/components/Button.v2'
 import BackChevron from '@celo/react-components/icons/BackChevron.v2'
 import Times from '@celo/react-components/icons/Times'
-import colors from '@celo/react-components/styles/colors.v2'
+import colors from '@celo/react-components/styles/colors'
 import fontStyles from '@celo/react-components/styles/fonts.v2'
 import progressDots from '@celo/react-components/styles/progressDots'
 import * as React from 'react'

diff --git a/packages/mobile/src/account/FiatExchange.tsx b/packages/mobile/src/account/FiatExchange.tsx
@@ -1,5 +1,5 @@
 import ListItem from '@celo/react-components/components/ListItem'
-import colors from '@celo/react-components/styles/colors.v2'
+import colors from '@celo/react-components/styles/colors'
 import fontStyles from '@celo/react-components/styles/fonts.v2'
 import variables from '@celo/react-components/styles/variables'
 import { CURRENCIES, CURRENCY_ENUM } from '@celo/utils/src'
@@ -93,7 +93,7 @@ const styles = StyleSheet.create({
     color: colors.gray4,
   },
   option: {
-    backgroundColor: colors.background,
+    backgroundColor: colors.light,
   },
 
   optionTitle: {

diff --git a/packages/mobile/src/account/Invite.tsx b/packages/mobile/src/account/Invite.tsx
@@ -171,7 +171,7 @@ const style = StyleSheet.create({
   },
   textInputContainer: {
     paddingBottom: 5,
-    borderBottomColor: colors.listBorder,
+    borderBottomColor: colors.gray2,
     borderBottomWidth: 1,
   },
 })

diff --git a/packages/mobile/src/account/InviteReview.tsx b/packages/mobile/src/account/InviteReview.tsx
@@ -164,7 +164,7 @@ export class InviteReview extends React.Component<Props, State> {
         />
         {inviteInProgress && (
           <View style={styles.loadingIcon}>
-            <ActivityIndicator size="large" color={colors.celoGreen} />
+            <ActivityIndicator size="large" color={colors.greenBrand} />
           </View>
         )}
       </View>
@@ -274,7 +274,7 @@ const styles = StyleSheet.create({
     bottom: 0,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: colors.background,
+    backgroundColor: colors.light,
   },
 })
 

diff --git a/packages/mobile/src/account/Settings.tsx b/packages/mobile/src/account/Settings.tsx
@@ -3,7 +3,7 @@ import {
   SettingsItemSwitch,
   SettingsItemTextValue,
 } from '@celo/react-components/components/SettingsItem'
-import colors from '@celo/react-components/styles/colors.v2'
+import colors from '@celo/react-components/styles/colors'
 import fontStyles from '@celo/react-components/styles/fonts.v2'
 import { isE164Number } from '@celo/utils/src/phoneNumbers'
 import { StackScreenProps } from '@react-navigation/stack'

diff --git a/packages/mobile/src/account/SupportContact.tsx b/packages/mobile/src/account/SupportContact.tsx
@@ -2,7 +2,7 @@ import Button, { BtnTypes } from '@celo/react-components/components/Button.v2'
 import KeyboardSpacer from '@celo/react-components/components/KeyboardSpacer'
 import Switch from '@celo/react-components/components/Switch'
 import TextInput from '@celo/react-components/components/TextInput.v2'
-import colors from '@celo/react-components/styles/colors.v2'
+import colors from '@celo/react-components/styles/colors'
 import fontStyles from '@celo/react-components/styles/fonts.v2'
 import { anonymizedPhone } from '@celo/utils/src/phoneNumbers'
 import React, { useCallback, useState } from 'react'
@@ -154,7 +154,7 @@ function SupportContact() {
         </View>
         {inProgress && (
           <View style={styles.loadingSpinnerContainer} testID="ImportWalletLoadingCircle">
-            <ActivityIndicator size="large" color={colors.celoGreen} />
+            <ActivityIndicator size="large" color={colors.greenBrand} />
           </View>
         )}
 

diff --git a/packages/mobile/src/account/__snapshots__/Invite.test.tsx.snap b/packages/mobile/src/account/__snapshots__/Invite.test.tsx.snap
@@ -89,7 +89,7 @@ exports[`Invite renders correctly with no recipients 1`] = `
   <View
     style={
       Object {
-        "borderBottomColor": "rgba(134, 138, 141, 0.15)",
+        "borderBottomColor": "#EDEEEF",
         "borderBottomWidth": 1,
         "paddingBottom": 5,
       }
@@ -394,7 +394,7 @@ exports[`Invite renders correctly with recipients 1`] = `
   <View
     style={
       Object {
-        "borderBottomColor": "rgba(134, 138, 141, 0.15)",
+        "borderBottomColor": "#EDEEEF",
         "borderBottomWidth": 1,
         "paddingBottom": 5,
       }

diff --git a/packages/mobile/src/account/__snapshots__/InviteReview.test.tsx.snap b/packages/mobile/src/account/__snapshots__/InviteReview.test.tsx.snap
@@ -270,7 +270,7 @@ exports[`InviteReview renders correctly 1`] = `
                 style={
                   Object {
                     "borderStyle": "solid",
-                    "borderTopColor": "#EEEEEE",
+                    "borderTopColor": "#F8F9F9",
                     "borderTopWidth": 1,
                     "marginBottom": 15,
                     "marginTop": 10,
@@ -422,7 +422,7 @@ exports[`InviteReview renders correctly 1`] = `
                       style={
                         Object {
                           "height": 12,
-                          "tintColor": "#BDBDBD",
+                          "tintColor": "#B4B9BD",
                           "width": 12,
                         }
                       }
@@ -652,7 +652,7 @@ exports[`InviteReview renders correctly 1`] = `
                 style={
                   Object {
                     "borderStyle": "solid",
-                    "borderTopColor": "#EEEEEE",
+                    "borderTopColor": "#F8F9F9",
                     "borderTopWidth": 1,
                     "marginBottom": 15,
                     "marginTop": 10,

diff --git a/packages/mobile/src/account/__snapshots__/Settings.test.tsx.snap b/packages/mobile/src/account/__snapshots__/Settings.test.tsx.snap
@@ -960,7 +960,7 @@ exports[`Account renders correctly 1`] = `
                         "lineHeight": 18,
                       },
                       Object {
-                        "color": "rgba(0, 0, 0, .4)",
+                        "color": "#81868B",
                         "fontFamily": "Hind-SemiBold",
                         "fontSize": 16,
                         "lineHeight": 24,
@@ -1164,7 +1164,7 @@ exports[`Account renders correctly 1`] = `
                         "lineHeight": 18,
                       },
                       Object {
-                        "color": "rgba(0, 0, 0, .4)",
+                        "color": "#81868B",
                         "fontFamily": "Hind-SemiBold",
                         "fontSize": 16,
                         "lineHeight": 24,
@@ -2389,7 +2389,7 @@ exports[`Account renders correctly when dev mode active 1`] = `
                         "lineHeight": 18,
                       },
                       Object {
-                        "color": "rgba(0, 0, 0, .4)",
+                        "color": "#81868B",
                         "fontFamily": "Hind-SemiBold",
                         "fontSize": 16,
                         "lineHeight": 24,
@@ -2593,7 +2593,7 @@ exports[`Account renders correctly when dev mode active 1`] = `
                         "lineHeight": 18,
                       },
                       Object {
-                        "color": "rgba(0, 0, 0, .4)",
+                        "color": "#81868B",
                         "fontFamily": "Hind-SemiBold",
                         "fontSize": 16,
                         "lineHeight": 24,

diff --git a/packages/mobile/src/account/__snapshots__/SupportContact.test.tsx.snap b/packages/mobile/src/account/__snapshots__/SupportContact.test.tsx.snap
@@ -129,7 +129,7 @@ exports[`Contact renders correctly 1`] = `
           }
           testID="SwitchLogs"
           thumbTintColor="#FFFFFF"
-          trackColorForFalse="#D1D5D8"
+          trackColorForFalse="#9CA4A9"
           trackColorForTrue="#42D689"
           trackTintColor="#42D689"
         />

diff --git a/packages/mobile/src/alert/__snapshots__/AlertBanner.test.tsx.snap b/packages/mobile/src/alert/__snapshots__/AlertBanner.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`AlertBanner when error message passed in renders error message 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#FD785B",
+        "backgroundColor": "#EA6042",
         "flexDirection": "row",
         "justifyContent": "center",
         "paddingBottom": 10,
@@ -119,7 +119,7 @@ exports[`AlertBanner when message and title passed in renders title with message
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#3C9BF4",
+        "backgroundColor": "#0768AE",
         "flexDirection": "row",
         "justifyContent": "center",
         "paddingBottom": 10,
@@ -198,7 +198,7 @@ exports[`AlertBanner when message passed in renders message 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#3C9BF4",
+        "backgroundColor": "#0768AE",
         "flexDirection": "row",
         "justifyContent": "center",
         "paddingBottom": 10,

diff --git a/packages/mobile/src/app/AppLoading.tsx b/packages/mobile/src/app/AppLoading.tsx
@@ -65,7 +65,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flex: 1,
     width: '100%',
-    backgroundColor: colors.celoGreen,
+    backgroundColor: colors.greenBrand,
   },
 
   button: {

diff --git a/packages/mobile/src/backup/BackupIntroduction.tsx b/packages/mobile/src/backup/BackupIntroduction.tsx
@@ -1,6 +1,6 @@
 import Button from '@celo/react-components/components/Button.v2'
 import TextButton from '@celo/react-components/components/TextButton.v2'
-import { default as colors, default as colorsV2 } from '@celo/react-components/styles/colors.v2'
+import colors from '@celo/react-components/styles/colors'
 import fontStyles from '@celo/react-components/styles/fonts.v2'
 import { Spacing } from '@celo/react-components/styles/styles.v2'
 import { StackScreenProps } from '@react-navigation/stack'
@@ -150,7 +150,7 @@ const styles = StyleSheet.create({
   },
   keyArea: {
     padding: Spacing.Regular16,
-    backgroundColor: colorsV2.beige,
+    backgroundColor: colors.beige,
     marginTop: Spacing.Regular16,
   },
   postSetupBody: {

diff --git a/packages/mobile/src/backup/BackupPhraseContainer.tsx b/packages/mobile/src/backup/BackupPhraseContainer.tsx
@@ -1,6 +1,6 @@
 import Touchable from '@celo/react-components/components/Touchable'
 import withTextInputPasteAware from '@celo/react-components/components/WithTextInputPasteAware'
-import colors from '@celo/react-components/styles/colors.v2'
+import colors from '@celo/react-components/styles/colors'
 import fontStyles from '@celo/react-components/styles/fonts.v2'
 import * as React from 'react'
 import { WithTranslation } from 'react-i18next'
@@ -110,7 +110,7 @@ export class BackupPhraseContainer extends React.Component<Props> {
                   : isValidSocialBackupPhrase
               }
               underlineColorAndroid="transparent"
-              placeholderTextColor={colors.inactive}
+              placeholderTextColor={colors.gray4}
               enablesReturnKeyAutomatically={true}
               multiline={true}
               autoCorrect={false}
@@ -161,7 +161,7 @@ const styles = StyleSheet.create({
   phraseInputText: {
     ...fontStyles.regular,
     borderWidth: 1,
-    borderColor: colors.inputBorder,
+    borderColor: colors.gray2,
     borderRadius: 4,
     minHeight: 125,
     padding: 14,

diff --git a/packages/mobile/src/backup/BackupQuiz.tsx b/packages/mobile/src/backup/BackupQuiz.tsx
@@ -1,7 +1,7 @@
 import TextButton from '@celo/react-components/components/TextButton.v2'
 import Touchable from '@celo/react-components/components/Touchable'
 import Backspace from '@celo/react-components/icons/Backspace'
-import colors from '@celo/react-components/styles/colors.v2'
+import colors from '@celo/react-components/styles/colors'
 import fontStyles from '@celo/react-components/styles/fonts.v2'
 import { StackNavigationOptions, StackScreenProps } from '@react-navigation/stack'
 import { chunk, flatMap, shuffle, times } from 'lodash'

diff --git a/packages/mobile/src/backup/CancelConfirm.tsx b/packages/mobile/src/backup/CancelConfirm.tsx
@@ -1,4 +1,4 @@
-import colorsV2 from '@celo/react-components/styles/colors.v2'
+import colors from '@celo/react-components/styles/colors'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet } from 'react-native'
@@ -55,6 +55,6 @@ export default function CancelConfirm({ screen }: Props) {
 
 const styles = StyleSheet.create({
   button: {
-    color: colorsV2.gray4,
+    color: colors.gray4,
   },
 })
diff --git a/packages/mobile/src/backup/DelayButton.tsx b/packages/mobile/src/backup/DelayButton.tsx
@@ -1,4 +1,4 @@
-import colors from '@celo/react-components/styles/colors.v2'
+import colors from '@celo/react-components/styles/colors'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, View } from 'react-native'

diff --git a/packages/mobile/src/backup/QuizzBottom.tsx b/packages/mobile/src/backup/QuizzBottom.tsx
@@ -1,5 +1,5 @@
 import Button, { BtnSizes, BtnTypes } from '@celo/react-components/components/Button.v2'
-import colors from '@celo/react-components/styles/colors.v2'
+import colors from '@celo/react-components/styles/colors'
 import fonts from '@celo/react-components/styles/fonts.v2'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'

diff --git a/packages/mobile/src/backup/__snapshots__/BackupSocial.test.tsx.snap b/packages/mobile/src/backup/__snapshots__/BackupSocial.test.tsx.snap
@@ -395,9 +395,9 @@ exports[`BackupSocialIntro renders correctly when social backup is not complete
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           thumbTintColor="#FFFFFF"
-          trackColorForFalse="#D1D5D8"
+          trackColorForFalse="#9CA4A9"
           trackColorForTrue="#42D689"
-          trackTintColor="#D1D5D8"
+          trackTintColor="#9CA4A9"
         />
         <Text
           style={
@@ -429,7 +429,7 @@ exports[`BackupSocialIntro renders correctly when social backup is not complete
         null,
         undefined,
         Object {
-          "backgroundColor": "#A3EBC6",
+          "backgroundColor": "#97DFC1",
         },
       ]
     }
@@ -458,7 +458,7 @@ exports[`BackupSocialIntro renders correctly when social backup is not complete
             "justifyContent": "center",
           },
           Object {
-            "backgroundColor": "#A3EBC6",
+            "backgroundColor": "#97DFC1",
           },
           Object {
             "height": 50,

diff --git a/packages/mobile/src/components/AccountNumber.tsx b/packages/mobile/src/components/AccountNumber.tsx
@@ -1,4 +1,4 @@
-import colors from '@celo/react-components/styles/colors.v2'
+import colors from '@celo/react-components/styles/colors'
 import fontStyles from '@celo/react-components/styles/fonts.v2'
 import { getAddressChunks } from '@celo/utils/src/address'
 import React from 'react'

diff --git a/packages/mobile/src/components/CancelButton.v2.tsx b/packages/mobile/src/components/CancelButton.v2.tsx
@@ -1,4 +1,4 @@
-import colors from '@celo/react-components/styles/colors.v2'
+import colors from '@celo/react-components/styles/colors'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleProp, StyleSheet, TextStyle } from 'react-native'

diff --git a/packages/mobile/src/components/CodeInput.tsx b/packages/mobile/src/components/CodeInput.tsx
@@ -1,7 +1,7 @@
 import Card from '@celo/react-components/components/Card'
 import TextInput from '@celo/react-components/components/TextInput.v2'
 import Checkmark from '@celo/react-components/icons/Checkmark'
-import colors from '@celo/react-components/styles/colors.v2'
+import colors from '@celo/react-components/styles/colors'
 import fontStyles from '@celo/react-components/styles/fonts.v2'
 import { Shadow, Spacing } from '@celo/react-components/styles/styles.v2'
 import React, { useLayoutEffect } from 'react'