use wide button style in reset password flow

src/screens/Login/ForgotPasswordForm.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import {ActivityIndicator, Keyboard, View} from 'react-native'
+import {Keyboard, View} from 'react-native'
 import {type ComAtprotoServerDescribeServer} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -8,13 +8,15 @@ import * as EmailValidator from 'email-validator'
 import {isNetworkError} from '#/lib/strings/errors'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
+import {isWeb} from '#/platform/detection'
 import {Agent} from '#/state/session/agent'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {FormError} from '#/components/forms/FormError'
 import {HostingProvider} from '#/components/forms/HostingProvider'
 import * as TextField from '#/components/forms/TextField'
 import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At'
+import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {FormContainer} from './FormContainer'
 
@@ -118,43 +120,51 @@ export const ForgotPasswordForm = ({
 
       <FormError error={error} />
 
-      <View style={[a.flex_row, a.align_center, a.pt_md]}>
+      <View style={[web([a.flex_row, a.align_center]), a.pt_md]}>
-        <Button
+        {isWeb && (
-          label={_(msg`Back`)}
+          <>
-          variant="solid"
+            <Button
-          color="secondary"
+              label={_(msg`Back`)}
-          size="large"
+              variant="solid"
-          onPress={onPressBack}>
+              color="secondary"
-          <ButtonText>
+              size="large"
-            <Trans>Back</Trans>
+              onPress={onPressBack}>
-          </ButtonText>
+              <ButtonText>
-        </Button>
+                <Trans>Back</Trans>
-        <View style={a.flex_1} />
+              </ButtonText>
-        {!serviceDescription || isProcessing ? (
+            </Button>
-          <ActivityIndicator />
+            <View style={a.flex_1} />
+          </>
+        )}
+        {!serviceDescription ? (
+          <Button
+            label={_(msg`Connecting to service...`)}
+            size="large"
+            color="secondary"
+            disabled>
+            <ButtonIcon icon={Loader} />
+            <ButtonText>Connecting...</ButtonText>
+          </Button>
         ) : (
           <Button
             label={_(msg`Next`)}
-            variant="solid"
+            accessibilityHint={_(msg`Navigates to the next screen`)}
-            color={'primary'}
+            color="primary"
             size="large"
-            onPress={onPressNext}>
+            onPress={onPressNext}
+            disabled={isProcessing}>
             <ButtonText>
               <Trans>Next</Trans>
             </ButtonText>
+            {isProcessing && <ButtonIcon icon={Loader} />}
           </Button>
         )}
-        {!serviceDescription || isProcessing ? (
-          <Text style={[t.atoms.text_contrast_high, a.pl_md]}>
-            <Trans>Processing...</Trans>
-          </Text>
-        ) : undefined}
       </View>
       <View
         style={[
           t.atoms.border_contrast_medium,
           a.border_t,
-          a.pt_2xl,
+          a.pt_xl,
           a.mt_md,
           a.flex_row,
           a.justify_center,

src/screens/Login/FormContainer.tsx

@@ -1,7 +1,7 @@
 import {type StyleProp, View, type ViewStyle} from 'react-native'
 import type React from 'react'
 
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useGutters} from '#/alf'
 import {Text} from '#/components/Typography'
 
 export function FormContainer({
@@ -16,15 +16,14 @@ export function FormContainer({
   style?: StyleProp<ViewStyle>
 }) {
   const {gtMobile} = useBreakpoints()
-  const t = useTheme()
+  const gutter = useGutters([0, 'wide'])
+
   return (
     <View
       testID={testID}
-      style={[a.gap_md, a.flex_1, !gtMobile && [a.px_lg, a.py_md], style]}>
+      style={[a.gap_md, a.flex_1, !gtMobile && gutter, style]}>
       {titleText && !gtMobile && (
-        <Text style={[a.text_xl, a.font_semi_bold, t.atoms.text_contrast_high]}>
+        <Text style={[a.text_3xl, a.font_bold]}>{titleText}</Text>
-          {titleText}
-        </Text>
       )}
       {children}
     </View>

src/screens/Login/PasswordUpdatedForm.tsx

@@ -2,7 +2,7 @@ import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {atoms as a, useBreakpoints} from '#/alf'
+import {atoms as a, useBreakpoints, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Text} from '#/components/Typography'
 import {FormContainer} from './FormContainer'
@@ -19,13 +19,13 @@ export const PasswordUpdatedForm = ({
     <FormContainer
       testID="passwordUpdatedForm"
       style={[a.gap_2xl, !gtMobile && a.mt_5xl]}>
-      <Text style={[a.text_3xl, a.font_semi_bold, a.text_center]}>
+      <Text style={[a.text_3xl, a.font_bold, a.text_center]}>
         <Trans>Password updated!</Trans>
       </Text>
       <Text style={[a.text_center, a.mx_auto, {maxWidth: '80%'}]}>
         <Trans>You can now sign in with your new password.</Trans>
       </Text>
-      <View style={[a.flex_row, a.justify_center]}>
+      <View style={web([a.flex_row, a.justify_center])}>
         <Button
           onPress={onPressNext}
           label={_(msg`Close alert`)}

src/screens/Login/SetNewPasswordForm.tsx

@@ -1,5 +1,5 @@
 import {useState} from 'react'
-import {ActivityIndicator, View} from 'react-native'
+import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -8,13 +8,15 @@ import {isNetworkError} from '#/lib/strings/errors'
 import {cleanError} from '#/lib/strings/errors'
 import {checkAndFormatResetCode} from '#/lib/strings/password'
 import {logger} from '#/logger'
+import {isWeb} from '#/platform/detection'
 import {Agent} from '#/state/session/agent'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, web} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {FormError} from '#/components/forms/FormError'
 import * as TextField from '#/components/forms/TextField'
 import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock'
 import {Ticket_Stroke2_Corner0_Rounded as Ticket} from '#/components/icons/Ticket'
+import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {FormContainer} from './FormContainer'
 
@@ -32,7 +34,6 @@ export const SetNewPasswordForm = ({
   onPasswordSet: () => void
 }) => {
   const {_} = useLingui()
-  const t = useTheme()
 
   const [isProcessing, setIsProcessing] = useState<boolean>(false)
   const [resetCode, setResetCode] = useState<string>('')
@@ -163,37 +164,34 @@ export const SetNewPasswordForm = ({
 
       <FormError error={error} />
 
-      <View style={[a.flex_row, a.align_center, a.pt_lg]}>
+      <View style={[web([a.flex_row, a.align_center]), a.pt_lg]}>
-        <Button
+        {isWeb && (
-          label={_(msg`Back`)}
+          <>
-          variant="solid"
+            <Button
-          color="secondary"
+              label={_(msg`Back`)}
-          size="large"
+              variant="solid"
-          onPress={onPressBack}>
+              color="secondary"
-          <ButtonText>
+              size="large"
-            <Trans>Back</Trans>
+              onPress={onPressBack}>
-          </ButtonText>
+              <ButtonText>
-        </Button>
+                <Trans>Back</Trans>
-        <View style={a.flex_1} />
+              </ButtonText>
-        {isProcessing ? (
+            </Button>
-          <ActivityIndicator />
+            <View style={a.flex_1} />
-        ) : (
+          </>
-          <Button
-            label={_(msg`Next`)}
-            variant="solid"
-            color="primary"
-            size="large"
-            onPress={onPressNext}>
-            <ButtonText>
-              <Trans>Next</Trans>
-            </ButtonText>
-          </Button>
         )}
-        {isProcessing ? (
+
-          <Text style={[t.atoms.text_contrast_high, a.pl_md]}>
+        <Button
-            <Trans>Updating...</Trans>
+          label={_(msg`Next`)}
-          </Text>
+          color="primary"
-        ) : undefined}
+          size="large"
+          onPress={onPressNext}
+          disabled={isProcessing}>
+          <ButtonText>
+            <Trans>Next</Trans>
+          </ButtonText>
+          {isProcessing && <ButtonIcon icon={Loader} />}
+        </Button>
       </View>
     </FormContainer>
   )

src/view/com/util/layouts/LoggedOutLayout.tsx

@@ -42,11 +42,11 @@ export const LoggedOutLayout = ({
           contentContainerStyle={[
             {paddingBottom: isKeyboardVisible ? 300 : 0},
           ]}>
-          <View style={a.pt_md}>{children}</View>
+          <View style={a.pt_lg}>{children}</View>
         </ScrollView>
       )
     } else {
-      return <View style={a.pt_md}>{children}</View>
+      return <View style={a.pt_lg}>{children}</View>
     }
   }
   return (