forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
change hosting provider and forgot pw touchables to button
+43
-23
+37
-17
src/components/forms/HostingProvider.tsx
+37
-17
src/components/forms/HostingProvider.tsx
···
1
1
import React from 'react'
2
-
import {TouchableOpacity, View} from 'react-native'
2
+
import {View} from 'react-native'
3
+
import {msg} from '@lingui/macro'
4
+
import {useLingui} from '@lingui/react'
3
5
4
6
import {isAndroid} from '#/platform/detection'
5
7
import {atoms as a, useTheme} from '#/alf'
···
9
11
import {Text} from '../Typography'
10
12
import {ServerInputDialog} from '#/view/com/auth/server-input'
11
13
import {toNiceDomain} from '#/lib/strings/url-helpers'
14
+
import {Button} from '../Button'
12
15
13
16
export function HostingProvider({
14
17
serviceUrl,
···
21
24
}) {
22
25
const serverInputControl = useDialogControl()
23
26
const t = useTheme()
27
+
const {_} = useLingui()
24
28
25
29
const onPressSelectService = React.useCallback(() => {
26
30
serverInputControl.open()
···
35
39
control={serverInputControl}
36
40
onSelect={onSelectServiceUrl}
37
41
/>
38
-
<TouchableOpacity
39
-
accessibilityRole="button"
42
+
<Button
43
+
label={toNiceDomain(serviceUrl)}
44
+
accessibilityHint={_(msg`Press to change hosting provider`)}
45
+
variant="solid"
46
+
color="secondary"
40
47
style={[
41
48
a.w_full,
42
49
a.flex_row,
···
45
52
a.px_md,
46
53
a.gap_xs,
47
54
{paddingVertical: isAndroid ? 14 : 9},
48
-
t.atoms.bg_contrast_25,
49
55
]}
50
56
onPress={onPressSelectService}>
51
-
<View style={a.pr_xs}>
52
-
<Globe size="md" fill={t.palette.contrast_500} />
53
-
</View>
54
-
<Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
55
-
<View
56
-
style={[
57
-
a.rounded_sm,
58
-
t.atoms.bg_contrast_100,
59
-
{marginLeft: 'auto', left: 6, padding: 6},
60
-
]}>
61
-
<Pencil size="sm" style={{color: t.palette.contrast_500}} />
62
-
</View>
63
-
</TouchableOpacity>
57
+
{({hovered}) => (
58
+
<>
59
+
<View style={a.pr_xs}>
60
+
<Globe
61
+
size="md"
62
+
fill={hovered ? t.palette.contrast_800 : t.palette.contrast_500}
63
+
/>
64
+
</View>
65
+
<Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
66
+
<View
67
+
style={[
68
+
a.rounded_sm,
69
+
hovered ? t.atoms.bg_contrast_300 : t.atoms.bg_contrast_100,
70
+
{marginLeft: 'auto', left: 6, padding: 6},
71
+
]}>
72
+
<Pencil
73
+
size="sm"
74
+
style={{
75
+
color: hovered
76
+
? t.palette.contrast_800
77
+
: t.palette.contrast_500,
78
+
}}
79
+
/>
80
+
</View>
81
+
</>
82
+
)}
83
+
</Button>
64
84
</>
65
85
)
66
86
}
+6
-6
src/screens/Login/LoginForm.tsx
+6
-6
src/screens/Login/LoginForm.tsx
···
4
4
Keyboard,
5
5
LayoutAnimation,
6
6
TextInput,
7
-
TouchableOpacity,
8
7
View,
9
8
} from 'react-native'
10
9
import {ComAtprotoServerDescribeServer} from '@atproto/api'
···
193
192
: _(msg`Input the password tied to ${identifier}`)
194
193
}
195
194
/>
196
-
<TouchableOpacity
195
+
<Button
197
196
testID="forgotPasswordButton"
198
197
onPress={onPressForgotPassword}
199
-
accessibilityRole="button"
200
-
accessibilityLabel={_(msg`Forgot password`)}
198
+
label={_(msg`Forgot password?`)}
201
199
accessibilityHint={_(msg`Opens password reset form`)}
200
+
variant="solid"
201
+
color="secondary"
202
202
style={[
203
203
a.rounded_sm,
204
204
t.atoms.bg_contrast_100,
205
205
{marginLeft: 'auto', left: 6, padding: 6},
206
206
a.z_10,
207
207
]}>
208
-
<ButtonText style={t.atoms.text_contrast_medium}>
208
+
<ButtonText>
209
209
<Trans>Forgot?</Trans>
210
210
</ButtonText>
211
-
</TouchableOpacity>
211
+
</Button>
212
212
</TextField.Root>
213
213
</View>
214
214
<FormError error={error} />