forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
change choose account form to use Button + add hover styles
+54
-36
+54
-36
src/screens/Login/ChooseAccountForm.tsx
+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]}>