new illustration for splash screen

src/view/com/auth/LoggedOut.tsx

@@ -7,6 +7,7 @@ import {useQueryClient} from '@tanstack/react-query'
 
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {logEvent} from '#/lib/statsig/statsig'
+import {isNative} from '#/platform/detection'
 import {STALE} from '#/state/queries'
 import {profilesQueryKey} from '#/state/queries/profile'
 import {useAgent, useSession} from '#/state/session'
@@ -77,13 +78,16 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
     clearRequestedAccount()
   }, [clearRequestedAccount, onDismiss])
 
+  const fullBleed =
+    isNative && screenState === ScreenState.S_LoginOrCreateAccount
+
   return (
     <View
       testID="noSessionView"
       style={[
         a.util_screen_outer,
         t.atoms.bg,
-        {paddingTop: insets.top, paddingBottom: insets.bottom},
+        !fullBleed && {paddingTop: insets.top, paddingBottom: insets.bottom},
       ]}>
       <ErrorBoundary>
         {onDismiss && screenState === ScreenState.S_LoginOrCreateAccount ? (

src/view/com/auth/SplashScreen.tsx

@@ -1,18 +1,17 @@
 import {View} from 'react-native'
+import {SystemBars} from 'react-native-edge-to-edge'
 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {ImageBackground} from 'expo-image'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useHaptics} from '#/lib/haptics'
-import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
-import {CenteredView} from '#/view/com/util/Views'
-import {Logo} from '#/view/icons/Logo'
-import {Logotype} from '#/view/icons/Logotype'
-import {atoms as a, useTheme} from '#/alf'
-import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
+import {atoms as a, ThemeProvider, tokens, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
-import {Text} from '#/components/Typography'
+import {LogoMark, LogoType} from '#/components/icons/Logo'
+
+const BACKGROUND_GREEN = '#689C60'
 
 export const SplashScreen = ({
   onPressSignin,
@@ -28,83 +27,67 @@ export const SplashScreen = ({
   const insets = useSafeAreaInsets()
 
   return (
-    <CenteredView style={[a.h_full, a.flex_1]}>
-      <Animated.View
-        entering={FadeIn.duration(90)}
-        exiting={FadeOut.duration(90)}
-        style={[a.flex_1]}>
-        <ErrorBoundary>
-          <View style={[a.flex_1, a.justify_center, a.align_center]}>
-            <Logo width={92} fill="sky" />
-
-            <View style={[a.pb_sm, a.pt_5xl]}>
-              <Logotype width={161} fill={t.atoms.text.color} />
-            </View>
-
-            <Text
-              style={[
-                a.text_md,
-                a.font_semi_bold,
-                t.atoms.text_contrast_medium,
-                a.text_center,
-              ]}>
-              <Trans>What's up?</Trans>
-            </Text>
-          </View>
-
-          <View
-            testID="signinOrCreateAccount"
-            style={[a.px_xl, a.gap_md, a.pb_2xl]}>
-            <Button
-              testID="createAccountButton"
-              onPress={() => {
-                onPressCreateAccount()
-                playHaptic('Light')
-              }}
-              label={_(msg`Create new account`)}
-              accessibilityHint={_(
-                msg`Opens flow to create a new Bluesky account`,
-              )}
-              size="large"
-              variant="solid"
-              color="primary">
-              <ButtonText>
-                <Trans>Create account</Trans>
-              </ButtonText>
-            </Button>
-            <Button
-              testID="signInButton"
-              onPress={() => {
-                onPressSignin()
-                playHaptic('Light')
-              }}
-              label={_(msg`Sign in`)}
-              accessibilityHint={_(
-                msg`Opens flow to sign in to your existing Bluesky account`,
-              )}
-              size="large"
-              variant="solid"
-              color="secondary">
-              <ButtonText>
-                <Trans>Sign in</Trans>
-              </ButtonText>
-            </Button>
-          </View>
-          <View
-            style={[
-              a.px_lg,
-              a.pt_md,
-              a.pb_2xl,
-              a.justify_center,
-              a.align_center,
-            ]}>
-            <View>
-              <AppLanguageDropdown />
-            </View>
-          </View>
-          <View style={{height: insets.bottom}} />
-        </ErrorBoundary>
-      </Animated.View>
-    </CenteredView>
+    <Animated.View
+      style={[a.h_full, a.flex_1, {backgroundColor: BACKGROUND_GREEN}]}
+      entering={FadeIn.duration(90)}
+      exiting={FadeOut.duration(90)}>
+      <SystemBars style={{statusBar: 'dark'}} />
+      <ImageBackground
+        source={require('../../../../assets/splash-illustration.webp')}
+        contentFit="cover"
+        style={[a.flex_1, a.align_center]}>
+        <Animated.View
+          style={[a.absolute, {top: '15%'}, a.align_center, a.gap_2xs]}>
+          <LogoMark width={85} />
+          <LogoType width={92.1} height={24.56} />
+        </Animated.View>
+      </ImageBackground>
+      <ThemeProvider theme="dark">
+        <View
+          style={[
+            a.w_full,
+            a.flex_shrink_0,
+            a.px_5xl,
+            a.gap_sm,
+            {paddingBottom: insets.bottom + tokens.space.sm},
+          ]}>
+          <Button
+            testID="createAccountButton"
+            onPress={() => {
+              onPressCreateAccount()
+              playHaptic('Light')
+            }}
+            label={_(msg`Get started`)}
+            accessibilityHint={_(
+              msg`Opens flow to create a new Bluesky account`,
+            )}
+            size="large"
+            color="secondary_inverted"
+            style={[{backgroundColor: t.palette.white}, a.shadow_sm]}>
+            <ButtonText>
+              <Trans>Get started</Trans>
+            </ButtonText>
+          </Button>
+          <Button
+            testID="signInButton"
+            onPress={() => {
+              onPressSignin()
+              playHaptic('Light')
+            }}
+            label={_(msg`Sign in`)}
+            accessibilityHint={_(
+              msg`Opens flow to sign in to your existing Bluesky account`,
+            )}
+            size="large"
+            color="secondary"
+            style={[a.bg_transparent]}
+            hoverStyle={[a.bg_transparent, {opacity: 0.8}]}>
+            <ButtonText style={{color: t.palette.white}}>
+              <Trans>Sign in</Trans>
+            </ButtonText>
+          </Button>
+        </View>
+      </ThemeProvider>
+    </Animated.View>
   )
 }