feature(theme) update new theme colors (#3230)

Signed-off-by: Juliano Lazzarotto <30806844+stackchain@users.noreply.github.com> Co-authored-by: Juliano Lazzarotto <30806844+stackchain@users.noreply.github.com> Co-authored-by: banklesss <105349292+banklesss@users.noreply.github.com>
Emurgo · May 9, 2024 · 455a52d · 455a52d
1 parent cc9b356
commit 455a52d
Show file tree

Hide file tree

Showing 94 changed files with 2,309 additions and 1,270 deletions.
diff --git a/apps/wallet-mobile/.storybook/storybook.requires.js b/apps/wallet-mobile/.storybook/storybook.requires.js
diff --git a/apps/wallet-mobile/src/Catalyst/InsufficientFundsModal.tsx b/apps/wallet-mobile/src/Catalyst/InsufficientFundsModal.tsx
@@ -1,6 +1,7 @@
+import {useTheme} from '@yoroi/theme'
 import * as React from 'react'
 import {useIntl} from 'react-intl'
-import {Text, View} from 'react-native'
+import {StyleSheet, Text, View} from 'react-native'
 
 import {StandardModal} from '../components'
 import {useSelectedWallet} from '../features/WalletManager/Context'
@@ -12,6 +13,7 @@ import {Amounts, asQuantity} from '../yoroi-wallets/utils'
 
 export const InsufficientFundsModal = ({visible, onRequestClose}: {visible: boolean; onRequestClose: () => void}) => {
   const strings = useStrings()
+  const styles = useStyles()
   const wallet = useSelectedWallet()
   const balances = useBalances(wallet)
 
@@ -27,7 +29,7 @@ export const InsufficientFundsModal = ({visible, onRequestClose}: {visible: bool
       showCloseIcon
     >
       <View>
-        <Text>
+        <Text style={styles.text}>
           {strings.insufficientBalance({
             requiredBalance: formatTokenWithText(asQuantity(CATALYST.DISPLAYED_MIN_ADA), wallet.primaryToken),
             currentBalance: formatTokenWithText(
@@ -54,3 +56,15 @@ const useStrings = () => {
     back: intl.formatMessage(confirmationMessages.commonButtons.backButton),
   }
 }
+
+const useStyles = () => {
+  const {color} = useTheme()
+
+  const styles = StyleSheet.create({
+    text: {
+      color: color.gray_cmax,
+    },
+  })
+
+  return styles
+}
diff --git a/apps/wallet-mobile/src/Dashboard/EpochProgress.tsx b/apps/wallet-mobile/src/Dashboard/EpochProgress.tsx
@@ -100,7 +100,7 @@ const useStyles = () => {
     timeBlock: {
       ...atoms.body_1_lg_regular,
       ...atoms.py_xs,
-      backgroundColor: color.gray_c900,
+      backgroundColor: color.gray_cmin,
       color: color.gray_c900,
       marginHorizontal: 4,
       borderRadius: 2,

diff --git a/apps/wallet-mobile/src/Legal/PrivacyPolicy/PrivacyPolicy.tsx b/apps/wallet-mobile/src/Legal/PrivacyPolicy/PrivacyPolicy.tsx
@@ -1,3 +1,4 @@
+import {useTheme} from '@yoroi/theme'
 import React from 'react'
 import {ActivityIndicator, StyleSheet, View} from 'react-native'
 import Markdown from 'react-native-markdown-display'
@@ -18,6 +19,7 @@ export const usePrivacyPolicy = ({languageCode}: {languageCode: LanguageCode}) =
 
 export const PrivacyPolicy = ({languageCode}: {languageCode: LanguageCode}) => {
   const privacyPolicy = usePrivacyPolicy({languageCode})
+  const styles = useStyles()
 
   return privacyPolicy != null ? (
     <View>
@@ -31,26 +33,27 @@ export const PrivacyPolicy = ({languageCode}: {languageCode: LanguageCode}) => {
   )
 }
 
-const styles = StyleSheet.create({
-  body: {
-    fontFamily: 'Rubik-Regular',
-    fontSize: 16,
-    lineHeight: 24,
-    color: '#000000',
-    paddingVertical: 8,
-  },
-  heading2: {
-    fontFamily: 'Rubik-Medium',
-    lineHeight: 24,
-    fontSize: 16,
-    color: '#000000',
-    paddingVertical: 8,
-  },
-  heading1: {
-    fontFamily: 'Rubik-Bold',
-    fontSize: 20,
-    lineHeight: 30,
-    color: '#000000',
-    paddingVertical: 10,
-  },
-})
+const useStyles = () => {
+  const {atoms, color} = useTheme()
+  const styles = StyleSheet.create({
+    body: {
+      ...atoms.body_1_lg_regular,
+      ...atoms.py_sm,
+      color: color.gray_cmax,
+    },
+    heading2: {
+      ...atoms.body_1_lg_medium,
+      ...atoms.py_sm,
+      color: color.gray_cmax,
+    },
+    heading1: {
+      fontFamily: 'Rubik-Bold',
+      fontSize: 20,
+      lineHeight: 30,
+      color: color.gray_cmax,
+      paddingVertical: 10,
+    },
+  })
+
+  return styles
+}
diff --git a/apps/wallet-mobile/src/Legal/TermsOfService/TermsOfService.tsx b/apps/wallet-mobile/src/Legal/TermsOfService/TermsOfService.tsx
@@ -1,3 +1,4 @@
+import {useTheme} from '@yoroi/theme'
 import React from 'react'
 import {ActivityIndicator, StyleSheet, View} from 'react-native'
 import Markdown from 'react-native-markdown-display'
@@ -18,6 +19,7 @@ export const useTos = ({languageCode}: {languageCode: LanguageCode}) => {
 
 export const TermsOfService = ({languageCode}: {languageCode: LanguageCode}) => {
   const tos = useTos({languageCode})
+  const styles = useStyles()
 
   return tos != null ? (
     <View>
@@ -31,26 +33,27 @@ export const TermsOfService = ({languageCode}: {languageCode: LanguageCode}) =>
   )
 }
 
-const styles = StyleSheet.create({
-  body: {
-    fontFamily: 'Rubik-Regular',
-    fontSize: 16,
-    lineHeight: 24,
-    color: '#000000',
-    paddingVertical: 8,
-  },
-  heading2: {
-    fontFamily: 'Rubik-Medium',
-    lineHeight: 24,
-    fontSize: 16,
-    color: '#000000',
-    paddingVertical: 8,
-  },
-  heading1: {
-    fontFamily: 'Rubik-Bold',
-    fontSize: 20,
-    lineHeight: 30,
-    color: '#000000',
-    paddingVertical: 10,
-  },
-})
+const useStyles = () => {
+  const {atoms, color} = useTheme()
+  const styles = StyleSheet.create({
+    body: {
+      ...atoms.body_1_lg_regular,
+      ...atoms.py_sm,
+      color: color.gray_cmax,
+    },
+    heading2: {
+      ...atoms.body_1_lg_medium,
+      ...atoms.py_sm,
+      color: color.gray_cmax,
+    },
+    heading1: {
+      fontFamily: 'Rubik-Bold',
+      fontSize: 20,
+      lineHeight: 30,
+      color: color.gray_cmax,
+      paddingVertical: 10,
+    },
+  })
+
+  return styles
+}
diff --git a/apps/wallet-mobile/src/NftDetails/NftDetails.tsx b/apps/wallet-mobile/src/NftDetails/NftDetails.tsx
@@ -264,6 +264,7 @@ const useStyles = () => {
     },
     container: {
       flex: 1,
+      backgroundColor: color.gray_cmin,
     },
     image: {
       flexGrow: 1,
@@ -292,6 +293,7 @@ const useStyles = () => {
     },
     title: {
       ...atoms.body_1_lg_medium,
+      color: color.text_gray_normal,
     },
     name: {
       color: color.gray_c600,

diff --git a/apps/wallet-mobile/src/Search/SearchContext.tsx b/apps/wallet-mobile/src/Search/SearchContext.tsx
@@ -207,6 +207,7 @@ type Props = {
 }
 const InputSearch = ({placeholder}: Props) => {
   const {search, searchChanged} = useSearch()
+  const {color} = useTheme()
 
   return (
     <TextInput
@@ -215,17 +216,22 @@ const InputSearch = ({placeholder}: Props) => {
       placeholder={placeholder}
       onChangeText={(search) => searchChanged(search)}
       autoCapitalize="none"
-      style={{flex: 1, color: '#000000'}}
+      style={{flex: 1, color: color.el_gray_high}}
       testID="inputSearch"
+      placeholderTextColor={color.text_gray_medium}
     />
   )
 }
 
-const SearchButton = (props: TouchableOpacityProps) => (
-  <TouchableOpacity testID="iconSearch" {...props}>
-    <Icon.Magnify size={26} />
-  </TouchableOpacity>
-)
+const SearchButton = (props: TouchableOpacityProps) => {
+  const {color} = useTheme()
+
+  return (
+    <TouchableOpacity testID="iconSearch" {...props}>
+      <Icon.Magnify size={26} color={color.text_gray_normal} />
+    </TouchableOpacity>
+  )
+}
 
 const EraseButton = (props: TouchableOpacityProps) => (
   <TouchableOpacity {...props}>

diff --git a/apps/wallet-mobile/src/TxHistory/TxDetails/TxDetails.tsx b/apps/wallet-mobile/src/TxHistory/TxDetails/TxDetails.tsx
@@ -432,6 +432,7 @@ const useStyles = () => {
   const styles = StyleSheet.create({
     container: {
       flex: 1,
+      backgroundColor: color.gray_cmin,
     },
     contentContainer: {
       ...atoms.px_lg,

diff --git a/apps/wallet-mobile/src/TxHistory/TxHistoryList/TxHistoryListItem.tsx b/apps/wallet-mobile/src/TxHistory/TxHistoryList/TxHistoryListItem.tsx
@@ -27,7 +27,7 @@ type Props = {
 
 export const TxHistoryListItem = ({transaction}: Props) => {
   const strings = useStrings()
-  const {styles, colors} = useStyles()
+  const {styles, colors, isDark} = useStyles()
   const navigation = useNavigation<TxHistoryRouteNavigation>()
 
   const wallet = useSelectedWallet()
@@ -66,7 +66,7 @@ export const TxHistoryListItem = ({transaction}: Props) => {
       onPress={showDetails}
       activeOpacity={0.5}
       testID="txHistoryListItem"
-      style={[styles.item, {backgroundColor: rootBgColor}]}
+      style={[styles.item, {backgroundColor: isDark ? colors.background : rootBgColor}]}
     >
       <Left>
         <Icon.Direction transaction={transaction} />
@@ -134,7 +134,7 @@ const Amount = ({wallet, transaction}: {wallet: YoroiWallet; transaction: Transa
 }
 
 const useStyles = () => {
-  const {color, atoms} = useTheme()
+  const {color, atoms, isDark} = useTheme()
   const styles = StyleSheet.create({
     item: {
       flex: 1,
@@ -166,8 +166,9 @@ const useStyles = () => {
   const colors = {
     default: color.white_static,
     failed: color.primary_c200,
+    background: color.gray_cmin,
   }
-  return {styles, colors}
+  return {styles, colors, isDark}
 }
 
 const messages = defineMessages({

diff --git a/apps/wallet-mobile/src/TxHistory/TxHistoryNavigator.tsx b/apps/wallet-mobile/src/TxHistory/TxHistoryNavigator.tsx
@@ -550,9 +550,10 @@ const useStrings = () => {
 }
 
 const SettingsIconButton = (props: TouchableOpacityProps) => {
+  const {color} = useTheme()
   return (
     <TouchableOpacity {...props}>
-      <Icon.Settings size={30} color={COLORS.BLACK} />
+      <Icon.Settings size={30} color={color.gray_cmax} />
     </TouchableOpacity>
   )
 }

diff --git a/apps/wallet-mobile/src/WalletNavigator.tsx b/apps/wallet-mobile/src/WalletNavigator.tsx
@@ -76,6 +76,7 @@ const WalletTabNavigator = () => {
           tabBarActiveTintColor: colors.active,
           tabBarInactiveTintColor: colors.inactive,
           tabBarStyle: {
+            backgroundColor: colors.background,
             // keyboardWillShow keyboardWillHiden dont work on android
             display: isKeyboardOpen ? 'none' : undefined,
           },
@@ -90,7 +91,10 @@ const WalletTabNavigator = () => {
             tabBarIcon: ({focused}) => <Icon.TabWallet size={24} color={focused ? colors.active : colors.inactive} />,
             tabBarLabel: strings.walletTabBarLabel,
             tabBarTestID: 'walletTabBarButton',
-            tabBarStyle: hideTabBarForRoutes(route),
+            tabBarStyle: {
+              ...hideTabBarForRoutes(route),
+              backgroundColor: colors.background,
+            },
           })}
         >
           {() => (
@@ -122,7 +126,10 @@ const WalletTabNavigator = () => {
               tabBarIcon: ({focused}) => <Icon.Discover size={28} color={focused ? colors.active : colors.inactive} />,
               tabBarLabel: strings.discoverTabBarLabel,
               tabBarTestID: 'discoverTabBarButton',
-              tabBarStyle: hideTabBarForRoutes(route),
+              tabBarStyle: {
+                ...hideTabBarForRoutes(route),
+                backgroundColor: colors.background,
+              },
             })}
           >
             {() => (
@@ -236,8 +243,9 @@ const useStyles = () => {
   const {color} = useTheme()
 
   const colors = {
-    active: color.primary_c600,
+    active: color.text_gray_normal,
     inactive: color.gray_c600,
+    background: color.gray_cmin,
   }
   return {colors}
 }

diff --git a/apps/wallet-mobile/src/assets/img/backspace.png b/apps/wallet-mobile/src/assets/img/backspace.png
diff --git a/apps/wallet-mobile/src/assets/img/backspace@2x.png b/apps/wallet-mobile/src/assets/img/backspace@2x.png
diff --git a/apps/wallet-mobile/src/assets/img/backspace@3x.png b/apps/wallet-mobile/src/assets/img/backspace@3x.png