diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
index 440ac16ac9..76c4989f30 100644
--- a/src/alf/atoms.ts
+++ b/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,
},
diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts
index 576aafe956..74cc160fc6 100644
--- a/src/alf/tokens.ts
+++ b/src/alf/tokens.ts
@@ -53,6 +53,7 @@ export const borderRadius = {
*/
export const fontWeight = {
normal: '400',
+ medium: '500',
bold: '600',
heavy: '800',
} as const
diff --git a/src/components/AccountList.tsx b/src/components/AccountList.tsx
index eb770eeca7..5132efe22c 100644
--- a/src/components/AccountList.tsx
+++ b/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 {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
+import {Button} from '#/components/Button'
+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({
{accounts.map(account => (
@@ -58,7 +59,7 @@ export function AccountList({
isCurrentAccount={account.did === currentAccount?.did}
isPendingAccount={account.did === pendingDid}
/>
-
+
))}
+
{otherLabel ?? Other account}
-
+
)}
@@ -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,
]}>
{sanitizeDisplayName(
profile?.displayName || profile?.handle || account.handle,
@@ -166,15 +169,28 @@ function AccountItem({
)}
-
+
{sanitizeHandle(account.handle, '@')}
{isCurrentAccount ? (
-
+
+
+
) : (
-
+
)}
)}
diff --git a/src/components/icons/TEMPLATE.tsx b/src/components/icons/TEMPLATE.tsx
index 47a5c36b2a..be161c271f 100644
--- a/src/components/icons/TEMPLATE.tsx
+++ b/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) {
diff --git a/src/screens/Authentication/SelectAccountScreen.tsx b/src/screens/Authentication/SelectAccountScreen.tsx
index f84ea34a9a..b38ff18229 100644
--- a/src/screens/Authentication/SelectAccountScreen.tsx
+++ b/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
@@ -79,14 +79,17 @@ export function SelectAccountScreenInner({
-
- Sign in as...
-
-
+
+ Select account
+
+
+
+
)
diff --git a/src/screens/Authentication/SignInScreen.tsx b/src/screens/Authentication/SignInScreen.tsx
index 7afc3cf2a6..8b258a0e17 100644
--- a/src/screens/Authentication/SignInScreen.tsx
+++ b/src/screens/Authentication/SignInScreen.tsx
@@ -97,7 +97,9 @@ export function SignInScreenInner({
- Log in
+
+ Log in
+
{children}
+}
diff --git a/src/screens/Authentication/components/Layout.tsx b/src/screens/Authentication/components/Layout.tsx
index 484b67c515..cf08c89a0f 100644
--- a/src/screens/Authentication/components/Layout.tsx
+++ b/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 {children}
+}
+
export const Screen = memo(function Screen({style, ...props}: ScreenProps) {
return
})
diff --git a/src/screens/Authentication/components/SignInForm.tsx b/src/screens/Authentication/components/SignInForm.tsx
index 5d83cd22af..31b69bb513 100644
--- a/src/screens/Authentication/components/SignInForm.tsx
+++ b/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"