change hosting provider and forgot pw touchables to button
parent
8556016a69
commit
2428d22368
|
@ -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}>
|
||||
{({hovered}) => (
|
||||
<>
|
||||
<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>
|
||||
<Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
|
||||
<View
|
||||
style={[
|
||||
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},
|
||||
]}>
|
||||
<Pencil size="sm" style={{color: t.palette.contrast_500}} />
|
||||
<Pencil
|
||||
size="sm"
|
||||
style={{
|
||||
color: hovered
|
||||
? t.palette.contrast_800
|
||||
: t.palette.contrast_500,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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} />
|
||||
|
|
Loading…
Reference in New Issue