fix(setup-wallet): info icons alignment

apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/RecoveryPhraseScreen.tsx

@@ -23,12 +23,12 @@ import {WalletInitRouteNavigation} from '../../../../navigation'
 import {generateAdaMnemonic} from '../../../../yoroi-wallets/cardano/mnemonic'
 import {CardAboutPhrase} from '../../common/CardAboutPhrase/CardAboutPhrase'
 import {YoroiZendeskLink} from '../../common/constants'
-import {Info} from '../../common/Info/Info'
 import {LearnMoreButton} from '../../common/LearnMoreButton/LearnMoreButton'
 import {StepperProgress} from '../../common/StepperProgress/StepperProgress'
 import {useStrings} from '../../common/useStrings'
 import {EyeClosed as EyeClosedIllustration} from '../../illustrations/EyeClosed'
 import {EyeOpen as EyeOpenIllustration} from '../../illustrations/EyeOpen'
+import {Info as InfoIcon} from '../../illustrations/Info'
 
 const useSizeModal = () => {
   const HEIGHT_SCREEN = useWindowDimensions().height
@@ -130,7 +130,7 @@ export const RecoveryPhraseScreen = () => {
         <Text style={styles.title}>
           {strings.recoveryPhraseTitle(bold)}
 
-          <Info paddingTop={3} onPress={handleOnShowModal} />
+          <Info onPress={handleOnShowModal} />
         </Text>
 
         <View style={styles.mnemonicWords}>
@@ -184,6 +184,17 @@ export const RecoveryPhraseScreen = () => {
   )
 }
 
+const Info = ({onPress}: {onPress: () => void}) => {
+  const {styles} = useStyles()
+  return (
+    <TouchableOpacity style={styles.info} onPress={onPress}>
+      <View style={styles.infoIcon}>
+        <InfoIcon size={24} />
+      </View>
+    </TouchableOpacity>
+  )
+}
+
 const useBold = () => {
   const {styles} = useStyles()
 
@@ -207,8 +218,6 @@ const useStyles = () => {
     title: {
       ...theme.typography['body-1-l-regular'],
       color: theme.color.gray[900],
-      lineHeight: 24,
-      flexDirection: 'row',
     },
     bolder: {
       ...theme.typography['body-1-l-medium'],
@@ -253,6 +262,14 @@ const useStyles = () => {
       ...theme.typography['button-2-m'],
       color: theme.color.primary[500],
     },
+    info: {
+      position: 'relative',
+    },
+    infoIcon: {
+      position: 'absolute',
+      top: -18,
+      left: 0,
+    },
   })
 
   const colors = {

apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx

@@ -12,6 +12,7 @@ import {
   StyleSheet,
   Text,
   TextInput as RNTextInput,
+  TouchableOpacity,
   useWindowDimensions,
   View,
 } from 'react-native'
@@ -42,11 +43,11 @@ import {useSetSelectedWallet} from '../../../WalletManager/Context/SelectedWalle
 import {useSetSelectedWalletMeta} from '../../../WalletManager/Context/SelectedWalletMetaContext'
 import {CardAboutPhrase} from '../../common/CardAboutPhrase/CardAboutPhrase'
 import {YoroiZendeskLink} from '../../common/constants'
-import {Info} from '../../common/Info/Info'
 import {LearnMoreButton} from '../../common/LearnMoreButton/LearnMoreButton'
 import {PreparingWallet} from '../../common/PreparingWallet/PreparingWallet'
 import {StepperProgress} from '../../common/StepperProgress/StepperProgress'
 import {useStrings} from '../../common/useStrings'
+import {Info as InfoIcon} from '../../illustrations/Info'
 
 const useSizeModal = () => {
   const HEIGHT_SCREEN = useWindowDimensions().height
@@ -291,7 +292,7 @@ export const WalletDetailsScreen = () => {
           totalSteps={4}
         />
 
-        <View style={styles.info}>
+        <View style={styles.infoText}>
           <Text style={styles.title}>{strings.walletDetailsTitle(bold)}</Text>
 
           <Info onPress={showModalTipsPassword} />
@@ -384,6 +385,14 @@ export const WalletDetailsScreen = () => {
   )
 }
 
+const Info = ({onPress}: {onPress: () => void}) => {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <InfoIcon size={24} />
+    </TouchableOpacity>
+  )
+}
+
 const Actions = ({style, ...props}: ViewProps) => {
   const {styles} = useStyles()
   return <View style={[styles.actions, style]} {...props} />
@@ -407,7 +416,7 @@ const useStyles = () => {
     container: {
       flex: 1,
     },
-    info: {
+    infoText: {
       ...theme.padding['x-l'],
       flexDirection: 'row',
       lineHeight: 24,

apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletDetailsScreen.tsx

@@ -15,6 +15,7 @@ import {
   useWindowDimensions,
   View,
 } from 'react-native'
+import {TouchableOpacity} from 'react-native-gesture-handler'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
 import {Button, Icon, KeyboardAvoidingView, TextInput, useModal} from '../../../../components'
@@ -41,11 +42,11 @@ import {useSetSelectedWallet} from '../../../WalletManager/Context/SelectedWalle
 import {useSetSelectedWalletMeta} from '../../../WalletManager/Context/SelectedWalletMetaContext'
 import {CardAboutPhrase} from '../../common/CardAboutPhrase/CardAboutPhrase'
 import {YoroiZendeskLink} from '../../common/constants'
-import {Info} from '../../common/Info/Info'
 import {LearnMoreButton} from '../../common/LearnMoreButton/LearnMoreButton'
 import {PreparingWallet} from '../../common/PreparingWallet/PreparingWallet'
 import {StepperProgress} from '../../common/StepperProgress/StepperProgress'
 import {useStrings} from '../../common/useStrings'
+import {Info as InfoIcon} from '../../illustrations/Info'
 
 const useSizeModal = () => {
   const HEIGHT_SCREEN = useWindowDimensions().height
@@ -348,6 +349,14 @@ export const RestoreWalletDetailsScreen = () => {
   )
 }
 
+const Info = ({onPress}: {onPress: () => void}) => {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <InfoIcon size={24} />
+    </TouchableOpacity>
+  )
+}
+
 const useBold = () => {
   const {styles} = useStyles()