Improvements to UI in web logged-out views (#1341)

* Add LoggedOutLayout for desktop/tablet web

* Avoid screen flash in the transition to onboarding

* Fix comment

src/state/models/ui/create-account.ts

@@ -109,13 +109,8 @@ export class CreateAccountModel {
     this.setError('')
     this.setIsProcessing(true)
 
-    // open the onboarding screens after the session is created
-    const sessionReadySub = this.rootStore.onSessionReady(() => {
-      sessionReadySub.remove()
-      this.rootStore.onboarding.start()
-    })
-
     try {
+      this.rootStore.onboarding.start() // start now to avoid flashing the wrong view
       await this.rootStore.session.createAccount({
         service: this.serviceUrl,
         email: this.email,
@@ -125,7 +120,7 @@ export class CreateAccountModel {
       })
       track('Create Account')
     } catch (e: any) {
-      sessionReadySub.remove()
+      this.rootStore.onboarding.skip() // undo starting the onboard
       let errMsg = e.toString()
       if (e instanceof ComAtprotoServerCreateAccount.InvalidInviteCodeError) {
         errMsg =

src/view/com/auth/LoggedOut.tsx

@@ -9,7 +9,6 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {SplashScreen} from './SplashScreen'
-import {CenteredView} from '../util/Views'
 
 enum ScreenState {
   S_LoginOrCreateAccount,
@@ -43,8 +42,7 @@ export const LoggedOut = observer(() => {
   }
 
   return (
-    <CenteredView style={[s.hContentRegion, pal.view]}>
+    <SafeAreaView testID="noSessionView" style={[s.hContentRegion, pal.view]}>
-      <SafeAreaView testID="noSessionView" style={s.hContentRegion}>
       <ErrorBoundary>
         {screenState === ScreenState.S_Login ? (
           <Login
@@ -62,6 +60,5 @@ export const LoggedOut = observer(() => {
         ) : undefined}
       </ErrorBoundary>
     </SafeAreaView>
-    </CenteredView>
   )
 })

src/view/com/auth/create/CreateAccount.tsx

@@ -10,6 +10,7 @@ import {
 import {observer} from 'mobx-react-lite'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {Text} from '../../util/text/Text'
+import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout'
 import {s} from 'lib/styles'
 import {useStores} from 'state/index'
 import {CreateAccountModel} from 'state/models/ui/create-account'
@@ -65,6 +66,10 @@ export const CreateAccount = observer(
     }, [model, track])
 
     return (
+      <LoggedOutLayout
+        leadin={`Step ${model.step}`}
+        title="Create Account"
+        description="We're so excited to have you join us!">
         <ScrollView testID="createAccount" style={pal.view}>
           <KeyboardAvoidingView behavior="padding">
             <View style={styles.stepContainer}>
@@ -119,6 +124,7 @@ export const CreateAccount = observer(
             <View style={s.footerSpacer} />
           </KeyboardAvoidingView>
         </ScrollView>
+      </LoggedOutLayout>
     )
   },
 )

src/view/com/auth/create/Policies.tsx

@@ -93,6 +93,7 @@ function validWebLink(url?: string): string | undefined {
 
 const styles = StyleSheet.create({
   policies: {
+    flexDirection: 'row',
     gap: 8,
   },
   errorIcon: {

src/view/com/auth/login/Login.tsx

@@ -17,6 +17,7 @@ import {BskyAgent} from '@atproto/api'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {Text} from '../../util/text/Text'
 import {UserAvatar} from '../../util/UserAvatar'
+import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout'
 import {s, colors} from 'lib/styles'
 import {createFullHandle} from 'lib/strings/handles'
 import {toNiceDomain} from 'lib/strings/url-helpers'
@@ -99,11 +100,12 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
   }
 
   return (
-    <KeyboardAvoidingView
+    <KeyboardAvoidingView testID="signIn" behavior="padding" style={pal.view}>
-      testID="signIn"
-      behavior="padding"
-      style={[pal.view, s.pt10]}>
       {currentForm === Forms.Login ? (
+        <LoggedOutLayout
+          leadin=""
+          title="Sign in"
+          description="Enter your username and password">
           <LoginForm
             store={store}
             error={error}
@@ -116,15 +118,25 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
             onPressForgotPassword={onPressForgotPassword}
             onPressRetryConnect={onPressRetryConnect}
           />
+        </LoggedOutLayout>
       ) : undefined}
       {currentForm === Forms.ChooseAccount ? (
+        <LoggedOutLayout
+          leadin=""
+          title="Sign in as..."
+          description="Select from an existing account">
           <ChooseAccountForm
             store={store}
             onSelectAccount={onSelectAccount}
             onPressBack={onPressBack}
           />
+        </LoggedOutLayout>
       ) : undefined}
       {currentForm === Forms.ForgotPassword ? (
+        <LoggedOutLayout
+          leadin=""
+          title="Forgot Password"
+          description="Let's get your password reset!">
           <ForgotPasswordForm
             store={store}
             error={error}
@@ -135,8 +147,13 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
             onPressBack={gotoForm(Forms.Login)}
             onEmailSent={gotoForm(Forms.SetNewPassword)}
           />
+        </LoggedOutLayout>
       ) : undefined}
       {currentForm === Forms.SetNewPassword ? (
+        <LoggedOutLayout
+          leadin=""
+          title="Forgot Password"
+          description="Let's get your password reset!">
           <SetNewPasswordForm
             store={store}
             error={error}
@@ -145,6 +162,7 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
             onPressBack={gotoForm(Forms.ForgotPassword)}
             onPasswordSet={gotoForm(Forms.PasswordUpdated)}
           />
+        </LoggedOutLayout>
       ) : undefined}
       {currentForm === Forms.PasswordUpdated ? (
         <PasswordUpdatedForm onPressNext={gotoForm(Forms.Login)} />
@@ -834,9 +852,9 @@ const SetNewPasswordForm = ({
 const PasswordUpdatedForm = ({onPressNext}: {onPressNext: () => void}) => {
   const {screen} = useAnalytics()
 
-  // useEffect(() => {
+  useEffect(() => {
     screen('Signin:PasswordUpdatedForm')
-  // }, [screen])
+  }, [screen])
 
   const pal = usePalette('default')
   return (

src/view/com/util/layouts/LoggedOutLayout.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {Text} from '../text/Text'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
+
+export const LoggedOutLayout = ({
+  leadin,
+  title,
+  description,
+  children,
+}: React.PropsWithChildren<{
+  leadin: string
+  title: string
+  description: string
+}>) => {
+  const {isMobile, isTabletOrMobile} = useWebMediaQueries()
+  const pal = usePalette('default')
+  const sideBg = useColorSchemeStyle(pal.viewLight, pal.view)
+  const contentBg = useColorSchemeStyle(pal.view, {
+    backgroundColor: pal.colors.background,
+    borderColor: pal.colors.border,
+    borderLeftWidth: 1,
+  })
+
+  if (isMobile) {
+    return <View style={{paddingTop: 10}}>{children}</View>
+  }
+  return (
+    <View style={styles.container}>
+      <View style={[styles.side, sideBg]}>
+        <Text
+          style={[
+            pal.textLight,
+            styles.leadinText,
+            isTabletOrMobile && styles.leadinTextSmall,
+          ]}>
+          {leadin}
+        </Text>
+        <Text
+          style={[
+            pal.link,
+            styles.titleText,
+            isTabletOrMobile && styles.titleTextSmall,
+          ]}>
+          {title}
+        </Text>
+        <Text type="2xl-medium" style={[pal.textLight, styles.descriptionText]}>
+          {description}
+        </Text>
+      </View>
+      <View style={[styles.content, contentBg]}>
+        <View style={styles.contentWrapper}>{children}</View>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: '100vh',
+  },
+  side: {
+    flex: 1,
+    paddingHorizontal: 40,
+    paddingBottom: 80,
+    justifyContent: 'center',
+  },
+  content: {
+    flex: 2,
+    paddingHorizontal: 40,
+    justifyContent: 'center',
+  },
+
+  leadinText: {
+    fontSize: 36,
+    fontWeight: '800',
+    textAlign: 'right',
+  },
+  leadinTextSmall: {
+    fontSize: 24,
+  },
+  titleText: {
+    fontSize: 58,
+    fontWeight: '800',
+    textAlign: 'right',
+  },
+  titleTextSmall: {
+    fontSize: 36,
+  },
+  descriptionText: {
+    maxWidth: 400,
+    marginTop: 10,
+    marginLeft: 'auto',
+    textAlign: 'right',
+  },
+  contentWrapper: {
+    maxWidth: 600,
+  },
+})