add logo to headers

src/components/forms/TextField.tsx

@@ -238,7 +238,7 @@ export function createInput(Component: typeof TextInput) {
             ctx.onBlur()
             onBlur?.(e)
           }}
-          placeholder={placeholder || label}
+          placeholder={placeholder ?? label}
           placeholderTextColor={t.palette.contrast_500}
           keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
           style={flattened}

src/screens/Authentication/ForgotPasswordScreen.tsx

@@ -2,6 +2,7 @@ import {
   type AuthNavigatorParams,
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
+import {Logo} from '#/view/icons/Logo'
 import {Text} from '#/components/Typography'
 import * as Layout from './components/Layout'
 
@@ -15,7 +16,9 @@ export function ForgotPasswordScreenInner() {
     <Layout.Screen testID="ForgotPasswordScreen">
       <Layout.Header.Outer noBottomBorder>
         <Layout.Header.BackButton />
-        <Layout.Header.Content />
+        <Layout.Header.Content>
+          <Logo />
+        </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
       <Layout.Content>

src/screens/Authentication/PasswordUpdatedScreen.tsx

@@ -2,6 +2,7 @@ import {
   type AuthNavigatorParams,
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
+import {Logo} from '#/view/icons/Logo'
 import {Text} from '#/components/Typography'
 import * as Layout from './components/Layout'
 
@@ -15,7 +16,9 @@ export function PasswordUpdatedScreenInner() {
     <Layout.Screen testID="PasswordUpdatedScreen">
       <Layout.Header.Outer noBottomBorder>
         <Layout.Header.BackButton />
-        <Layout.Header.Content />
+        <Layout.Header.Content>
+          <Logo />
+        </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
       <Layout.Content>

src/screens/Authentication/SelectAccountScreen.tsx

@@ -10,6 +10,7 @@ import {logger} from '#/logger'
 import {type SessionAccount, useSession, useSessionApi} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 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'
@@ -72,7 +73,9 @@ export function SelectAccountScreenInner({
     <Layout.Screen testID="SelectAccountScreen">
       <Layout.Header.Outer noBottomBorder>
         <Layout.Header.BackButton />
-        <Layout.Header.Content />
+        <Layout.Header.Content>
+          <Logo />
+        </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
       <Layout.Content contentContainerStyle={[a.p_xl]}>

src/screens/Authentication/SetNewPasswordScreen.tsx

@@ -2,6 +2,7 @@ import {
   type AuthNavigatorParams,
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
+import {Logo} from '#/view/icons/Logo'
 import {Text} from '#/components/Typography'
 import * as Layout from './components/Layout'
 
@@ -15,7 +16,9 @@ export function SetNewPasswordScreenInner() {
     <Layout.Screen testID="SetNewPasswordScreen">
       <Layout.Header.Outer noBottomBorder>
         <Layout.Header.BackButton />
-        <Layout.Header.Content />
+        <Layout.Header.Content>
+          <Logo />
+        </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
       <Layout.Content>

src/screens/Authentication/SignInScreen.tsx

@@ -10,6 +10,7 @@ import {
 import {logger} from '#/logger'
 import {useServiceQuery} from '#/state/queries/service'
 import {type SessionAccount} from '#/state/session'
+import {Logo} from '#/view/icons/Logo'
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 import * as Layout from './components/Layout'
@@ -90,10 +91,12 @@ export function SignInScreenInner({
     <Layout.Screen testID="SignInScreen">
       <Layout.Header.Outer noBottomBorder>
         <Layout.Header.BackButton />
-        <Layout.Header.Content />
+        <Layout.Header.Content>
+          <Logo />
+        </Layout.Header.Content>
         <Layout.Header.Slot />
       </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>
         <SignInForm
           error={error}

src/screens/Authentication/SignUpCaptchaScreen.tsx

@@ -2,6 +2,7 @@ import {
   type AuthNavigatorParams,
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
+import {Logo} from '#/view/icons/Logo'
 import {Text} from '#/components/Typography'
 import * as Layout from './components/Layout'
 
@@ -15,7 +16,9 @@ export function SignUpCaptchaScreenInner() {
     <Layout.Screen testID="SignUpCaptchaScreen">
       <Layout.Header.Outer noBottomBorder>
         <Layout.Header.BackButton />
-        <Layout.Header.Content />
+        <Layout.Header.Content>
+          <Logo />
+        </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
       <Layout.Content>

src/screens/Authentication/SignUpHandleScreen.tsx

@@ -2,6 +2,7 @@ import {
   type AuthNavigatorParams,
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
+import {Logo} from '#/view/icons/Logo'
 import {Text} from '#/components/Typography'
 import * as Layout from './components/Layout'
 
@@ -15,7 +16,9 @@ export function SignUpHandleScreenInner() {
     <Layout.Screen testID="SignUpHandleScreen">
       <Layout.Header.Outer noBottomBorder>
         <Layout.Header.BackButton />
-        <Layout.Header.Content />
+        <Layout.Header.Content>
+          <Logo />
+        </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
       <Layout.Content>

src/screens/Authentication/SignUpInfoScreen.tsx

@@ -2,6 +2,7 @@ import {
   type AuthNavigatorParams,
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
+import {Logo} from '#/view/icons/Logo'
 import {Text} from '#/components/Typography'
 import * as Layout from './components/Layout'
 
@@ -15,7 +16,9 @@ export function SignUpInfoScreenInner() {
     <Layout.Screen testID="SignUpInfoScreen">
       <Layout.Header.Outer noBottomBorder>
         <Layout.Header.BackButton />
-        <Layout.Header.Content />
+        <Layout.Header.Content>
+          <Logo />
+        </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
       <Layout.Content>

src/screens/Authentication/components/SignInForm.tsx

@@ -172,80 +172,87 @@ export function SignInForm({
   }
 
   return (
-    <View style={[a.pt_5xl, a.gap_md]}>
+    <View style={[a.pt_2xl, a.gap_md]}>
       <View>
         <TextField.LabelText>
-          <Trans>Account</Trans>
+          <Trans>Username or email address</Trans>
         </TextField.LabelText>
-        <View style={[a.gap_sm]}>
-          <TextField.Root>
-            <TextField.Icon icon={At} />
-            <TextField.Input
-              testID="loginUsernameInput"
-              label={_(msg`Username or email address`)}
-              autoCapitalize="none"
-              autoFocus
-              autoCorrect={false}
-              autoComplete="username"
-              returnKeyType="next"
-              textContentType="username"
-              defaultValue={initialHandle || ''}
-              onChangeText={v => {
-                identifierValueRef.current = v
-              }}
-              onSubmitEditing={() => {
-                passwordRef.current?.focus()
-              }}
-              blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field
-              editable={!isProcessing}
-              accessibilityHint={_(
-                msg`Enter the username or email address you used when you created your account`,
-              )}
-            />
-          </TextField.Root>
-
-          <TextField.Root>
-            <TextField.Icon icon={Lock} />
-            <TextField.Input
-              testID="loginPasswordInput"
-              inputRef={passwordRef}
-              label={_(msg`Password`)}
-              autoCapitalize="none"
-              autoCorrect={false}
-              autoComplete="password"
-              returnKeyType="done"
-              enablesReturnKeyAutomatically={true}
-              secureTextEntry={true}
-              textContentType="password"
-              clearButtonMode="while-editing"
-              onChangeText={v => {
-                passwordValueRef.current = v
-              }}
-              onSubmitEditing={onPressNext}
-              blurOnSubmit={false} // HACK: https://github.com/facebook/react-native/issues/21911#issuecomment-558343069 Keyboard blur behavior is now handled in onSubmitEditing
-              editable={!isProcessing}
-              accessibilityHint={_(msg`Enter your password`)}
-            />
-            <Button
-              testID="forgotPasswordButton"
-              onPress={onPressForgotPassword}
-              label={_(msg`Forgot password?`)}
-              accessibilityHint={_(msg`Opens password reset form`)}
-              variant="solid"
-              color="secondary"
-              style={[
-                a.rounded_sm,
-                // t.atoms.bg_contrast_100,
-                {marginLeft: 'auto', left: 6, padding: 6},
-                a.z_10,
-              ]}>
-              <ButtonText>
-                <Trans>Forgot?</Trans>
-              </ButtonText>
-            </Button>
-          </TextField.Root>
-        </View>
+        <TextField.Root>
+          <TextField.Icon icon={At} />
+          <TextField.Input
+            testID="loginUsernameInput"
+            label={_(msg`Username or email address`)}
+            placeholder=""
+            autoCapitalize="none"
+            autoFocus
+            autoCorrect={false}
+            autoComplete="username"
+            returnKeyType="next"
+            textContentType="username"
+            keyboardType="ascii-capable"
+            defaultValue={initialHandle || ''}
+            onChangeText={v => {
+              identifierValueRef.current = v
+            }}
+            onSubmitEditing={() => {
+              passwordRef.current?.focus()
+            }}
+            blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field
+            editable={!isProcessing}
+            accessibilityHint={_(
+              msg`Enter the username or email address you used when you created your account`,
+            )}
+          />
+        </TextField.Root>
       </View>
+
+      <View>
+        <TextField.LabelText>
+          <Trans>Password</Trans>
+        </TextField.LabelText>
+        <TextField.Root>
+          <TextField.Icon icon={Lock} />
+          <TextField.Input
+            testID="loginPasswordInput"
+            inputRef={passwordRef}
+            label={_(msg`Password`)}
+            placeholder=""
+            autoCapitalize="none"
+            autoCorrect={false}
+            autoComplete="password"
+            returnKeyType="done"
+            enablesReturnKeyAutomatically={true}
+            secureTextEntry={true}
+            textContentType="password"
+            clearButtonMode="while-editing"
+            onChangeText={v => {
+              passwordValueRef.current = v
+            }}
+            onSubmitEditing={onPressNext}
+            blurOnSubmit={false} // HACK: https://github.com/facebook/react-native/issues/21911#issuecomment-558343069 Keyboard blur behavior is now handled in onSubmitEditing
+            editable={!isProcessing}
+            accessibilityHint={_(msg`Enter your password`)}
+          />
+          <Button
+            testID="forgotPasswordButton"
+            onPress={onPressForgotPassword}
+            label={_(msg`Forgot password?`)}
+            accessibilityHint={_(msg`Opens password reset form`)}
+            variant="solid"
+            color="secondary"
+            style={[
+              a.rounded_sm,
+              // t.atoms.bg_contrast_100,
+              {marginLeft: 'auto', left: 6, padding: 6},
+              a.z_10,
+            ]}>
+            <ButtonText>
+              <Trans>Forgot?</Trans>
+            </ButtonText>
+          </Button>
+        </TextField.Root>
+      </View>
+
       {isAuthFactorTokenNeeded && (
         <View>
           <TextField.LabelText>