acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

redesign select account

Browse Source
This commit is contained in:
Samuel Newman
2025-07-16 10:24:48 +03:00
parent 9bcb948c8d
commit afbe97e4ca
9 changed files with 74 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/alf/atoms.ts
+3
View File
@@ -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
+1
View File
@@ -53,6 +53,7 @@ export const borderRadius = {
*/
export const fontWeight = {
normal: '400',
medium: '500',
bold: '600',
heavy: '800',
} as const
src/components/AccountList.tsx
+40 -24
View File
@@ -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({
<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,
a.flex_1,
a.flex_row,
a.py_sm,
a.leading_tight,
t.atoms.text_contrast_medium,
{paddingLeft: 56},
t.atoms.bg_contrast_25,
a.rounded_full,
{width: 48, height: 48},
a.justify_center,
a.align_center,
(hovered || pressed) && t.atoms.bg_contrast_50,
]}>
<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 -1
View File
@@ -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
+12 -9
View File
@@ -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
+3 -1
View File
@@ -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
+7
View File
@@ -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
+5
View File
@@ -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
+2 -1
View File
@@ -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"