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

change choose account form to use Button + add hover styles

Browse source
This commit is contained in:
Samuel Newman 2024-03-19 22:03:49 +00:00
parent 2428d22368
commit 1f02ed5d87
1 changed files with 54 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

44
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,15 +67,25 @@ 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}`)
}>
{({hovered}) => (
<View
style={[
a.flex_1,
a.flex_row,
a.align_center,
{height: 48},
hovered && t.atoms.bg_contrast_25,
]}>
<View style={a.p_md}> <View style={a.p_md}>
<UserAvatar avatar={profile?.avatar} size={24} /> <UserAvatar avatar={profile?.avatar} size={24} />
</View> </View>
@ -91,7 +101,8 @@ function AccountItem({
<Chevron size="sm" style={[t.atoms.text, a.mr_md]} /> <Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
)} )}
</View> </View>
</TouchableOpacity> )}
</Button>
) )
} }
export const ChooseAccountForm = ({ export const ChooseAccountForm = ({
@ -149,15 +160,21 @@ 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}]}> style={[
a.flex_1,
a.flex_row,
a.flex_row,
a.align_center,
{height: 48},
hovered && t.atoms.bg_contrast_25,
]}>
<Text <Text
style={[ style={[
a.align_baseline, a.align_baseline,
@ -170,7 +187,8 @@ export const ChooseAccountForm = ({
</Text> </Text>
<Chevron size="sm" style={[t.atoms.text, a.mr_md]} /> <Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
</View> </View>
</TouchableOpacity> )}
</Button>
</Group> </Group>
</View> </View>
<View style={[a.flex_row]}> <View style={[a.flex_row]}>