refactor(wallet-mobile): create + restore p_b (#3468)

apps/wallet-mobile/src/components/KeyboardAvoidingView/KeyboardAvoidingView.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import {KeyboardAvoidingView as RNKeyboardAvoidingView, KeyboardAvoidingViewProps, Platform} from 'react-native'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
 export const KeyboardAvoidingView = ({
   children,
@@ -9,11 +8,10 @@ export const KeyboardAvoidingView = ({
   enabled,
   ...rest
 }: KeyboardAvoidingViewProps) => {
-  const insets = useSafeAreaInsets()
   return (
     <RNKeyboardAvoidingView
       behavior={behavior ?? 'padding'}
-      keyboardVerticalOffset={keyboardVerticalOffset ?? 86 + insets.bottom}
+      keyboardVerticalOffset={keyboardVerticalOffset ?? 70}
       enabled={enabled ?? Platform.OS === 'ios'}
       {...rest}
     >

apps/wallet-mobile/src/components/Modal/ModalScreen.tsx

@@ -14,6 +14,7 @@ export const ModalScreen = () => {
   const {current} = useCardAnimation()
   const {height, closeModal, content, isOpen, isLoading} = useModal()
   const [swipeLocationY, setSwipeLocationY] = React.useState(height)
+  // NOTE: this is to fill the bottom of the screen with the same color as the modal
   const {bottom} = useSafeAreaInsets()
 
   const onResponderMove = ({nativeEvent}: GestureResponderEvent) => {
@@ -95,50 +96,51 @@ const useStyles = () => {
   const {color, atoms, isDark} = useTheme()
   const styles = StyleSheet.create({
     root: {
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'flex-end',
-      alignSelf: 'stretch',
+      ...atoms.flex_1,
+      ...atoms.align_center,
+      ...atoms.justify_end,
+      ...atoms.self_stretch,
+      ...atoms.pb_lg,
     },
     cancellableArea: {
-      flexGrow: 1,
+      ...atoms.flex_grow,
     },
     backdrop: {
       ...StyleSheet.absoluteFillObject,
       backgroundColor: color.mobile_overlay,
     },
     fixBottomColor: {
-      alignSelf: 'stretch',
-      position: 'absolute',
+      backgroundColor: color.bg_color_high,
       bottom: 0,
       left: 0,
       right: 0,
-      backgroundColor: color.bg_color_high,
+      ...atoms.self_stretch,
+      ...atoms.absolute,
     },
     animatedView: {
-      alignSelf: 'stretch',
+      ...atoms.self_stretch,
     },
     rounded: {
       borderTopRightRadius: 20,
       borderTopLeftRadius: 20,
     },
     sheet: {
-      flex: 1,
       backgroundColor: isDark ? color.gray_c50 : color.white_static,
-      alignSelf: 'stretch',
+      ...atoms.flex_1,
+      ...atoms.self_stretch,
     },
     title: {
       ...atoms.heading_3_medium,
-      padding: 14,
-      color: color.gray_cmax,
+      ...atoms.p_lg,
+      color: color.text_gray_max,
     },
     header: {
-      alignItems: 'center',
-      alignSelf: 'stretch',
+      ...atoms.align_center,
+      ...atoms.self_stretch,
     },
     slider: {
-      height: 4,
       backgroundColor: color.gray_cmax,
+      height: 4,
       width: 32,
       borderRadius: 10,
     },

apps/wallet-mobile/src/components/PairedBalance/PairedBalance.tsx

@@ -93,7 +93,7 @@ const useStyles = () => {
   const {color, atoms} = useTheme()
   const styles = StyleSheet.create({
     pairedBalanceText: {
-      color: color.gray_c600,
+      color: color.text_gray_medium,
       ...atoms.body_3_sm_regular,
     },
   })

apps/wallet-mobile/src/features/Receive/common/AddressDetailCard/AddressDetailCard.tsx

@@ -93,7 +93,7 @@ export const AddressDetailCard = ({title}: AddressDetailCardProps) => {
   }
 
   return (
-    <>
+    <View style={styles.root}>
       <View style={styles.container}>
         <Animated.FlatList
           layout={Layout}
@@ -125,33 +125,36 @@ export const AddressDetailCard = ({title}: AddressDetailCardProps) => {
           />
         ))}
       </View>
-    </>
+    </View>
   )
 }
 
 const useStyles = () => {
-  const {color} = useTheme()
+  const {color, atoms} = useTheme()
   const styles = StyleSheet.create({
+    root: {
+      ...atoms.align_center,
+    },
     container: {
       borderRadius: 10,
-      flex: 1,
-      alignSelf: 'center',
+      ...atoms.flex_1,
     },
     index: {
-      flexDirection: 'row',
+      ...atoms.flex_row,
       gap: 6,
     },
     circle: {
       width: 12,
       height: 12,
       borderRadius: 100,
     },
-    contentContainer: {gap: 10},
+    contentContainer: {
+      gap: 10,
+    },
   })
-
   const colors = {
     active: color.primary_c500,
     inactive: color.gray_c300,
   }
-  return {styles, colors}
+  return {styles, colors} as const
 }

apps/wallet-mobile/src/features/Receive/common/SingleOrMultipleAddressesModal/SingleOrMultipleAddressesModal.tsx

@@ -16,7 +16,7 @@ type Props = {
 }
 
 export const SingleOrMultipleAddressesModal = ({onConfirm}: Props) => {
-  const {styles, colors} = useStyles()
+  const {styles} = useStyles()
   const strings = useStrings()
   const {enableMultipleMode, enableSingleMode} = useAddressMode()
 
@@ -42,27 +42,20 @@ export const SingleOrMultipleAddressesModal = ({onConfirm}: Props) => {
     <View style={styles.modal}>
       <QRsIllustration />
 
-      <Text style={[styles.details, {color: colors.details}]}>{strings.singleOrMultipleDetails}</Text>
+      <Text style={styles.details}>{strings.singleOrMultipleDetails}</Text>
 
-      <Spacer fill height={24} />
+      <Spacer fill height={16} />
 
-      <View style={styles.buttonContainer}>
+      <View style={styles.actions}>
         <Button
-          style={styles.multipleButton}
-          outline
+          withoutBackground
+          textStyles={styles.multipleButtonTitle}
           title={strings.selectMultiple}
-          textStyles={{
-            color: colors.selectMultipleInsteadTextColor,
-          }}
           onPress={handleOnMultiple}
         />
 
-        <Spacer height={6} />
-
-        <Button shelleyTheme title={strings.singleAddressWallet} onPress={handleOnSingle} style={styles.button} />
+        <Button shelleyTheme title={strings.singleAddressWallet} onPress={handleOnSingle} />
       </View>
-
-      <Spacer height={24} />
     </View>
   )
 }
@@ -72,34 +65,24 @@ const useStyles = () => {
 
   const styles = StyleSheet.create({
     modal: {
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'space-between',
+      ...atoms.flex_1,
+      ...atoms.align_center,
+      ...atoms.justify_between,
       ...atoms.px_lg,
     },
-    buttonContainer: {
-      alignSelf: 'stretch',
-      backgroundColor: 'transparent',
+    actions: {
+      ...atoms.self_stretch,
     },
     details: {
+      color: color.text_gray_normal,
       ...atoms.body_1_lg_regular,
-      justifyContent: 'center',
-      textAlign: 'center',
-    },
-
-    button: {
-      backgroundColor: color.primary_c500,
+      ...atoms.justify_center,
+      ...atoms.text_center,
     },
-    multipleButton: {
-      backgroundColor: 'transparent',
-      borderWidth: 0,
+    multipleButtonTitle: {
+      color: color.text_primary_high,
     },
   })
 
-  const colors = {
-    details: color.gray_c900,
-    selectMultipleInsteadTextColor: color.primary_c500,
-  }
-
-  return {styles, colors} as const
+  return {styles} as const
 }

apps/wallet-mobile/src/features/Receive/useCases/DescribeSelectedAddressScreen.tsx

@@ -6,7 +6,7 @@ import {ScrollView, StyleSheet, View} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
 import Icon from '../../../assets/img/copy.png'
-import {Button, Spacer, useModal} from '../../../components'
+import {Button, useModal} from '../../../components'
 import {useCopy} from '../../../hooks/useCopy'
 import {useMetrics} from '../../../kernel/metrics/metricsManager'
 import {isEmptyString} from '../../../kernel/utils'
@@ -52,7 +52,6 @@ export const DescribeSelectedAddressScreen = () => {
     },
     [navigateTo],
   )
-
   React.useEffect(() => {
     isShowingMultipleAddressInfo &&
       openModal(
@@ -76,9 +75,9 @@ export const DescribeSelectedAddressScreen = () => {
   )
 
   return (
-    <SafeAreaView style={styles.root} edges={['left', 'right', 'bottom']}>
-      <ScrollView style={{flex: 1}}>
-        <View style={styles.address}>
+    <SafeAreaView style={[styles.root, styles.flex]} edges={['left', 'right', 'bottom']}>
+      <ScrollView style={styles.flex}>
+        <View style={[styles.address, styles.flex]}>
           {hasAddress ? <AddressDetailCard title={strings.addresscardTitle} /> : <SkeletonAdressDetail />}
         </View>
       </ScrollView>
@@ -94,8 +93,6 @@ export const DescribeSelectedAddressScreen = () => {
         testID="receive:request-specific-amount-link"
       />
 
-      <Spacer height={6} />
-
       <Button
         shelleyTheme
         onPress={handleOnPressCopy}
@@ -104,7 +101,6 @@ export const DescribeSelectedAddressScreen = () => {
         iconImage={Icon}
         isCopying={isCopying}
         copiedText={strings.addressCopiedMsg}
-        style={styles.button}
       />
     </SafeAreaView>
   )
@@ -116,16 +112,14 @@ const useStyles = () => {
   const styles = StyleSheet.create({
     root: {
       backgroundColor: color.bg_color_high,
+      ...atoms.p_lg,
+    },
+    flex: {
       ...atoms.flex_1,
-      ...atoms.px_lg,
     },
     address: {
-      ...atoms.flex_1,
       ...atoms.align_center,
     },
-    button: {
-      backgroundColor: color.primary_c500,
-    },
   })
 
   const colors = {