fix(setup-wallet): info illustration (#3227)

Emurgo · May 2, 2024 · 3490476 · 3490476
1 parent eded24d
commit 3490476
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 34 deletions.
diff --git a/apps/wallet-mobile/src/features/SetupWallet/common/Info/Info.stories.tsx b/apps/wallet-mobile/src/features/SetupWallet/common/Info/Info.stories.tsx
@@ -0,0 +1,17 @@
+import {action} from '@storybook/addon-actions'
+import {storiesOf} from '@storybook/react-native'
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+
+import {Info} from './Info'
+
+storiesOf('AddWallet Info Symbol', module)
+  .addDecorator((story) => <View style={styles.container}>{story()}</View>)
+  .add('with icon', () => <Info paddingTop={3} onPress={() => action('info pressed')} />)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'yellow',
+  },
+})
diff --git a/apps/wallet-mobile/src/features/SetupWallet/common/Info/Info.tsx b/apps/wallet-mobile/src/features/SetupWallet/common/Info/Info.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import {StyleSheet} from 'react-native'
+import {TouchableOpacity} from 'react-native-gesture-handler'
+
+import {Spacer} from '../../../../components'
+import {Info as InfoIcon} from '../../illustrations/Info'
+
+export const Info = ({onPress, paddingTop}: {onPress: () => void; paddingTop?: number}) => {
+  const {styles} = useStyles()
+
+  return (
+    <TouchableOpacity style={styles.info} onPress={onPress}>
+      {paddingTop !== undefined && <Spacer height={paddingTop} />}
+
+      <InfoIcon size={24} />
+    </TouchableOpacity>
+  )
+}
+
+const useStyles = () => {
+  const styles = StyleSheet.create({
+    info: {
+      height: 24,
+    },
+  })
+
+  return {styles} as const
+}
diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/RecoveryPhraseScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/RecoveryPhraseScreen.tsx
@@ -16,19 +16,19 @@ import {
 import LinearGradient from 'react-native-linear-gradient'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
-import {Button, Spacer, useModal} from '../../../../components'
+import {Button, useModal} from '../../../../components'
 import {Space} from '../../../../components/Space/Space'
 import {useMetrics} from '../../../../metrics/metricsManager'
 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 InfoIllustration} 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 onPress={handleOnShowModal} />
+          <Info paddingTop={3} onPress={handleOnShowModal} />
         </Text>
 
         <View style={styles.mnemonicWords}>
@@ -184,18 +184,6 @@ export const RecoveryPhraseScreen = () => {
   )
 }
 
-const Info = ({onPress}: {onPress: () => void}) => {
-  const {styles} = useStyles()
-
-  return (
-    <TouchableOpacity style={styles.info} onPress={onPress}>
-      <Spacer height={2} />
-
-      <InfoIllustration size={24} />
-    </TouchableOpacity>
-  )
-}
-
 const useBold = () => {
   const {styles} = useStyles()
 
@@ -220,6 +208,7 @@ const useStyles = () => {
       ...theme.typography['body-1-l-regular'],
       color: theme.color.gray[900],
       lineHeight: 24,
+      flexDirection: 'row',
     },
     bolder: {
       ...theme.typography['body-1-l-medium'],
@@ -264,9 +253,6 @@ const useStyles = () => {
       ...theme.typography['button-2-m'],
       color: theme.color.primary[500],
     },
-    info: {
-      height: 24,
-    },
   })
 
   const colors = {

diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx
@@ -12,7 +12,6 @@ import {
   StyleSheet,
   Text,
   TextInput as RNTextInput,
-  TouchableOpacity,
   useWindowDimensions,
   View,
 } from 'react-native'
@@ -42,11 +41,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 InfoIllustration} from '../../illustrations/Info'
 
 const useSizeModal = () => {
   const HEIGHT_SCREEN = useWindowDimensions().height
@@ -289,9 +288,7 @@ export const WalletDetailsScreen = () => {
         <View style={styles.info}>
           <Text style={styles.title}>{strings.walletDetailsTitle(bold)}</Text>
 
-          <TouchableOpacity onPress={showModalTipsPassword}>
-            <InfoIllustration />
-          </TouchableOpacity>
+          <Info onPress={showModalTipsPassword} />
         </View>
 
         <Space height="xl" />
@@ -355,9 +352,7 @@ export const WalletDetailsScreen = () => {
 
           <Space width="s" />
 
-          <TouchableOpacity onPress={showModalTipsPlateNumber}>
-            <InfoIllustration />
-          </TouchableOpacity>
+          <Info onPress={showModalTipsPlateNumber} />
         </View>
       </View>
 
@@ -393,6 +388,7 @@ const useStyles = () => {
     },
     info: {
       flexDirection: 'row',
+      lineHeight: 24,
     },
     modal: {
       flex: 1,

diff --git a/...let-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletDetailsScreen.tsx b/...let-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletDetailsScreen.tsx
@@ -12,7 +12,6 @@ import {
   StyleSheet,
   Text,
   TextInput as RNTextInput,
-  TouchableOpacity,
   useWindowDimensions,
   View,
 } from 'react-native'
@@ -42,11 +41,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 InfoIllustration} from '../../illustrations/Info'
 
 const useSizeModal = () => {
   const HEIGHT_SCREEN = useWindowDimensions().height
@@ -249,9 +248,7 @@ export const RestoreWalletDetailsScreen = () => {
         <View style={styles.info}>
           <Text style={styles.title}>{strings.walletDetailsTitle(bold)}</Text>
 
-          <TouchableOpacity style={{flex: 1, alignSelf: 'center'}} onPress={showModalTipsPassword}>
-            <InfoIllustration />
-          </TouchableOpacity>
+          <Info onPress={showModalTipsPassword} />
         </View>
 
         <Space height="xl" />
@@ -316,9 +313,7 @@ export const RestoreWalletDetailsScreen = () => {
 
             <Space width="s" />
 
-            <TouchableOpacity onPress={showModalTipsPlateNumber}>
-              <InfoIllustration />
-            </TouchableOpacity>
+            <Info onPress={showModalTipsPlateNumber} />
           </View>
         </ScrollView>