redesign select account

src/screens/Authentication/SelectAccountScreen.tsx

@@ -1,4 +1,5 @@
 import {useState} from 'react'
+import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -13,7 +14,6 @@ import * as Toast from '#/view/com/util/Toast'
 import {Logo} from '#/view/icons/Logo'
 import {atoms as a} from '#/alf'
 import {AccountList} from '#/components/AccountList'
-import * as TextField from '#/components/forms/TextField'
 import * as Layout from './components/Layout'
 
 type Props = NativeStackScreenProps<AuthNavigatorParams, 'SelectAccount'>
@@ -79,14 +79,17 @@ export function SelectAccountScreenInner({
         <Layout.Header.Slot />
       </Layout.Header.Outer>
       <Layout.Content contentContainerStyle={[a.p_xl]}>
-        <TextField.LabelText>
-          <Trans>Sign in as...</Trans>
-        </TextField.LabelText>
-        <AccountList
-          onSelectAccount={onSelect}
-          onSelectOther={signIn}
-          pendingDid={pendingDid}
-        />
+        <Layout.TitleText>
+          <Trans>Select account</Trans>
+        </Layout.TitleText>
+        <View style={[a.mt_lg]}>
+          <AccountList
+            onSelectAccount={onSelect}
+            onSelectOther={signIn}
+            pendingDid={pendingDid}
+            otherLabel={_(msg`Add account`)}
+          />
+        </View>
       </Layout.Content>
     </Layout.Screen>
   )

src/screens/Authentication/SignInScreen.tsx

@@ -97,7 +97,9 @@ export function SignInScreenInner({
         <Layout.Header.Slot />
       </Layout.Header.Outer>
       <Layout.Content contentContainerStyle={[a.p_xl]}>
-        <Text style={[a.font_heavy, a.text_3xl]}>Log in</Text>
+        <Layout.TitleText>
+          <Trans>Log in</Trans>
+        </Layout.TitleText>
         <SignInForm
           error={error}
           serviceUrl={serviceUrl}

src/screens/Authentication/components/Layout.native.tsx

@@ -1 +1,8 @@
+import {atoms as a} from '#/alf'
+import {Text} from '#/components/Typography'
+
 export * from '#/components/Layout'
+
+export function TitleText({children}: {children: React.ReactNode}) {
+  return <Text style={[a.font_heavy, a.text_3xl]}>{children}</Text>
+}

src/screens/Authentication/components/Layout.tsx

@@ -3,9 +3,14 @@ import {View} from 'react-native'
 
 import {atoms as a} from '#/alf'
 import {type ContentProps, type ScreenProps} from '#/components/Layout'
+import {Text} from '#/components/Typography'
 
 export * as Header from '#/components/Layout/Header'
 
+export function TitleText({children}: {children: React.ReactNode}) {
+  return <Text style={[a.font_heavy, a.text_3xl]}>{children}</Text>
+}
+
 export const Screen = memo(function Screen({style, ...props}: ScreenProps) {
   return <View style={[a.w_full, a.h_full, style]} {...props} />
 })

src/screens/Authentication/components/SignInForm.tsx

@@ -184,7 +184,7 @@ export function SignInForm({
             label={_(msg`Username or email address`)}
             placeholder=""
             autoCapitalize="none"
-            autoFocus
+            autoFocus={!initialHandle}
             autoCorrect={false}
             autoComplete="username"
             returnKeyType="next"
@@ -218,6 +218,7 @@ export function SignInForm({
             label={_(msg`Password`)}
             placeholder=""
             autoCapitalize="none"
+            autoFocus={!!initialHandle}
             autoCorrect={false}
             autoComplete="password"
             returnKeyType="done"