MVP of login screen

src/view/com/auth/SplashScreen.tsx

@@ -1,18 +1,23 @@
-import {View} from 'react-native'
+import {useMemo} from 'react'
+import {Image as RNImage, View} from 'react-native'
 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {Image} 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 {Button, ButtonText} from '#/components/Button'
-import {Text} from '#/components/Typography'
+// @ts-ignore
+import splashImagePointer from '../../../../assets/splash/splash-mobile.png'
+// @ts-ignore
+import darkSplashImagePointer from '../../../../assets/splash/splash-mobile-dark.png'
+const splashImageUri = RNImage.resolveAssetSource(splashImagePointer).uri
+const darkSplashImageUri = RNImage.resolveAssetSource(
+  darkSplashImagePointer,
+).uri
 
 export const SplashScreen = ({
   onPressSignin,
@@ -23,38 +28,68 @@ export const SplashScreen = ({
 }) => {
   const t = useTheme()
   const {_} = useLingui()
+  const isDarkMode = t.name !== 'light'
 
   const playHaptic = useHaptics()
-  const insets = useSafeAreaInsets()
+
+  const styles = useMemo(() => {
+    const logoFill = isDarkMode ? 'white' : t.palette.primary_500
+    return {
+      logoFill,
+      logoShadow: isDarkMode
+        ? [
+            t.atoms.shadow_md,
+            {
+              shadowColor: logoFill,
+              shadowOpacity: 0.5,
+              shadowOffset: {
+                width: 0,
+                height: 0,
+              },
+            },
+          ]
+        : [],
+    }
+  }, [t, isDarkMode])
 
   return (
-    <CenteredView style={[a.h_full, a.flex_1]}>
+    <>
+      <Image
+        accessibilityIgnoresInvertColors
+        source={{uri: isDarkMode ? darkSplashImageUri : splashImageUri}}
+        style={[a.absolute, a.inset_0]}
+      />
+
       <Animated.View
         entering={FadeIn.duration(90)}
         exiting={FadeOut.duration(90)}
         style={[a.flex_1]}>
-        <ErrorBoundary>
+        <View
-          <View style={[a.flex_1, a.justify_center, a.align_center]}>
+          style={[a.justify_center, a.align_center, {gap: 6, paddingTop: 46}]}>
-            <Logo width={92} fill="sky" />
+          <Logo width={76} fill={styles.logoFill} style={styles.logoShadow} />
-
+          <Logotype
-            <View style={[a.pb_sm, a.pt_5xl]}>
+            width={91}
-              <Logotype width={161} fill={t.atoms.text.color} />
+            fill={styles.logoFill}
+            style={styles.logoShadow}
+          />
         </View>
 
-            <Text
+        <View style={[a.flex_1]} />
-              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]}>
+          style={[a.px_xl, a.gap_md, a.pb_sm]}>
+          <View
+            style={[
+              t.atoms.shadow_md,
+              {
+                shadowOpacity: 0.1,
+                shadowOffset: {
+                  width: 0,
+                  height: 5,
+                },
+              },
+            ]}>
             <Button
               testID="createAccountButton"
               onPress={() => {
@@ -66,12 +101,13 @@ export const SplashScreen = ({
                 msg`Opens flow to create a new Bluesky account`,
               )}
               size="large"
-              variant="solid"
+              color={isDarkMode ? 'secondary_inverted' : 'secondary'}>
-              color="primary">
               <ButtonText>
                 <Trans>Create account</Trans>
               </ButtonText>
             </Button>
+          </View>
+
           <Button
             testID="signInButton"
             onPress={() => {
@@ -82,29 +118,13 @@ export const SplashScreen = ({
             accessibilityHint={_(
               msg`Opens flow to sign in to your existing Bluesky account`,
             )}
-              size="large"
+            size="large">
-              variant="solid"
+            <ButtonText style={{color: 'white'}}>
-              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>
+    </>
   )
 }