fix(wallet-mobile): dapp theme (#3475)

apps/wallet-mobile/src/features/Discover/common/ConfirmConnectionModal.tsx

@@ -54,7 +54,7 @@ export const ConfirmConnectionModal = ({name, website, onConfirm, logo}: Props)
       <View style={styles.imagesLine}>
         <Icon.YoroiApp size={48} />
 
-        <Icon.Connection size={20} color={colors.connection} />
+        <Icon.Connection size={20} color={colors.icon} />
 
         <Image source={{uri: imageUri}} style={styles.image} key={imageUri} />
       </View>
@@ -91,43 +91,43 @@ export const ConfirmConnectionModal = ({name, website, onConfirm, logo}: Props)
 }
 
 const useStyles = () => {
-  const theme = useTheme()
-  const colors = {connection: theme.color.black_static, dAppIconColor: theme.color.gray_c600}
+  const {atoms, color} = useTheme()
+  const colors = {icon: color.el_gray_high}
   const styles = StyleSheet.create({
     imagesLine: {
-      ...theme.atoms.flex,
-      ...theme.atoms.flex_row,
-      ...theme.atoms.align_center,
-      ...theme.atoms.justify_center,
-      ...theme.atoms.gap_xl,
+      ...atoms.flex,
+      ...atoms.flex_row,
+      ...atoms.align_center,
+      ...atoms.justify_center,
+      ...atoms.gap_xl,
     },
     image: {
       width: 48,
       height: 48,
     },
     line: {
-      ...theme.atoms.flex,
-      ...theme.atoms.flex_row,
-      ...theme.atoms.align_center,
-      ...theme.atoms.justify_center,
-      ...theme.atoms.gap_xs,
+      ...atoms.flex,
+      ...atoms.flex_row,
+      ...atoms.align_center,
+      ...atoms.justify_center,
+      ...atoms.gap_xs,
     },
     text: {
-      color: theme.color.gray_c900,
-      ...theme.atoms.body_1_lg_regular,
+      color: color.text_gray_normal,
+      ...atoms.body_1_lg_regular,
     },
     bold: {
-      color: theme.color.gray_c900,
-      ...theme.atoms.body_1_lg_medium,
-      ...theme.atoms.font_semibold,
+      color: color.text_gray_normal,
+      ...atoms.body_1_lg_medium,
+      ...atoms.font_semibold,
     },
     boxDesAllowConnectDApp: {
-      ...theme.atoms.pl_sm,
+      ...atoms.pl_sm,
     },
     root: {
-      flex: 1,
-      ...theme.atoms.px_lg,
+      ...atoms.flex_1,
+      ...atoms.px_lg,
     },
   })
-  return {styles, colors}
+  return {styles, colors} as const
 }

apps/wallet-mobile/src/features/Discover/useCases/BrowseDapp/BrowserSearchToolbar.tsx

@@ -63,21 +63,24 @@ const BackButton = (props: TouchableOpacityProps) => {
 }
 
 const useStyles = () => {
-  const {color} = useTheme()
+  const {color, atoms} = useTheme()
   const styles = StyleSheet.create({
     root: {
-      paddingVertical: 10,
-      paddingHorizontal: 16,
+      ...atoms.px_md,
     },
     boxURI: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      borderRadius: 8,
-      paddingHorizontal: 12,
-      backgroundColor: color.gray_c50,
-      height: 50,
+      minHeight: 64,
+      ...atoms.flex_row,
+      ...atoms.align_center,
+      ...atoms.gap_lg,
+    },
+    searchInputStyle: {
+      color: color.text_gray_max,
+      minHeight: 36,
+      ...atoms.body_1_lg_regular,
+      ...atoms.flex_1,
+      ...atoms.pb_md,
     },
-    searchInputStyle: {flex: 1, color: color.black_static},
   })
 
   return {styles} as const

apps/wallet-mobile/src/features/Discover/useCases/BrowseDapp/BrowserTabsBar.tsx

@@ -81,17 +81,17 @@ const useStyles = () => {
       elevation: 14,
     },
     totalTabsText: {
+      color: color.text_gray_medium,
       ...atoms.body_2_md_medium,
-      color: color.black_static,
     },
     doneText: {
-      color: color.gray_c900,
+      color: color.el_gray_normal,
       ...atoms.body_2_md_medium,
     },
   })
 
   const colors = {
-    iconColor: color.gray_c800,
+    iconColor: color.el_gray_normal,
   }
 
   return {styles, colors} as const