zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

change choose account form to use Button + add hover styles

zio/stable
Samuel Newman 2024-03-19 22:03:49 +00:00
parent 2428d22368
commit 1f02ed5d87
1 changed files with 54 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/screens/Login/ChooseAccountForm.tsx
View File

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import {TouchableOpacity, View} from 'react-native' import {View} from 'react-native'
import {Trans, msg} from '@lingui/macro' import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import flattenReactChildren from 'react-keyed-flatten-children' import flattenReactChildren from 'react-keyed-flatten-children'
@ -67,31 +67,42 @@ function AccountItem({
}, [account, onSelect]) }, [account, onSelect])
return ( return (
<TouchableOpacity <Button
testID={`chooseAccountBtn-${account.handle}`} testID={`chooseAccountBtn-${account.handle}`}
key={account.did} key={account.did}
style={[a.flex_1]} style={[a.flex_1]}
onPress={onPress} onPress={onPress}
accessibilityRole="button" label={
accessibilityLabel={_(msg`Sign in as ${account.handle}`)} isCurrentAccount
accessibilityHint={_(msg`Double tap to sign in`)}> ? _(msg`Continue as ${account.handle} (currently signed in)`)
<View style={[a.flex_1, a.flex_row, a.align_center, {height: 48}]}> : _(msg`Sign in as ${account.handle}`)
<View style={a.p_md}> }>
<UserAvatar avatar={profile?.avatar} size={24} /> {({hovered}) => (
</View> <View
<Text style={[a.align_baseline, a.flex_1, a.flex_row, a.py_sm]}> style={[
<Text style={[a.font_bold]}> a.flex_1,
{profile?.displayName || account.handle}{' '} a.flex_row,
a.align_center,
{height: 48},
hovered && t.atoms.bg_contrast_25,
]}>
<View style={a.p_md}>
<UserAvatar avatar={profile?.avatar} size={24} />
</View>
<Text style={[a.align_baseline, a.flex_1, a.flex_row, a.py_sm]}>
<Text style={[a.font_bold]}>
{profile?.displayName || account.handle}{' '}
</Text>
<Text style={[t.atoms.text_contrast_medium]}>{account.handle}</Text>
</Text> </Text>
<Text style={[t.atoms.text_contrast_medium]}>{account.handle}</Text> {isCurrentAccount ? (
</Text> <Check size="sm" style={[{color: colors.green3}, a.mr_md]} />
{isCurrentAccount ? ( ) : (
<Check size="sm" style={[{color: colors.green3}, a.mr_md]} /> <Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
) : ( )}
<Chevron size="sm" style={[t.atoms.text, a.mr_md]} /> </View>
)} )}
</View> </Button>
</TouchableOpacity>
) )
} }
export const ChooseAccountForm = ({ export const ChooseAccountForm = ({
@ -149,28 +160,35 @@ export const ChooseAccountForm = ({
isCurrentAccount={account.did === currentAccount?.did} isCurrentAccount={account.did === currentAccount?.did}
/> />
))} ))}
<TouchableOpacity <Button
testID="chooseNewAccountBtn" testID="chooseNewAccountBtn"
style={[a.flex_1]} style={[a.flex_1]}
onPress={() => onSelectAccount(undefined)} onPress={() => onSelectAccount(undefined)}
accessibilityRole="button" label={_(msg`Login to account that is not listed`)}>
accessibilityLabel={_(msg`Login to account that is not listed`)} {({hovered}) => (
accessibilityHint=""> <View
<View
style={[a.flex_row, a.flex_row, a.align_center, {height: 48}]}>
<Text
style={[ style={[
a.align_baseline,
a.flex_1, a.flex_1,
a.flex_row, a.flex_row,
a.py_sm, a.flex_row,
{paddingLeft: 48}, a.align_center,
{height: 48},
hovered && t.atoms.bg_contrast_25,
]}> ]}>
<Trans>Other account</Trans> <Text
</Text> style={[
<Chevron size="sm" style={[t.atoms.text, a.mr_md]} /> a.align_baseline,
</View> a.flex_1,
</TouchableOpacity> a.flex_row,
a.py_sm,
{paddingLeft: 48},
]}>
<Trans>Other account</Trans>
</Text>
<Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
</View>
)}
</Button>
</Group> </Group>
</View> </View>
<View style={[a.flex_row]}> <View style={[a.flex_row]}>