diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/forms/HostingProvider.tsx | 54 | ||||
| -rw-r--r-- | src/screens/Login/LoginForm.tsx | 12 |
2 files changed, 43 insertions, 23 deletions
diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index 80660b580..1653b0da4 100644 --- a/src/components/forms/HostingProvider.tsx +++ b/src/components/forms/HostingProvider.tsx @@ -1,5 +1,7 @@ import React from 'react' -import {TouchableOpacity, View} from 'react-native' +import {View} from 'react-native' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {isAndroid} from '#/platform/detection' import {atoms as a, useTheme} from '#/alf' @@ -9,6 +11,7 @@ import {useDialogControl} from '../Dialog' import {Text} from '../Typography' import {ServerInputDialog} from '#/view/com/auth/server-input' import {toNiceDomain} from '#/lib/strings/url-helpers' +import {Button} from '../Button' export function HostingProvider({ serviceUrl, @@ -21,6 +24,7 @@ export function HostingProvider({ }) { const serverInputControl = useDialogControl() const t = useTheme() + const {_} = useLingui() const onPressSelectService = React.useCallback(() => { serverInputControl.open() @@ -35,8 +39,11 @@ export function HostingProvider({ control={serverInputControl} onSelect={onSelectServiceUrl} /> - <TouchableOpacity - accessibilityRole="button" + <Button + label={toNiceDomain(serviceUrl)} + accessibilityHint={_(msg`Press to change hosting provider`)} + variant="solid" + color="secondary" style={[ a.w_full, a.flex_row, @@ -45,22 +52,35 @@ export function HostingProvider({ a.px_md, a.gap_xs, {paddingVertical: isAndroid ? 14 : 9}, - t.atoms.bg_contrast_25, ]} onPress={onPressSelectService}> - <View style={a.pr_xs}> - <Globe size="md" fill={t.palette.contrast_500} /> - </View> - <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text> - <View - style={[ - a.rounded_sm, - t.atoms.bg_contrast_100, - {marginLeft: 'auto', left: 6, padding: 6}, - ]}> - <Pencil size="sm" style={{color: t.palette.contrast_500}} /> - </View> - </TouchableOpacity> + {({hovered}) => ( + <> + <View style={a.pr_xs}> + <Globe + size="md" + fill={hovered ? t.palette.contrast_800 : t.palette.contrast_500} + /> + </View> + <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text> + <View + style={[ + a.rounded_sm, + hovered ? t.atoms.bg_contrast_300 : t.atoms.bg_contrast_100, + {marginLeft: 'auto', left: 6, padding: 6}, + ]}> + <Pencil + size="sm" + style={{ + color: hovered + ? t.palette.contrast_800 + : t.palette.contrast_500, + }} + /> + </View> + </> + )} + </Button> </> ) } diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx index e9620db5c..8c9ef3e27 100644 --- a/src/screens/Login/LoginForm.tsx +++ b/src/screens/Login/LoginForm.tsx @@ -4,7 +4,6 @@ import { Keyboard, LayoutAnimation, TextInput, - TouchableOpacity, View, } from 'react-native' import {ComAtprotoServerDescribeServer} from '@atproto/api' @@ -193,22 +192,23 @@ export const LoginForm = ({ : _(msg`Input the password tied to ${identifier}`) } /> - <TouchableOpacity + <Button testID="forgotPasswordButton" onPress={onPressForgotPassword} - accessibilityRole="button" - accessibilityLabel={_(msg`Forgot password`)} + label={_(msg`Forgot password?`)} accessibilityHint={_(msg`Opens password reset form`)} + variant="solid" + color="secondary" style={[ a.rounded_sm, t.atoms.bg_contrast_100, {marginLeft: 'auto', left: 6, padding: 6}, a.z_10, ]}> - <ButtonText style={t.atoms.text_contrast_medium}> + <ButtonText> <Trans>Forgot?</Trans> </ButtonText> - </TouchableOpacity> + </Button> </TextField.Root> </View> <FormError error={error} /> |