Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

change choose account form to use Button + add hover styles

+54 -36
+54 -36
src/screens/Login/ChooseAccountForm.tsx
··· 1 1 import React from 'react' 2 - import {TouchableOpacity, View} from 'react-native' 2 + import {View} from 'react-native' 3 3 import {Trans, msg} from '@lingui/macro' 4 4 import {useLingui} from '@lingui/react' 5 5 import flattenReactChildren from 'react-keyed-flatten-children' ··· 67 67 }, [account, onSelect]) 68 68 69 69 return ( 70 - <TouchableOpacity 70 + <Button 71 71 testID={`chooseAccountBtn-${account.handle}`} 72 72 key={account.did} 73 73 style={[a.flex_1]} 74 74 onPress={onPress} 75 - accessibilityRole="button" 76 - accessibilityLabel={_(msg`Sign in as ${account.handle}`)} 77 - accessibilityHint={_(msg`Double tap to sign in`)}> 78 - <View style={[a.flex_1, a.flex_row, a.align_center, {height: 48}]}> 79 - <View style={a.p_md}> 80 - <UserAvatar avatar={profile?.avatar} size={24} /> 81 - </View> 82 - <Text style={[a.align_baseline, a.flex_1, a.flex_row, a.py_sm]}> 83 - <Text style={[a.font_bold]}> 84 - {profile?.displayName || account.handle}{' '} 75 + label={ 76 + isCurrentAccount 77 + ? _(msg`Continue as ${account.handle} (currently signed in)`) 78 + : _(msg`Sign in as ${account.handle}`) 79 + }> 80 + {({hovered}) => ( 81 + <View 82 + style={[ 83 + a.flex_1, 84 + a.flex_row, 85 + a.align_center, 86 + {height: 48}, 87 + hovered && t.atoms.bg_contrast_25, 88 + ]}> 89 + <View style={a.p_md}> 90 + <UserAvatar avatar={profile?.avatar} size={24} /> 91 + </View> 92 + <Text style={[a.align_baseline, a.flex_1, a.flex_row, a.py_sm]}> 93 + <Text style={[a.font_bold]}> 94 + {profile?.displayName || account.handle}{' '} 95 + </Text> 96 + <Text style={[t.atoms.text_contrast_medium]}>{account.handle}</Text> 85 97 </Text> 86 - <Text style={[t.atoms.text_contrast_medium]}>{account.handle}</Text> 87 - </Text> 88 - {isCurrentAccount ? ( 89 - <Check size="sm" style={[{color: colors.green3}, a.mr_md]} /> 90 - ) : ( 91 - <Chevron size="sm" style={[t.atoms.text, a.mr_md]} /> 92 - )} 93 - </View> 94 - </TouchableOpacity> 98 + {isCurrentAccount ? ( 99 + <Check size="sm" style={[{color: colors.green3}, a.mr_md]} /> 100 + ) : ( 101 + <Chevron size="sm" style={[t.atoms.text, a.mr_md]} /> 102 + )} 103 + </View> 104 + )} 105 + </Button> 95 106 ) 96 107 } 97 108 export const ChooseAccountForm = ({ ··· 149 160 isCurrentAccount={account.did === currentAccount?.did} 150 161 /> 151 162 ))} 152 - <TouchableOpacity 163 + <Button 153 164 testID="chooseNewAccountBtn" 154 165 style={[a.flex_1]} 155 166 onPress={() => onSelectAccount(undefined)} 156 - accessibilityRole="button" 157 - accessibilityLabel={_(msg`Login to account that is not listed`)} 158 - accessibilityHint=""> 159 - <View 160 - style={[a.flex_row, a.flex_row, a.align_center, {height: 48}]}> 161 - <Text 167 + label={_(msg`Login to account that is not listed`)}> 168 + {({hovered}) => ( 169 + <View 162 170 style={[ 163 - a.align_baseline, 164 171 a.flex_1, 165 172 a.flex_row, 166 - a.py_sm, 167 - {paddingLeft: 48}, 173 + a.flex_row, 174 + a.align_center, 175 + {height: 48}, 176 + hovered && t.atoms.bg_contrast_25, 168 177 ]}> 169 - <Trans>Other account</Trans> 170 - </Text> 171 - <Chevron size="sm" style={[t.atoms.text, a.mr_md]} /> 172 - </View> 173 - </TouchableOpacity> 178 + <Text 179 + style={[ 180 + a.align_baseline, 181 + a.flex_1, 182 + a.flex_row, 183 + a.py_sm, 184 + {paddingLeft: 48}, 185 + ]}> 186 + <Trans>Other account</Trans> 187 + </Text> 188 + <Chevron size="sm" style={[t.atoms.text, a.mr_md]} /> 189 + </View> 190 + )} 191 + </Button> 174 192 </Group> 175 193 </View> 176 194 <View style={[a.flex_row]}>