redesign select account

src/alf/atoms.ts

@@ -329,6 +329,9 @@ export const atoms = {
   font_normal: {
     fontWeight: tokens.fontWeight.normal,
   },
+  font_medium: {
+    fontWeight: tokens.fontWeight.medium,
+  },
   font_bold: {
     fontWeight: tokens.fontWeight.bold,
   },

src/alf/tokens.ts

@@ -53,6 +53,7 @@ export const borderRadius = {
  */
 export const fontWeight = {
   normal: '400',
+  medium: '500',
   bold: '600',
   heavy: '800',
 } as const

src/components/AccountList.tsx

@@ -11,12 +11,13 @@ import {useProfilesQuery} from '#/state/queries/profile'
 import {type SessionAccount, useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
-import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {Button} from '#/components/Button'
-import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
+import {CheckThick_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronIcon} from '#/components/icons/Chevron'
+import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
+import {Text} from '#/components/Typography'
 import {useSimpleVerificationState} from '#/components/verification'
 import {VerificationCheck} from '#/components/verification/VerificationCheck'
-import {Button} from './Button'
-import {Text} from './Typography'
 
 export function AccountList({
   onSelectAccount,
@@ -44,9 +45,9 @@ export function AccountList({
     <View
       pointerEvents={pendingDid ? 'none' : 'auto'}
       style={[
-        a.rounded_md,
+        a.rounded_lg,
         a.overflow_hidden,
-        {borderWidth: 1},
+        a.border,
         t.atoms.border_contrast_low,
       ]}>
       {accounts.map(account => (
@@ -58,7 +59,7 @@ export function AccountList({
             isCurrentAccount={account.did === currentAccount?.did}
             isPendingAccount={account.did === pendingDid}
           />
-          <View style={[{borderBottomWidth: 1}, t.atoms.border_contrast_low]} />
+          <View style={[a.border_b, t.atoms.border_contrast_low]} />
         </React.Fragment>
       ))}
       <Button
@@ -72,22 +73,25 @@ export function AccountList({
               a.flex_1,
               a.flex_row,
               a.align_center,
-              {height: 48},
+              a.p_lg,
+              a.gap_sm,
               (hovered || pressed) && t.atoms.bg_contrast_25,
             ]}>
-            <Text
+            <View
               style={[
-                a.font_bold,
+                t.atoms.bg_contrast_25,
-                a.flex_1,
+                a.rounded_full,
-                a.flex_row,
+                {width: 48, height: 48},
-                a.py_sm,
+                a.justify_center,
-                a.leading_tight,
+                a.align_center,
-                t.atoms.text_contrast_medium,
+                (hovered || pressed) && t.atoms.bg_contrast_50,
-                {paddingLeft: 56},
               ]}>
+              <PlusIcon style={[t.atoms.text_contrast_low]} size="md" />
+            </View>
+            <Text style={[a.flex_1, a.leading_tight, a.text_md, a.font_medium]}>
               {otherLabel ?? <Trans>Other account</Trans>}
             </Text>
-            <Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
+            <ChevronIcon size="md" style={[t.atoms.text_contrast_low]} />
           </View>
         )}
       </Button>
@@ -134,14 +138,13 @@ function AccountItem({
             a.flex_1,
             a.flex_row,
             a.align_center,
-            a.px_md,
+            a.p_lg,
             a.gap_sm,
-            {height: 56},
             (hovered || pressed || isPendingAccount) && t.atoms.bg_contrast_25,
           ]}>
           <UserAvatar
             avatar={profile?.avatar}
-            size={36}
+            size={48}
             type={profile?.associated?.labeler ? 'labeler' : 'user'}
             live={live}
             hideLiveBadge
@@ -151,7 +154,7 @@ function AccountItem({
             <View style={[a.flex_row, a.align_center, a.gap_xs]}>
               <Text
                 emoji
-                style={[a.font_bold, a.leading_tight]}
+                style={[a.font_medium, a.leading_tight, a.text_md]}
                 numberOfLines={1}>
                 {sanitizeDisplayName(
                   profile?.displayName || profile?.handle || account.handle,
@@ -166,15 +169,28 @@ function AccountItem({
                 </View>
               )}
             </View>
-            <Text style={[a.leading_tight, t.atoms.text_contrast_medium]}>
+            <Text
+              style={[
+                a.leading_tight,
+                t.atoms.text_contrast_medium,
+                a.text_sm,
+              ]}>
               {sanitizeHandle(account.handle, '@')}
             </Text>
           </View>
 
           {isCurrentAccount ? (
-            <Check size="sm" style={[{color: t.palette.positive_600}]} />
+            <View
+              style={[
+                {width: 20, height: 20, backgroundColor: t.palette.primary_500},
+                a.rounded_full,
+                a.justify_center,
+                a.align_center,
+              ]}>
+              <CheckIcon size="xs" style={[{color: t.palette.white}]} />
+            </View>
           ) : (
-            <Chevron size="sm" style={[t.atoms.text]} />
+            <ChevronIcon size="md" style={[t.atoms.text_contrast_low]} />
           )}
         </View>
       )}

src/components/icons/TEMPLATE.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Svg, {Path} from 'react-native-svg'
 
-import {Props, useCommonSVGProps} from '#/components/icons/common'
+import {type Props, useCommonSVGProps} from '#/components/icons/common'
 
 export const IconTemplate_Stroke2_Corner0_Rounded = React.forwardRef(
   function LogoImpl(props: Props, ref) {

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>
+        <Layout.TitleText>
-          <Trans>Sign in as...</Trans>
+          <Trans>Select account</Trans>
-        </TextField.LabelText>
+        </Layout.TitleText>
-        <AccountList
+        <View style={[a.mt_lg]}>
-          onSelectAccount={onSelect}
+          <AccountList
-          onSelectOther={signIn}
+            onSelectAccount={onSelect}
-          pendingDid={pendingDid}
+            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"