change hosting provider and forgot pw touchables to button

zio/stable
Samuel Newman 2024-03-19 21:58:53 +00:00
parent 8556016a69
commit 2428d22368
2 changed files with 43 additions and 23 deletions

View File

@ -1,5 +1,7 @@
import React from 'react' 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 {isAndroid} from '#/platform/detection'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
@ -9,6 +11,7 @@ import {useDialogControl} from '../Dialog'
import {Text} from '../Typography' import {Text} from '../Typography'
import {ServerInputDialog} from '#/view/com/auth/server-input' import {ServerInputDialog} from '#/view/com/auth/server-input'
import {toNiceDomain} from '#/lib/strings/url-helpers' import {toNiceDomain} from '#/lib/strings/url-helpers'
import {Button} from '../Button'
export function HostingProvider({ export function HostingProvider({
serviceUrl, serviceUrl,
@ -21,6 +24,7 @@ export function HostingProvider({
}) { }) {
const serverInputControl = useDialogControl() const serverInputControl = useDialogControl()
const t = useTheme() const t = useTheme()
const {_} = useLingui()
const onPressSelectService = React.useCallback(() => { const onPressSelectService = React.useCallback(() => {
serverInputControl.open() serverInputControl.open()
@ -35,8 +39,11 @@ export function HostingProvider({
control={serverInputControl} control={serverInputControl}
onSelect={onSelectServiceUrl} onSelect={onSelectServiceUrl}
/> />
<TouchableOpacity <Button
accessibilityRole="button" label={toNiceDomain(serviceUrl)}
accessibilityHint={_(msg`Press to change hosting provider`)}
variant="solid"
color="secondary"
style={[ style={[
a.w_full, a.w_full,
a.flex_row, a.flex_row,
@ -45,22 +52,35 @@ export function HostingProvider({
a.px_md, a.px_md,
a.gap_xs, a.gap_xs,
{paddingVertical: isAndroid ? 14 : 9}, {paddingVertical: isAndroid ? 14 : 9},
t.atoms.bg_contrast_25,
]} ]}
onPress={onPressSelectService}> onPress={onPressSelectService}>
{({hovered}) => (
<>
<View style={a.pr_xs}> <View style={a.pr_xs}>
<Globe size="md" fill={t.palette.contrast_500} /> <Globe
size="md"
fill={hovered ? t.palette.contrast_800 : t.palette.contrast_500}
/>
</View> </View>
<Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text> <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
<View <View
style={[ style={[
a.rounded_sm, a.rounded_sm,
t.atoms.bg_contrast_100, hovered ? t.atoms.bg_contrast_300 : t.atoms.bg_contrast_100,
{marginLeft: 'auto', left: 6, padding: 6}, {marginLeft: 'auto', left: 6, padding: 6},
]}> ]}>
<Pencil size="sm" style={{color: t.palette.contrast_500}} /> <Pencil
size="sm"
style={{
color: hovered
? t.palette.contrast_800
: t.palette.contrast_500,
}}
/>
</View> </View>
</TouchableOpacity> </>
)}
</Button>
</> </>
) )
} }

View File

@ -4,7 +4,6 @@ import {
Keyboard, Keyboard,
LayoutAnimation, LayoutAnimation,
TextInput, TextInput,
TouchableOpacity,
View, View,
} from 'react-native' } from 'react-native'
import {ComAtprotoServerDescribeServer} from '@atproto/api' import {ComAtprotoServerDescribeServer} from '@atproto/api'
@ -193,22 +192,23 @@ export const LoginForm = ({
: _(msg`Input the password tied to ${identifier}`) : _(msg`Input the password tied to ${identifier}`)
} }
/> />
<TouchableOpacity <Button
testID="forgotPasswordButton" testID="forgotPasswordButton"
onPress={onPressForgotPassword} onPress={onPressForgotPassword}
accessibilityRole="button" label={_(msg`Forgot password?`)}
accessibilityLabel={_(msg`Forgot password`)}
accessibilityHint={_(msg`Opens password reset form`)} accessibilityHint={_(msg`Opens password reset form`)}
variant="solid"
color="secondary"
style={[ style={[
a.rounded_sm, a.rounded_sm,
t.atoms.bg_contrast_100, t.atoms.bg_contrast_100,
{marginLeft: 'auto', left: 6, padding: 6}, {marginLeft: 'auto', left: 6, padding: 6},
a.z_10, a.z_10,
]}> ]}>
<ButtonText style={t.atoms.text_contrast_medium}> <ButtonText>
<Trans>Forgot?</Trans> <Trans>Forgot?</Trans>
</ButtonText> </ButtonText>
</TouchableOpacity> </Button>
</TextField.Root> </TextField.Root>
</View> </View>
<FormError error={error} /> <FormError error={error} />