Skip to content

Commit

Permalink
fix(setup-wallet): info icons alignment
Browse files Browse the repository at this point in the history
  • Loading branch information
banklesss committed May 7, 2024
1 parent 765cf85 commit c0a0335
Show file tree
Hide file tree
Showing 5 changed files with 43 additions and 53 deletions.

This file was deleted.

28 changes: 0 additions & 28 deletions apps/wallet-mobile/src/features/SetupWallet/common/Info/Info.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}>
Expand Down Expand Up @@ -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()

Expand All @@ -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'],
Expand Down Expand Up @@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
StyleSheet,
Text,
TextInput as RNTextInput,
TouchableOpacity,
useWindowDimensions,
View,
} from 'react-native'
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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} />
Expand Down Expand Up @@ -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} />
Expand All @@ -407,7 +416,7 @@ const useStyles = () => {
container: {
flex: 1,
},
info: {
infoText: {
...theme.padding['x-l'],
flexDirection: 'row',
lineHeight: 24,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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
Expand Down Expand Up @@ -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()

Expand Down

0 comments on commit c0a0335

Please sign in to comment.