From a1c4f19731878f7026d398d28e475bbeb7de824a Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 19 Mar 2024 12:47:46 -0700
Subject: Use ALF for signup flow, improve a11y of signup (#3151)

* Use ALF for signup flow, improve a11y of signup

* adjust padding

* rm log

* org imports

* clarify allowance of hyphens

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* fix a few accessibility items

* Standardise date input across platforms (#3223)

* make the date input consistent across platforms

* integrate into new signup form

* rm log

* add transitions

* show correct # of steps

* use `FormError`

* animate buttons

* use `ScreenTransition`

* fix android text overflow via flex -> flex_1

* change button color

* (android) make date input the same height as others

* fix deps

* fix deps

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
---
 src/components/forms/DateField/index.shared.tsx | 99 +++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 src/components/forms/DateField/index.shared.tsx

(limited to 'src/components/forms/DateField/index.shared.tsx')

diff --git a/src/components/forms/DateField/index.shared.tsx b/src/components/forms/DateField/index.shared.tsx
new file mode 100644
index 000000000..29b3e8cb6
--- /dev/null
+++ b/src/components/forms/DateField/index.shared.tsx
@@ -0,0 +1,99 @@
+import React from 'react'
+import {View, Pressable} from 'react-native'
+
+import {atoms as a, android, useTheme, web} from '#/alf'
+import {Text} from '#/components/Typography'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
+import * as TextField from '#/components/forms/TextField'
+import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'
+import {localizeDate} from './utils'
+
+// looks like a TextField.Input, but is just a button. It'll do something different on each platform on press
+// iOS: open a dialog with an inline date picker
+// Android: open the date picker modal
+
+export function DateFieldButton({
+  label,
+  value,
+  onPress,
+  isInvalid,
+  accessibilityHint,
+}: {
+  label: string
+  value: string
+  onPress: () => void
+  isInvalid?: boolean
+  accessibilityHint?: string
+}) {
+  const t = useTheme()
+
+  const {
+    state: pressed,
+    onIn: onPressIn,
+    onOut: onPressOut,
+  } = useInteractionState()
+  const {
+    state: hovered,
+    onIn: onHoverIn,
+    onOut: onHoverOut,
+  } = useInteractionState()
+  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
+
+  const {chromeHover, chromeFocus, chromeError, chromeErrorHover} =
+    TextField.useSharedInputStyles()
+
+  return (
+    <View
+      style={[a.relative, a.w_full]}
+      {...web({
+        onMouseOver: onHoverIn,
+        onMouseOut: onHoverOut,
+      })}>
+      <Pressable
+        aria-label={label}
+        accessibilityLabel={label}
+        accessibilityHint={accessibilityHint}
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        style={[
+          {
+            paddingTop: 12,
+            paddingBottom: 12,
+            paddingLeft: 14,
+            paddingRight: 14,
+            borderColor: 'transparent',
+            borderWidth: 2,
+          },
+          android({
+            minHeight: 57.5,
+          }),
+          a.flex_row,
+          a.flex_1,
+          a.w_full,
+          a.rounded_sm,
+          t.atoms.bg_contrast_25,
+          a.align_center,
+          hovered ? chromeHover : {},
+          focused || pressed ? chromeFocus : {},
+          isInvalid || isInvalid ? chromeError : {},
+          (isInvalid || isInvalid) && (hovered || focused)
+            ? chromeErrorHover
+            : {},
+        ]}>
+        <TextField.Icon icon={CalendarDays} />
+        <Text
+          style={[
+            a.text_md,
+            a.pl_xs,
+            t.atoms.text,
+            {lineHeight: a.text_md.fontSize * 1.1875},
+          ]}>
+          {localizeDate(value)}
+        </Text>
+      </Pressable>
+    </View>
+  )
+}
-- 
cgit 1.4.1


From 1d10946f540de596ef5b895a1608e63ea15c896f Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 20 Mar 2024 19:44:52 +0000
Subject: sort imports for files related to this PR

---
 src/components/forms/DateField/index.android.tsx |  6 +++---
 src/components/forms/DateField/index.shared.tsx  |  8 ++++----
 src/components/forms/DateField/index.tsx         | 16 ++++++++--------
 src/components/forms/DateField/index.web.tsx     |  8 ++++----
 src/components/forms/FormError.tsx               |  2 +-
 src/components/forms/HostingProvider.tsx         |  6 +++---
 src/screens/Login/ChooseAccountForm.tsx          | 20 ++++++++++----------
 src/screens/Login/ForgotPasswordForm.tsx         | 22 +++++++++++-----------
 src/screens/Login/FormContainer.tsx              |  4 ++--
 src/screens/Login/LoginForm.tsx                  | 24 ++++++++++++------------
 src/screens/Login/PasswordUpdatedForm.tsx        |  7 ++++---
 src/screens/Login/SetNewPasswordForm.tsx         | 24 ++++++++++++------------
 src/screens/Login/index.tsx                      | 22 +++++++++++-----------
 src/screens/Signup/StepCaptcha.tsx               |  9 +++++----
 src/screens/Signup/StepHandle.tsx                | 21 +++++++++++----------
 src/screens/Signup/index.tsx                     | 21 +++++++++++----------
 src/screens/Signup/state.ts                      | 20 ++++++++++----------
 17 files changed, 122 insertions(+), 118 deletions(-)

(limited to 'src/components/forms/DateField/index.shared.tsx')

diff --git a/src/components/forms/DateField/index.android.tsx b/src/components/forms/DateField/index.android.tsx
index 35c2459f0..4a1d0d6d1 100644
--- a/src/components/forms/DateField/index.android.tsx
+++ b/src/components/forms/DateField/index.android.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
+import DatePicker from 'react-native-date-picker'
 
+import {isAndroid} from 'platform/detection'
 import {useTheme} from '#/alf'
-import * as TextField from '#/components/forms/TextField'
 import {DateFieldProps} from '#/components/forms/DateField/types'
 import {toSimpleDateString} from '#/components/forms/DateField/utils'
-import DatePicker from 'react-native-date-picker'
-import {isAndroid} from 'platform/detection'
+import * as TextField from '#/components/forms/TextField'
 import {DateFieldButton} from './index.shared'
 
 export * as utils from '#/components/forms/DateField/utils'
diff --git a/src/components/forms/DateField/index.shared.tsx b/src/components/forms/DateField/index.shared.tsx
index 29b3e8cb6..1f54bdc8b 100644
--- a/src/components/forms/DateField/index.shared.tsx
+++ b/src/components/forms/DateField/index.shared.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
-import {View, Pressable} from 'react-native'
+import {Pressable, View} from 'react-native'
 
-import {atoms as a, android, useTheme, web} from '#/alf'
-import {Text} from '#/components/Typography'
-import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {android, atoms as a, useTheme, web} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'
+import {Text} from '#/components/Typography'
 import {localizeDate} from './utils'
 
 // looks like a TextField.Input, but is just a button. It'll do something different on each platform on press
diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx
index 22fa3a9f5..d5a4beda0 100644
--- a/src/components/forms/DateField/index.tsx
+++ b/src/components/forms/DateField/index.tsx
@@ -1,16 +1,16 @@
 import React from 'react'
 import {View} from 'react-native'
-
-import {useTheme, atoms as a} from '#/alf'
-import * as TextField from '#/components/forms/TextField'
-import {toSimpleDateString} from '#/components/forms/DateField/utils'
-import {DateFieldProps} from '#/components/forms/DateField/types'
 import DatePicker from 'react-native-date-picker'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {DateFieldProps} from '#/components/forms/DateField/types'
+import {toSimpleDateString} from '#/components/forms/DateField/utils'
+import * as TextField from '#/components/forms/TextField'
 import {DateFieldButton} from './index.shared'
-import {Button, ButtonText} from '#/components/Button'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 
 export * as utils from '#/components/forms/DateField/utils'
 export const Label = TextField.Label
diff --git a/src/components/forms/DateField/index.web.tsx b/src/components/forms/DateField/index.web.tsx
index a3aa302f9..982d32711 100644
--- a/src/components/forms/DateField/index.web.tsx
+++ b/src/components/forms/DateField/index.web.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import {TextInput, TextInputProps, StyleSheet} from 'react-native'
+import {StyleSheet, TextInput, TextInputProps} from 'react-native'
 // @ts-ignore
 import {unstable_createElement} from 'react-native-web'
-import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'
 
-import * as TextField from '#/components/forms/TextField'
-import {toSimpleDateString} from '#/components/forms/DateField/utils'
 import {DateFieldProps} from '#/components/forms/DateField/types'
+import {toSimpleDateString} from '#/components/forms/DateField/utils'
+import * as TextField from '#/components/forms/TextField'
+import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'
 
 export * as utils from '#/components/forms/DateField/utils'
 export const Label = TextField.Label
diff --git a/src/components/forms/FormError.tsx b/src/components/forms/FormError.tsx
index 05f2e5893..905aeebd6 100644
--- a/src/components/forms/FormError.tsx
+++ b/src/components/forms/FormError.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import {View} from 'react-native'
 
+import {atoms as a, useTheme} from '#/alf'
 import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
 import {Text} from '#/components/Typography'
-import {atoms as a, useTheme} from '#/alf'
 
 export function FormError({error}: {error?: string}) {
   const t = useTheme()
diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx
index 11d76316d..34db9442d 100644
--- a/src/components/forms/HostingProvider.tsx
+++ b/src/components/forms/HostingProvider.tsx
@@ -3,15 +3,15 @@ import {Keyboard, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {toNiceDomain} from '#/lib/strings/url-helpers'
 import {isAndroid} from '#/platform/detection'
+import {ServerInputDialog} from '#/view/com/auth/server-input'
 import {atoms as a, useTheme} from '#/alf'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
 import {PencilLine_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil'
+import {Button} from '../Button'
 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,
diff --git a/src/screens/Login/ChooseAccountForm.tsx b/src/screens/Login/ChooseAccountForm.tsx
index d90675f9e..28e99b02f 100644
--- a/src/screens/Login/ChooseAccountForm.tsx
+++ b/src/screens/Login/ChooseAccountForm.tsx
@@ -1,23 +1,23 @@
 import React from 'react'
 import {View} from 'react-native'
-import {Trans, msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useAnalytics} from 'lib/analytics/analytics'
-import {UserAvatar} from '../../view/com/util/UserAvatar'
-import {colors} from 'lib/styles'
-import {useSession, useSessionApi, SessionAccount} from '#/state/session'
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {logEvent} from '#/lib/statsig/statsig'
+import {colors} from '#/lib/styles'
 import {useProfileQuery} from '#/state/queries/profile'
+import {SessionAccount, useSession, useSessionApi} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import * as Toast from '#/view/com/util/Toast'
-import {Button} from '#/components/Button'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
-import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
-import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {Button} from '#/components/Button'
 import * as TextField from '#/components/forms/TextField'
+import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
+import {Text} from '#/components/Typography'
 import {FormContainer} from './FormContainer'
-import {logEvent} from '#/lib/statsig/statsig'
 
 function AccountItem({
   account,
diff --git a/src/screens/Login/ForgotPasswordForm.tsx b/src/screens/Login/ForgotPasswordForm.tsx
index ab9d02536..37d24bb10 100644
--- a/src/screens/Login/ForgotPasswordForm.tsx
+++ b/src/screens/Login/ForgotPasswordForm.tsx
@@ -1,23 +1,23 @@
-import React, {useState, useEffect} from 'react'
+import React, {useEffect, useState} from 'react'
 import {ActivityIndicator, Keyboard, View} from 'react-native'
 import {ComAtprotoServerDescribeServer} from '@atproto/api'
-import * as EmailValidator from 'email-validator'
 import {BskyAgent} from '@atproto/api'
-import {Trans, msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import * as EmailValidator from 'email-validator'
 
-import * as TextField from '#/components/forms/TextField'
-import {HostingProvider} from '#/components/forms/HostingProvider'
-import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At'
-import {atoms as a, useTheme} from '#/alf'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {isNetworkError} from 'lib/strings/errors'
-import {cleanError} from 'lib/strings/errors'
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {isNetworkError} from '#/lib/strings/errors'
+import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
+import {atoms as a, useTheme} from '#/alf'
 import {Button, 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 {Text} from '#/components/Typography'
 import {FormContainer} from './FormContainer'
-import {FormError} from '#/components/forms/FormError'
 
 type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema
 
diff --git a/src/screens/Login/FormContainer.tsx b/src/screens/Login/FormContainer.tsx
index cd17d06d7..20a3ba321 100644
--- a/src/screens/Login/FormContainer.tsx
+++ b/src/screens/Login/FormContainer.tsx
@@ -1,15 +1,15 @@
 import React from 'react'
 import {
   ScrollView,
+  type StyleProp,
   StyleSheet,
   View,
-  type StyleProp,
   type ViewStyle,
 } from 'react-native'
 
+import {isWeb} from '#/platform/detection'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
-import {isWeb} from '#/platform/detection'
 
 export function FormContainer({
   testID,
diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx
index f43f6da1f..a2cdb7f96 100644
--- a/src/screens/Login/LoginForm.tsx
+++ b/src/screens/Login/LoginForm.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useRef} from 'react'
+import React, {useRef, useState} from 'react'
 import {
   ActivityIndicator,
   Keyboard,
@@ -7,25 +7,25 @@ import {
   View,
 } from 'react-native'
 import {ComAtprotoServerDescribeServer} from '@atproto/api'
-import {Trans, msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useAnalytics} from 'lib/analytics/analytics'
-import {createFullHandle} from 'lib/strings/handles'
-import {isNetworkError} from 'lib/strings/errors'
-import {useSessionApi} from '#/state/session'
-import {cleanError} from 'lib/strings/errors'
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {isNetworkError} from '#/lib/strings/errors'
+import {cleanError} from '#/lib/strings/errors'
+import {createFullHandle} from '#/lib/strings/handles'
 import {logger} from '#/logger'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {useSessionApi} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
+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 {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock'
-import {HostingProvider} from '#/components/forms/HostingProvider'
-import {FormContainer} from './FormContainer'
-import {FormError} from '#/components/forms/FormError'
 import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+import {FormContainer} from './FormContainer'
 
 type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema
 
diff --git a/src/screens/Login/PasswordUpdatedForm.tsx b/src/screens/Login/PasswordUpdatedForm.tsx
index 218cab539..5407f3f1e 100644
--- a/src/screens/Login/PasswordUpdatedForm.tsx
+++ b/src/screens/Login/PasswordUpdatedForm.tsx
@@ -1,12 +1,13 @@
 import React, {useEffect} from 'react'
 import {View} from 'react-native'
-import {useAnalytics} from 'lib/analytics/analytics'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {FormContainer} from './FormContainer'
+
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {atoms as a, useBreakpoints} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Text} from '#/components/Typography'
-import {atoms as a, useBreakpoints} from '#/alf'
+import {FormContainer} from './FormContainer'
 
 export const PasswordUpdatedForm = ({
   onPressNext,
diff --git a/src/screens/Login/SetNewPasswordForm.tsx b/src/screens/Login/SetNewPasswordForm.tsx
index 678440cf4..072d7a978 100644
--- a/src/screens/Login/SetNewPasswordForm.tsx
+++ b/src/screens/Login/SetNewPasswordForm.tsx
@@ -1,22 +1,22 @@
-import React, {useState, useEffect} from 'react'
+import React, {useEffect, useState} from 'react'
 import {ActivityIndicator, View} from 'react-native'
 import {BskyAgent} from '@atproto/api'
-import {useAnalytics} from 'lib/analytics/analytics'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
-import {isNetworkError} from 'lib/strings/errors'
-import {cleanError} from 'lib/strings/errors'
-import {checkAndFormatResetCode} from 'lib/strings/password'
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {isNetworkError} from '#/lib/strings/errors'
+import {cleanError} from '#/lib/strings/errors'
+import {checkAndFormatResetCode} from '#/lib/strings/password'
 import {logger} from '#/logger'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {FormContainer} from './FormContainer'
-import {Text} from '#/components/Typography'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, 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 {Button, ButtonText} from '#/components/Button'
-import {useTheme, atoms as a} from '#/alf'
-import {FormError} from '#/components/forms/FormError'
+import {Text} from '#/components/Typography'
+import {FormContainer} from './FormContainer'
 
 export const SetNewPasswordForm = ({
   error,
diff --git a/src/screens/Login/index.tsx b/src/screens/Login/index.tsx
index e032d4189..49f7518b0 100644
--- a/src/screens/Login/index.tsx
+++ b/src/screens/Login/index.tsx
@@ -1,23 +1,23 @@
 import React from 'react'
 import {KeyboardAvoidingView} from 'react-native'
-import {useAnalytics} from '#/lib/analytics/analytics'
+import {LayoutAnimationConfig} from 'react-native-reanimated'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout'
-import {SessionAccount, useSession} from '#/state/session'
+import {useAnalytics} from '#/lib/analytics/analytics'
 import {DEFAULT_SERVICE} from '#/lib/constants'
-import {useLoggedOutView} from '#/state/shell/logged-out'
-import {useServiceQuery} from '#/state/queries/service'
-import {msg} from '@lingui/macro'
 import {logger} from '#/logger'
-import {atoms as a} from '#/alf'
-import {ChooseAccountForm} from './ChooseAccountForm'
+import {useServiceQuery} from '#/state/queries/service'
+import {SessionAccount, useSession} from '#/state/session'
+import {useLoggedOutView} from '#/state/shell/logged-out'
+import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout'
 import {ForgotPasswordForm} from '#/screens/Login/ForgotPasswordForm'
-import {SetNewPasswordForm} from '#/screens/Login/SetNewPasswordForm'
-import {PasswordUpdatedForm} from '#/screens/Login/PasswordUpdatedForm'
 import {LoginForm} from '#/screens/Login/LoginForm'
+import {PasswordUpdatedForm} from '#/screens/Login/PasswordUpdatedForm'
+import {SetNewPasswordForm} from '#/screens/Login/SetNewPasswordForm'
+import {atoms as a} from '#/alf'
+import {ChooseAccountForm} from './ChooseAccountForm'
 import {ScreenTransition} from './ScreenTransition'
-import {LayoutAnimationConfig} from 'react-native-reanimated'
 
 enum Forms {
   Login,
diff --git a/src/screens/Signup/StepCaptcha.tsx b/src/screens/Signup/StepCaptcha.tsx
index c4181e552..14da8ee93 100644
--- a/src/screens/Signup/StepCaptcha.tsx
+++ b/src/screens/Signup/StepCaptcha.tsx
@@ -3,13 +3,14 @@ import {ActivityIndicator, StyleSheet, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {nanoid} from 'nanoid/non-secure'
+
+import {createFullHandle} from '#/lib/strings/handles'
+import {isWeb} from '#/platform/detection'
+import {CaptchaWebView} from '#/view/com/auth/create/CaptchaWebView'
+import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useSignupContext, useSubmitSignup} from '#/screens/Signup/state'
-import {CaptchaWebView} from 'view/com/auth/create/CaptchaWebView'
-import {createFullHandle} from 'lib/strings/handles'
-import {isWeb} from 'platform/detection'
 import {atoms as a, useTheme} from '#/alf'
 import {FormError} from '#/components/forms/FormError'
-import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 
 const CAPTCHA_PATH = '/gate/signup'
 
diff --git a/src/screens/Signup/StepHandle.tsx b/src/screens/Signup/StepHandle.tsx
index e0a79e8fb..97b5f8322 100644
--- a/src/screens/Signup/StepHandle.tsx
+++ b/src/screens/Signup/StepHandle.tsx
@@ -1,21 +1,22 @@
 import React from 'react'
 import {View} from 'react-native'
-import {useFocusEffect} from '@react-navigation/native'
-import {useLingui} from '@lingui/react'
 import {msg, Trans} from '@lingui/macro'
-import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times'
-import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
-import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At'
-import * as TextField from '#/components/forms/TextField'
-import {useSignupContext} from '#/screens/Signup/state'
-import {Text} from '#/components/Typography'
-import {atoms as a, useTheme} from '#/alf'
+import {useLingui} from '@lingui/react'
+import {useFocusEffect} from '@react-navigation/native'
+
 import {
   createFullHandle,
   IsValidHandle,
   validateHandle,
-} from 'lib/strings/handles'
+} from '#/lib/strings/handles'
 import {ScreenTransition} from '#/screens/Login/ScreenTransition'
+import {useSignupContext} from '#/screens/Signup/state'
+import {atoms as a, useTheme} from '#/alf'
+import * as TextField from '#/components/forms/TextField'
+import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At'
+import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times'
+import {Text} from '#/components/Typography'
 
 export function StepHandle() {
   const {_} = useLingui()
diff --git a/src/screens/Signup/index.tsx b/src/screens/Signup/index.tsx
index b1acbbdf0..3414aacc1 100644
--- a/src/screens/Signup/index.tsx
+++ b/src/screens/Signup/index.tsx
@@ -1,7 +1,14 @@
 import React from 'react'
 import {ScrollView, View} from 'react-native'
-import {useLingui} from '@lingui/react'
 import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useAnalytics} from '#/lib/analytics/analytics'
+import {FEEDBACK_FORM_URL} from '#/lib/constants'
+import {createFullHandle} from '#/lib/strings/handles'
+import {useServiceQuery} from '#/state/queries/service'
+import {getAgent} from '#/state/session'
+import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout'
 import {
   initialState,
   reducer,
@@ -9,19 +16,13 @@ import {
   SignupStep,
   useSubmitSignup,
 } from '#/screens/Signup/state'
-import {StepInfo} from '#/screens/Signup/StepInfo'
-import {StepHandle} from '#/screens/Signup/StepHandle'
 import {StepCaptcha} from '#/screens/Signup/StepCaptcha'
+import {StepHandle} from '#/screens/Signup/StepHandle'
+import {StepInfo} from '#/screens/Signup/StepInfo'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
-import {Text} from '#/components/Typography'
-import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout'
-import {FEEDBACK_FORM_URL} from 'lib/constants'
 import {InlineLink} from '#/components/Link'
-import {useServiceQuery} from 'state/queries/service'
-import {getAgent} from 'state/session'
-import {createFullHandle} from 'lib/strings/handles'
-import {useAnalytics} from 'lib/analytics/analytics'
+import {Text} from '#/components/Typography'
 
 export function Signup({onPressBack}: {onPressBack: () => void}) {
   const {_} = useLingui()
diff --git a/src/screens/Signup/state.ts b/src/screens/Signup/state.ts
index 1ae43612e..f185e2d44 100644
--- a/src/screens/Signup/state.ts
+++ b/src/screens/Signup/state.ts
@@ -1,25 +1,25 @@
 import React, {useCallback} from 'react'
 import {LayoutAnimation} from 'react-native'
-import * as EmailValidator from 'email-validator'
-import {useLingui} from '@lingui/react'
-import {msg} from '@lingui/macro'
-import {cleanError} from 'lib/strings/errors'
 import {
   ComAtprotoServerCreateAccount,
   ComAtprotoServerDescribeServer,
 } from '@atproto/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import * as EmailValidator from 'email-validator'
 
+import {DEFAULT_SERVICE, IS_PROD_SERVICE} from '#/lib/constants'
+import {cleanError} from '#/lib/strings/errors'
+import {createFullHandle, validateHandle} from '#/lib/strings/handles'
+import {getAge} from '#/lib/strings/time'
 import {logger} from '#/logger'
-import {DEFAULT_SERVICE, IS_PROD_SERVICE} from 'lib/constants'
-import {createFullHandle, validateHandle} from 'lib/strings/handles'
-import {getAge} from 'lib/strings/time'
-import {useSessionApi} from 'state/session'
 import {
   DEFAULT_PROD_FEEDS,
   usePreferencesSetBirthDateMutation,
   useSetSaveFeedsMutation,
-} from 'state/queries/preferences'
-import {useOnboardingDispatch} from 'state/shell'
+} from '#/state/queries/preferences'
+import {useSessionApi} from '#/state/session'
+import {useOnboardingDispatch} from '#/state/shell'
 
 export type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema
 
-- 
cgit 1.4.1

