add logo to headers

This commit is contained in:
Samuel Newman
2025-07-15 15:09:38 +03:00
parent 10abad5344
commit 0908b0b65d
10 changed files with 111 additions and 80 deletions
+1 -1
View File
@@ -238,7 +238,7 @@ export function createInput(Component: typeof TextInput) {
ctx.onBlur() ctx.onBlur()
onBlur?.(e) onBlur?.(e)
}} }}
placeholder={placeholder || label} placeholder={placeholder ?? label}
placeholderTextColor={t.palette.contrast_500} placeholderTextColor={t.palette.contrast_500}
keyboardAppearance={t.name === 'light' ? 'light' : 'dark'} keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
style={flattened} style={flattened}
@@ -2,6 +2,7 @@ import {
type AuthNavigatorParams, type AuthNavigatorParams,
type NativeStackScreenProps, type NativeStackScreenProps,
} from '#/lib/routes/types' } from '#/lib/routes/types'
import {Logo} from '#/view/icons/Logo'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import * as Layout from './components/Layout' import * as Layout from './components/Layout'
@@ -15,7 +16,9 @@ export function ForgotPasswordScreenInner() {
<Layout.Screen testID="ForgotPasswordScreen"> <Layout.Screen testID="ForgotPasswordScreen">
<Layout.Header.Outer noBottomBorder> <Layout.Header.Outer noBottomBorder>
<Layout.Header.BackButton /> <Layout.Header.BackButton />
<Layout.Header.Content /> <Layout.Header.Content>
<Logo />
</Layout.Header.Content>
<Layout.Header.Slot /> <Layout.Header.Slot />
</Layout.Header.Outer> </Layout.Header.Outer>
<Layout.Content> <Layout.Content>
@@ -2,6 +2,7 @@ import {
type AuthNavigatorParams, type AuthNavigatorParams,
type NativeStackScreenProps, type NativeStackScreenProps,
} from '#/lib/routes/types' } from '#/lib/routes/types'
import {Logo} from '#/view/icons/Logo'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import * as Layout from './components/Layout' import * as Layout from './components/Layout'
@@ -15,7 +16,9 @@ export function PasswordUpdatedScreenInner() {
<Layout.Screen testID="PasswordUpdatedScreen"> <Layout.Screen testID="PasswordUpdatedScreen">
<Layout.Header.Outer noBottomBorder> <Layout.Header.Outer noBottomBorder>
<Layout.Header.BackButton /> <Layout.Header.BackButton />
<Layout.Header.Content /> <Layout.Header.Content>
<Logo />
</Layout.Header.Content>
<Layout.Header.Slot /> <Layout.Header.Slot />
</Layout.Header.Outer> </Layout.Header.Outer>
<Layout.Content> <Layout.Content>
@@ -10,6 +10,7 @@ import {logger} from '#/logger'
import {type SessionAccount, useSession, useSessionApi} from '#/state/session' import {type SessionAccount, useSession, useSessionApi} from '#/state/session'
import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useLoggedOutViewControls} from '#/state/shell/logged-out'
import * as Toast from '#/view/com/util/Toast' import * as Toast from '#/view/com/util/Toast'
import {Logo} from '#/view/icons/Logo'
import {atoms as a} from '#/alf' import {atoms as a} from '#/alf'
import {AccountList} from '#/components/AccountList' import {AccountList} from '#/components/AccountList'
import * as TextField from '#/components/forms/TextField' import * as TextField from '#/components/forms/TextField'
@@ -72,7 +73,9 @@ export function SelectAccountScreenInner({
<Layout.Screen testID="SelectAccountScreen"> <Layout.Screen testID="SelectAccountScreen">
<Layout.Header.Outer noBottomBorder> <Layout.Header.Outer noBottomBorder>
<Layout.Header.BackButton /> <Layout.Header.BackButton />
<Layout.Header.Content /> <Layout.Header.Content>
<Logo />
</Layout.Header.Content>
<Layout.Header.Slot /> <Layout.Header.Slot />
</Layout.Header.Outer> </Layout.Header.Outer>
<Layout.Content contentContainerStyle={[a.p_xl]}> <Layout.Content contentContainerStyle={[a.p_xl]}>
@@ -2,6 +2,7 @@ import {
type AuthNavigatorParams, type AuthNavigatorParams,
type NativeStackScreenProps, type NativeStackScreenProps,
} from '#/lib/routes/types' } from '#/lib/routes/types'
import {Logo} from '#/view/icons/Logo'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import * as Layout from './components/Layout' import * as Layout from './components/Layout'
@@ -15,7 +16,9 @@ export function SetNewPasswordScreenInner() {
<Layout.Screen testID="SetNewPasswordScreen"> <Layout.Screen testID="SetNewPasswordScreen">
<Layout.Header.Outer noBottomBorder> <Layout.Header.Outer noBottomBorder>
<Layout.Header.BackButton /> <Layout.Header.BackButton />
<Layout.Header.Content /> <Layout.Header.Content>
<Logo />
</Layout.Header.Content>
<Layout.Header.Slot /> <Layout.Header.Slot />
</Layout.Header.Outer> </Layout.Header.Outer>
<Layout.Content> <Layout.Content>
+5 -2
View File
@@ -10,6 +10,7 @@ import {
import {logger} from '#/logger' import {logger} from '#/logger'
import {useServiceQuery} from '#/state/queries/service' import {useServiceQuery} from '#/state/queries/service'
import {type SessionAccount} from '#/state/session' import {type SessionAccount} from '#/state/session'
import {Logo} from '#/view/icons/Logo'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import * as Layout from './components/Layout' import * as Layout from './components/Layout'
@@ -90,10 +91,12 @@ export function SignInScreenInner({
<Layout.Screen testID="SignInScreen"> <Layout.Screen testID="SignInScreen">
<Layout.Header.Outer noBottomBorder> <Layout.Header.Outer noBottomBorder>
<Layout.Header.BackButton /> <Layout.Header.BackButton />
<Layout.Header.Content /> <Layout.Header.Content>
<Logo />
</Layout.Header.Content>
<Layout.Header.Slot /> <Layout.Header.Slot />
</Layout.Header.Outer> </Layout.Header.Outer>
<Layout.Content contentContainerStyle={[a.px_xl]}> <Layout.Content contentContainerStyle={[a.p_xl]}>
<Text style={[a.font_heavy, a.text_3xl]}>Log in</Text> <Text style={[a.font_heavy, a.text_3xl]}>Log in</Text>
<SignInForm <SignInForm
error={error} error={error}
@@ -2,6 +2,7 @@ import {
type AuthNavigatorParams, type AuthNavigatorParams,
type NativeStackScreenProps, type NativeStackScreenProps,
} from '#/lib/routes/types' } from '#/lib/routes/types'
import {Logo} from '#/view/icons/Logo'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import * as Layout from './components/Layout' import * as Layout from './components/Layout'
@@ -15,7 +16,9 @@ export function SignUpCaptchaScreenInner() {
<Layout.Screen testID="SignUpCaptchaScreen"> <Layout.Screen testID="SignUpCaptchaScreen">
<Layout.Header.Outer noBottomBorder> <Layout.Header.Outer noBottomBorder>
<Layout.Header.BackButton /> <Layout.Header.BackButton />
<Layout.Header.Content /> <Layout.Header.Content>
<Logo />
</Layout.Header.Content>
<Layout.Header.Slot /> <Layout.Header.Slot />
</Layout.Header.Outer> </Layout.Header.Outer>
<Layout.Content> <Layout.Content>
@@ -2,6 +2,7 @@ import {
type AuthNavigatorParams, type AuthNavigatorParams,
type NativeStackScreenProps, type NativeStackScreenProps,
} from '#/lib/routes/types' } from '#/lib/routes/types'
import {Logo} from '#/view/icons/Logo'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import * as Layout from './components/Layout' import * as Layout from './components/Layout'
@@ -15,7 +16,9 @@ export function SignUpHandleScreenInner() {
<Layout.Screen testID="SignUpHandleScreen"> <Layout.Screen testID="SignUpHandleScreen">
<Layout.Header.Outer noBottomBorder> <Layout.Header.Outer noBottomBorder>
<Layout.Header.BackButton /> <Layout.Header.BackButton />
<Layout.Header.Content /> <Layout.Header.Content>
<Logo />
</Layout.Header.Content>
<Layout.Header.Slot /> <Layout.Header.Slot />
</Layout.Header.Outer> </Layout.Header.Outer>
<Layout.Content> <Layout.Content>
@@ -2,6 +2,7 @@ import {
type AuthNavigatorParams, type AuthNavigatorParams,
type NativeStackScreenProps, type NativeStackScreenProps,
} from '#/lib/routes/types' } from '#/lib/routes/types'
import {Logo} from '#/view/icons/Logo'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import * as Layout from './components/Layout' import * as Layout from './components/Layout'
@@ -15,7 +16,9 @@ export function SignUpInfoScreenInner() {
<Layout.Screen testID="SignUpInfoScreen"> <Layout.Screen testID="SignUpInfoScreen">
<Layout.Header.Outer noBottomBorder> <Layout.Header.Outer noBottomBorder>
<Layout.Header.BackButton /> <Layout.Header.BackButton />
<Layout.Header.Content /> <Layout.Header.Content>
<Logo />
</Layout.Header.Content>
<Layout.Header.Slot /> <Layout.Header.Slot />
</Layout.Header.Outer> </Layout.Header.Outer>
<Layout.Content> <Layout.Content>
@@ -172,23 +172,24 @@ export function SignInForm({
} }
return ( return (
<View style={[a.pt_5xl, a.gap_md]}> <View style={[a.pt_2xl, a.gap_md]}>
<View> <View>
<TextField.LabelText> <TextField.LabelText>
<Trans>Account</Trans> <Trans>Username or email address</Trans>
</TextField.LabelText> </TextField.LabelText>
<View style={[a.gap_sm]}>
<TextField.Root> <TextField.Root>
<TextField.Icon icon={At} /> <TextField.Icon icon={At} />
<TextField.Input <TextField.Input
testID="loginUsernameInput" testID="loginUsernameInput"
label={_(msg`Username or email address`)} label={_(msg`Username or email address`)}
placeholder=""
autoCapitalize="none" autoCapitalize="none"
autoFocus autoFocus
autoCorrect={false} autoCorrect={false}
autoComplete="username" autoComplete="username"
returnKeyType="next" returnKeyType="next"
textContentType="username" textContentType="username"
keyboardType="ascii-capable"
defaultValue={initialHandle || ''} defaultValue={initialHandle || ''}
onChangeText={v => { onChangeText={v => {
identifierValueRef.current = v identifierValueRef.current = v
@@ -203,13 +204,19 @@ export function SignInForm({
)} )}
/> />
</TextField.Root> </TextField.Root>
</View>
<View>
<TextField.LabelText>
<Trans>Password</Trans>
</TextField.LabelText>
<TextField.Root> <TextField.Root>
<TextField.Icon icon={Lock} /> <TextField.Icon icon={Lock} />
<TextField.Input <TextField.Input
testID="loginPasswordInput" testID="loginPasswordInput"
inputRef={passwordRef} inputRef={passwordRef}
label={_(msg`Password`)} label={_(msg`Password`)}
placeholder=""
autoCapitalize="none" autoCapitalize="none"
autoCorrect={false} autoCorrect={false}
autoComplete="password" autoComplete="password"
@@ -245,7 +252,7 @@ export function SignInForm({
</Button> </Button>
</TextField.Root> </TextField.Root>
</View> </View>
</View>
{isAuthFactorTokenNeeded && ( {isAuthFactorTokenNeeded && (
<View> <View>
<TextField.LabelText> <TextField.LabelText>