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

1 files changed, 56 insertions, 50 deletions

diff --git a/src/view/com/auth/create/CreateAccount.tsx b/src/view/com/auth/create/CreateAccount.tsx
index d6cb1a0a7..8cf1cfaf5 100644
--- a/src/view/com/auth/create/CreateAccount.tsx
+++ b/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,60 +66,65 @@ export const CreateAccount = observer(
     }, [model, track])
 
     return (
-      <ScrollView testID="createAccount" style={pal.view}>
-        <KeyboardAvoidingView behavior="padding">
-          <View style={styles.stepContainer}>
-            {model.step === 1 && <Step1 model={model} />}
-            {model.step === 2 && <Step2 model={model} />}
-            {model.step === 3 && <Step3 model={model} />}
-          </View>
-          <View style={[s.flexRow, s.pl20, s.pr20]}>
-            <TouchableOpacity
-              onPress={onPressBackInner}
-              testID="backBtn"
-              accessibilityRole="button">
-              <Text type="xl" style={pal.link}>
-                Back
-              </Text>
-            </TouchableOpacity>
-            <View style={s.flex1} />
-            {model.canNext ? (
+      <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}>
+              {model.step === 1 && <Step1 model={model} />}
+              {model.step === 2 && <Step2 model={model} />}
+              {model.step === 3 && <Step3 model={model} />}
+            </View>
+            <View style={[s.flexRow, s.pl20, s.pr20]}>
               <TouchableOpacity
-                testID="nextBtn"
-                onPress={onPressNext}
+                onPress={onPressBackInner}
+                testID="backBtn"
                 accessibilityRole="button">
-                {model.isProcessing ? (
-                  <ActivityIndicator />
-                ) : (
-                  <Text type="xl-bold" style={[pal.link, s.pr5]}>
-                    Next
-                  </Text>
-                )}
-              </TouchableOpacity>
-            ) : model.didServiceDescriptionFetchFail ? (
-              <TouchableOpacity
-                testID="retryConnectBtn"
-                onPress={onPressRetryConnect}
-                accessibilityRole="button"
-                accessibilityLabel="Retry"
-                accessibilityHint="Retries account creation"
-                accessibilityLiveRegion="polite">
-                <Text type="xl-bold" style={[pal.link, s.pr5]}>
-                  Retry
+                <Text type="xl" style={pal.link}>
+                  Back
                 </Text>
               </TouchableOpacity>
-            ) : model.isFetchingServiceDescription ? (
-              <>
-                <ActivityIndicator color="#fff" />
-                <Text type="xl" style={[pal.text, s.pr5]}>
-                  Connecting...
-                </Text>
-              </>
-            ) : undefined}
-          </View>
-          <View style={s.footerSpacer} />
-        </KeyboardAvoidingView>
-      </ScrollView>
+              <View style={s.flex1} />
+              {model.canNext ? (
+                <TouchableOpacity
+                  testID="nextBtn"
+                  onPress={onPressNext}
+                  accessibilityRole="button">
+                  {model.isProcessing ? (
+                    <ActivityIndicator />
+                  ) : (
+                    <Text type="xl-bold" style={[pal.link, s.pr5]}>
+                      Next
+                    </Text>
+                  )}
+                </TouchableOpacity>
+              ) : model.didServiceDescriptionFetchFail ? (
+                <TouchableOpacity
+                  testID="retryConnectBtn"
+                  onPress={onPressRetryConnect}
+                  accessibilityRole="button"
+                  accessibilityLabel="Retry"
+                  accessibilityHint="Retries account creation"
+                  accessibilityLiveRegion="polite">
+                  <Text type="xl-bold" style={[pal.link, s.pr5]}>
+                    Retry
+                  </Text>
+                </TouchableOpacity>
+              ) : model.isFetchingServiceDescription ? (
+                <>
+                  <ActivityIndicator color="#fff" />
+                  <Text type="xl" style={[pal.text, s.pr5]}>
+                    Connecting...
+                  </Text>
+                </>
+              ) : undefined}
+            </View>
+            <View style={s.footerSpacer} />
+          </KeyboardAvoidingView>
+        </ScrollView>
+      </LoggedOutLayout>
     )
   },
 )