Password flow tweaks

src/components/forms/FormError.tsx

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

src/screens/Login/ForgotPasswordForm.tsx

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

src/screens/Login/FormContainer.tsx

@@ -32,7 +32,7 @@ export function FormContainer({
       style={[styles.maxHeight, contentContainerStyle]}
       keyboardShouldPersistTaps="handled">
       <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 && (
           <Text style={[a.text_xl, a.font_bold, t.atoms.text_contrast_high]}>
             {title}

src/screens/Login/SetNewPasswordForm.tsx

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