From a1fc95f30e8ff9f8903451b6f5d2daa318653167 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 15 Mar 2024 13:49:13 +0000
Subject: convert password reset flow

---
 src/components/forms/HostingProvider.tsx | 69 ++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/components/forms/HostingProvider.tsx

(limited to 'src/components/forms/HostingProvider.tsx')

diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx
new file mode 100644
index 000000000..df506b77c
--- /dev/null
+++ b/src/components/forms/HostingProvider.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import {TouchableOpacity, View} from 'react-native'
+
+import {isAndroid} from '#/platform/detection'
+import {atoms as a, useTheme} from '#/alf'
+import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
+import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil'
+import * as TextField from './TextField'
+import {useDialogControl} from '../Dialog'
+import {Text} from '../Typography'
+import {ServerInputDialog} from '#/view/com/auth/server-input'
+import {toNiceDomain} from '#/lib/strings/url-helpers'
+
+export function HostingProvider({
+  serviceUrl,
+  onSelectServiceUrl,
+  onOpenDialog,
+}: {
+  serviceUrl: string
+  onSelectServiceUrl: (provider: string) => void
+  onOpenDialog?: () => void
+}) {
+  const serverInputControl = useDialogControl()
+  const t = useTheme()
+
+  const onPressSelectService = React.useCallback(() => {
+    serverInputControl.open()
+    if (onOpenDialog) {
+      onOpenDialog()
+    }
+  }, [onOpenDialog, serverInputControl])
+
+  return (
+    <>
+      <ServerInputDialog
+        control={serverInputControl}
+        onSelect={onSelectServiceUrl}
+      />
+      <TouchableOpacity
+        accessibilityRole="button"
+        style={[
+          a.w_full,
+          a.flex_row,
+          a.align_center,
+          a.rounded_sm,
+          a.px_md,
+          a.gap_xs,
+          {paddingVertical: isAndroid ? 14 : 9},
+          t.atoms.bg_contrast_25,
+        ]}
+        onPress={onPressSelectService}>
+        <TextField.Icon icon={Globe} />
+        <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
+        <View
+          style={[
+            a.rounded_sm,
+            t.atoms.bg_contrast_100,
+            {marginLeft: 'auto', left: 6, padding: 6},
+          ]}>
+          <Pencil
+            style={{color: t.palette.contrast_500}}
+            height={18}
+            width={18}
+          />
+        </View>
+      </TouchableOpacity>
+    </>
+  )
+}
-- 
cgit 1.4.1


From fd448a5fab2e5239abcf4504a1de24cb7aca700c Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 19 Mar 2024 21:28:18 +0000
Subject: rename pencil -> pencilLine and reexport

---
 assets/icons/pencilLine_stroke2_corner0_rounded.svg | 1 +
 assets/icons/pencil_stroke2_corner0_rounded.svg     | 1 -
 src/components/forms/HostingProvider.tsx            | 2 +-
 src/components/icons/Pencil.tsx                     | 4 ++--
 4 files changed, 4 insertions(+), 4 deletions(-)
 create mode 100644 assets/icons/pencilLine_stroke2_corner0_rounded.svg
 delete mode 100644 assets/icons/pencil_stroke2_corner0_rounded.svg

(limited to 'src/components/forms/HostingProvider.tsx')

diff --git a/assets/icons/pencilLine_stroke2_corner0_rounded.svg b/assets/icons/pencilLine_stroke2_corner0_rounded.svg
new file mode 100644
index 000000000..3ff2161d9
--- /dev/null
+++ b/assets/icons/pencilLine_stroke2_corner0_rounded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#000" fill-rule="evenodd" d="M15.586 2.5a2 2 0 0 1 2.828 0L21.5 5.586a2 2 0 0 1 0 2.828l-13 13A2 2 0 0 1 7.086 22H3a1 1 0 0 1-1-1v-4.086a2 2 0 0 1 .586-1.414l13-13ZM17 3.914l-13 13V20h3.086l13-13L17 3.914ZM13 21a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>
diff --git a/assets/icons/pencil_stroke2_corner0_rounded.svg b/assets/icons/pencil_stroke2_corner0_rounded.svg
deleted file mode 100644
index 734198989..000000000
--- a/assets/icons/pencil_stroke2_corner0_rounded.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21"><path fill="#000" fill-rule="evenodd" d="M13.586 1.5a2 2 0 0 1 2.828 0L19.5 4.586a2 2 0 0 1 0 2.828l-13 13A2 2 0 0 1 5.086 21H1a1 1 0 0 1-1-1v-4.086A2 2 0 0 1 .586 14.5l13-13ZM15 2.914l-13 13V19h3.086l13-13L15 2.914ZM11 20a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx
index df506b77c..c8cd7263f 100644
--- a/src/components/forms/HostingProvider.tsx
+++ b/src/components/forms/HostingProvider.tsx
@@ -4,7 +4,7 @@ import {TouchableOpacity, View} from 'react-native'
 import {isAndroid} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
