Password flow tweaks

zio/stable
Eric Bailey 2024-03-20 17:14:13 -05:00
parent 70f5cc6a9f
commit b0fcfa563d
4 changed files with 29 additions and 25 deletions

View File

@ -13,16 +13,17 @@ export function FormError({error}: {error?: string}) {
return ( return (
<View <View
style={[ style={[
{backgroundColor: t.palette.negative_600}, {backgroundColor: t.palette.negative_400},
a.flex_row, a.flex_row,
a.align_center,
a.mb_lg,
a.rounded_sm, a.rounded_sm,
a.p_sm, a.p_md,
a.gap_sm,
]}> ]}>
<Warning fill={t.palette.white} size="sm" /> <Warning fill={t.palette.white} size="md" />
<View style={(a.flex_1, a.ml_sm)}> <View>
<Text style={[{color: t.palette.white}, a.font_bold]}>{error}</Text> <Text style={[{color: t.palette.white}, a.font_bold, a.leading_snug]}>
{error}
</Text>
</View> </View>
</View> </View>
) )

View File

@ -114,21 +114,22 @@ export const ForgotPasswordForm = ({
/> />
</TextField.Root> </TextField.Root>
</View> </View>
<View>
<Text style={[t.atoms.text_contrast_high, a.mb_md]}> <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
<Trans> <Trans>
Enter the email you used to create your account. We'll send you a Enter the email you used to create your account. We'll send you a
"reset code" so you can set a new password. "reset code" so you can set a new password.
</Trans> </Trans>
</Text> </Text>
</View>
<FormError error={error} /> <FormError error={error} />
<View style={[a.flex_row, a.align_center]}>
<View style={[a.flex_row, a.align_center, a.pt_md]}>
<Button <Button
label={_(msg`Back`)} label={_(msg`Back`)}
variant="solid" variant="solid"
color="secondary" color="secondary"
size="small" size="medium"
onPress={onPressBack}> onPress={onPressBack}>
<ButtonText> <ButtonText>
<Trans>Back</Trans> <Trans>Back</Trans>
@ -141,8 +142,8 @@ export const ForgotPasswordForm = ({
<Button <Button
label={_(msg`Next`)} label={_(msg`Next`)}
variant="solid" variant="solid"
color={email ? 'primary' : 'secondary'} color={'primary'}
size="small" size="medium"
onPress={onPressNext} onPress={onPressNext}
disabled={!email}> disabled={!email}>
<ButtonText> <ButtonText>
@ -170,7 +171,7 @@ export const ForgotPasswordForm = ({
onPress={onEmailSent} onPress={onEmailSent}
label={_(msg`Go to next`)} label={_(msg`Go to next`)}
accessibilityHint={_(msg`Navigates to the next screen`)} accessibilityHint={_(msg`Navigates to the next screen`)}
size="small" size="medium"
variant="ghost" variant="ghost"
color="secondary"> color="secondary">
<ButtonText> <ButtonText>

View File

@ -32,7 +32,7 @@ export function FormContainer({
style={[styles.maxHeight, contentContainerStyle]} style={[styles.maxHeight, contentContainerStyle]}
keyboardShouldPersistTaps="handled"> keyboardShouldPersistTaps="handled">
<View <View
style={[a.gap_lg, a.flex_1, !gtMobile && [a.px_lg, a.pt_md], style]}> style={[a.gap_md, a.flex_1, !gtMobile && [a.px_lg, a.pt_md], style]}>
{title && !gtMobile && ( {title && !gtMobile && (
<Text style={[a.text_xl, a.font_bold, t.atoms.text_contrast_high]}> <Text style={[a.text_xl, a.font_bold, t.atoms.text_contrast_high]}>
{title} {title}

View File

@ -100,7 +100,7 @@ export const SetNewPasswordForm = ({
<FormContainer <FormContainer
testID="setNewPasswordForm" testID="setNewPasswordForm"
title={<Trans>Set new password</Trans>}> title={<Trans>Set new password</Trans>}>
<Text> <Text style={[a.leading_snug, a.mb_sm]}>
<Trans> <Trans>
You will receive an email with a "reset code." Enter that code here, You will receive an email with a "reset code." Enter that code here,
then enter your new password. then enter your new password.
@ -152,13 +152,15 @@ export const SetNewPasswordForm = ({
/> />
</TextField.Root> </TextField.Root>
</View> </View>
<FormError error={error} /> <FormError error={error} />
<View style={[a.flex_row, a.align_center]}>
<View style={[a.flex_row, a.align_center, a.pt_lg]}>
<Button <Button
label={_(msg`Back`)} label={_(msg`Back`)}
variant="solid" variant="solid"
color="secondary" color="secondary"
size="small" size="medium"
onPress={onPressBack}> onPress={onPressBack}>
<ButtonText> <ButtonText>
<Trans>Back</Trans> <Trans>Back</Trans>
@ -172,7 +174,7 @@ export const SetNewPasswordForm = ({
label={_(msg`Next`)} label={_(msg`Next`)}
variant="solid" variant="solid"
color="primary" color="primary"
size="small" size="medium"
onPress={onPressNext}> onPress={onPressNext}>
<ButtonText> <ButtonText>
<Trans>Next</Trans> <Trans>Next</Trans>