-import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil'
+import {PencilLine_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil'
 import * as TextField from './TextField'
 import {useDialogControl} from '../Dialog'
 import {Text} from '../Typography'
diff --git a/src/components/icons/Pencil.tsx b/src/components/icons/Pencil.tsx
index 1b7fc17cf..854d51a3b 100644
--- a/src/components/icons/Pencil.tsx
+++ b/src/components/icons/Pencil.tsx
@@ -1,5 +1,5 @@
 import {createSinglePathSVG} from './TEMPLATE'
 
-export const Pencil_Stroke2_Corner0_Rounded = createSinglePathSVG({
-  path: 'M13.586 1.5a2 2 0 0 1 2.828 0L19.5 4.586a2 2 0 0 1 0 2.828l-13 13A2 2 0 0 1 5.086 21H1a1 1 0 0 1-1-1v-4.086A2 2 0 0 1 .586 14.5l13-13ZM15 2.914l-13 13V19h3.086l13-13L15 2.914ZM11 20a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z',
+export const PencilLine_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M15.586 2.5a2 2 0 0 1 2.828 0L21.5 5.586a2 2 0 0 1 0 2.828l-13 13A2 2 0 0 1 7.086 22H3a1 1 0 0 1-1-1v-4.086a2 2 0 0 1 .586-1.414l13-13ZM17 3.914l-13 13V20h3.086l13-13L17 3.914ZM13 21a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z',
 })
-- 
cgit 1.4.1


From 717c53bea82cfe902af9d1ea17d43b4d8064de04 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 19 Mar 2024 21:30:41 +0000
Subject: remove explicit height/width

---
 src/components/forms/HostingProvider.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

(limited to 'src/components/forms/HostingProvider.tsx')

diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx
index c8cd7263f..c0dd7218e 100644
--- a/src/components/forms/HostingProvider.tsx
+++ b/src/components/forms/HostingProvider.tsx
@@ -57,11 +57,7 @@ export function HostingProvider({
             t.atoms.bg_contrast_100,
             {marginLeft: 'auto', left: 6, padding: 6},
           ]}>
-          <Pencil
-            style={{color: t.palette.contrast_500}}
-            height={18}
-            width={18}
-          />
+          <Pencil style={{color: t.palette.contrast_500}} />
         </View>
       </TouchableOpacity>
     </>
-- 
cgit 1.4.1


From 8556016a69642477e497fb7d695521b01945febc Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 19 Mar 2024 21:37:12 +0000
Subject: remove textfield references from hosting provider

---
 src/components/forms/HostingProvider.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'src/components/forms/HostingProvider.tsx')

diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx
index c0dd7218e..80660b580 100644
--- a/src/components/forms/HostingProvider.tsx
+++ b/src/components/forms/HostingProvider.tsx
@@ -5,7 +5,6 @@ import {isAndroid} from '#/platform/detection'
 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 * as TextField from './TextField'
 import {useDialogControl} from '../Dialog'
 import {Text} from '../Typography'
 import {ServerInputDialog} from '#/view/com/auth/server-input'
@@ -49,7 +48,9 @@ export function HostingProvider({
           t.atoms.bg_contrast_25,
         ]}
         onPress={onPressSelectService}>
-        <TextField.Icon icon={Globe} />
+        <View style={a.pr_xs}>
+          <Globe size="md" fill={t.palette.contrast_500} />
+        </View>
         <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
         <View
           style={[
@@ -57,7 +58,7 @@ export function HostingProvider({
             t.atoms.bg_contrast_100,
             {marginLeft: 'auto', left: 6, padding: 6},
           ]}>
-          <Pencil style={{color: t.palette.contrast_500}} />
+          <Pencil size="sm" style={{color: t.palette.contrast_500}} />
         </View>
       </TouchableOpacity>
     </>
-- 
cgit 1.4.1


From 2428d22368a96450f9a99b79a7e689a57e899a48 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 19 Mar 2024 21:58:53 +0000
Subject: change hosting provider and forgot pw touchables to button

---
 src/components/forms/HostingProvider.tsx | 54 ++++++++++++++++++++++----------
 src/screens/Login/LoginForm.tsx          | 12 +++----
 2 files changed, 43 insertions(+), 23 deletions(-)

(limited to 'src/components/forms/HostingProvider.tsx')

diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx
index 80660b580..1653b0da4 100644
--- a/src/components/forms/HostingProvider.tsx
+++ b/src/components/forms/HostingProvider.tsx
@@ -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}>
-        <View style={a.pr_xs}>
-          <Globe size="md" fill={t.palette.contrast_500} />
-        </View>
-        <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
-        <View
-          style={[
-            a.rounded_sm,
-            t.atoms.bg_contrast_100,
-            {marginLeft: 'auto', left: 6, padding: 6},
-          ]}>
-          <Pencil size="sm" style={{color: t.palette.contrast_500}} />
-        </View>
-      </TouchableOpacity>
+        {({hovered}) => (
+          <>
+            <View style={a.pr_xs}>
+              <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,
+                hovered ? t.atoms.bg_contrast_300 : t.atoms.bg_contrast_100,
+                {marginLeft: 'auto', left: 6, padding: 6},
+              ]}>
+              <Pencil
+                size="sm"
+                style={{
+                  color: hovered
+                    ? t.palette.contrast_800
+                    : t.palette.contrast_500,
+                }}
+              />
+            </View>
+          </>
+        )}
+      </Button>
     </>
   )
 }
diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx
index e9620db5c..8c9ef3e27 100644
--- a/src/screens/Login/LoginForm.tsx
+++ b/src/screens/Login/LoginForm.tsx
@@ -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} />
-- 
cgit 1.4.1


From fb17afc99d8fbc4f6b35e2aca0a3bdfda2b447f4 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 20 Mar 2024 18:02:18 +0000
Subject: dismiss keyboard when opening dialog

---
 src/components/forms/HostingProvider.tsx | 3 ++-
 src/view/com/auth/server-input/index.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/components/forms/HostingProvider.tsx')

diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx
index 1653b0da4..11d76316d 100644
--- a/src/components/forms/HostingProvider.tsx
+++ b/src/components/forms/HostingProvider.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {View} from 'react-native'
+import {Keyboard, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -27,6 +27,7 @@ export function HostingProvider({
   const {_} = useLingui()
 
   const onPressSelectService = React.useCallback(() => {
+    Keyboard.dismiss()
     serverInputControl.open()
     if (onOpenDialog) {
       onOpenDialog()
diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx
index 0661b7a35..b26ac1dcb 100644
--- a/src/view/com/auth/server-input/index.tsx
+++ b/src/view/com/auth/server-input/index.tsx
@@ -67,7 +67,7 @@ export function ServerInputDialog({
   return (
     <Dialog.Outer
       control={control}
-      nativeOptions={{sheet: {snapPoints: ['80', '100%']}}}
+      nativeOptions={{sheet: {snapPoints: ['100%']}}}
       onClose={onClose}>
       <Dialog.Handle />
 
-- 
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/HostingProvider.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


From 6e1541f2030897c8e32090dee3904fc65284ee8c Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 20 Mar 2024 16:15:41 -0500
Subject: HostingProvider tweaks

---
 src/components/forms/HostingProvider.tsx | 60 ++++++++++++++++++--------------
 1 file changed, 34 insertions(+), 26 deletions(-)

(limited to 'src/components/forms/HostingProvider.tsx')

diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx
index 34db9442d..f2d11062a 100644
--- a/src/components/forms/HostingProvider.tsx
+++ b/src/components/forms/HostingProvider.tsx
@@ -51,36 +51,44 @@ export function HostingProvider({
           a.align_center,
           a.rounded_sm,
           a.px_md,
+          a.pr_sm,
           a.gap_xs,
           {paddingVertical: isAndroid ? 14 : 9},
         ]}
         onPress={onPressSelectService}>
-        {({hovered}) => (
-          <>
-            <View style={a.pr_xs}>
-              <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,
-                hovered ? t.atoms.bg_contrast_300 : t.atoms.bg_contrast_100,
-                {marginLeft: 'auto', left: 6, padding: 6},
-              ]}>
-              <Pencil
-                size="sm"
-                style={{
-                  color: hovered
-                    ? t.palette.contrast_800
-                    : t.palette.contrast_500,
-                }}
-              />
-            </View>
-          </>
-        )}
+        {({hovered, pressed}) => {
+          const interacted = hovered || pressed
+          return (
+            <>
+              <View style={a.pr_xs}>
+                <Globe
+                  size="md"
+                  fill={
+                    interacted ? t.palette.contrast_800 : t.palette.contrast_500
+                  }
+                />
+              </View>
+              <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
+              <View
+                style={[
+                  a.rounded_sm,
+                  interacted
+                    ? t.atoms.bg_contrast_300
+                    : t.atoms.bg_contrast_100,
+                  {marginLeft: 'auto', padding: 6},
+                ]}>
+                <Pencil
+                  size="sm"
+                  style={{
+                    color: interacted
+                      ? t.palette.contrast_800
+                      : t.palette.contrast_500,
+                  }}
+                />
+              </View>
+            </>
+          )
+        }}
       </Button>
     </>
   )
-- 
cgit 1.4.1

