🤫 (#2211)

* Add new assets

* Add splashiness

* Add butter icon, spread it

* Cream together eggs, sugar, and vanilla

* Hi, I'd like to place and order. Yeah, none pizza with left beef, plz.

* test

* Refine animation

* tweak

* tweak

* tweak

* Tweak

* Simplify

* Cleanup

* Fix android logo

---------

Co-authored-by: Ansh Nanda <anshnanda10@gmail.com>

src/view/com/auth/SplashScreen.tsx

@@ -7,6 +7,8 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {CenteredView} from '../util/Views'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {Logo} from '#/view/icons/Logo'
+import {Logotype} from '#/view/icons/Logotype'
 
 export const SplashScreen = ({
   onPressSignin,
@@ -22,11 +24,14 @@ export const SplashScreen = ({
     <CenteredView style={[styles.container, pal.view]}>
       <ErrorBoundary>
         <View style={styles.hero}>
-          <Text style={[styles.title, pal.link]}>
-            <Trans>Bluesky</Trans>
-          </Text>
-          <Text style={[styles.subtitle, pal.textLight]}>
-            <Trans>See what's next</Trans>
+          <Logo width={92} fill="sky" />
+
+          <View style={{paddingTop: 40, paddingBottom: 6}}>
+            <Logotype width={161} />
+          </View>
+
+          <Text type="lg-medium" style={[pal.textLight]}>
+            <Trans>What's next?</Trans>
           </Text>
         </View>
         <View testID="signinOrCreateAccount" style={styles.btns}>
@@ -65,6 +70,7 @@ const styles = StyleSheet.create({
   hero: {
     flex: 2,
     justifyContent: 'center',
+    alignItems: 'center',
   },
   btns: {
     paddingBottom: 40,

src/view/com/auth/SplashScreen.web.tsx

@@ -10,6 +10,8 @@ import {CenteredView} from '../util/Views'
 import {isWeb} from 'platform/detection'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {Trans} from '@lingui/macro'
+import {Logo} from '#/view/icons/Logo'
+import {Logotype} from '#/view/icons/Logotype'
 
 export const SplashScreen = ({
   onDismiss,
@@ -55,14 +57,15 @@ export const SplashScreen = ({
             styles.containerInner,
             isMobileWeb && styles.containerInnerMobile,
             pal.border,
+            {alignItems: 'center'},
           ]}>
           <ErrorBoundary>
-            <Text style={isMobileWeb ? styles.titleMobile : styles.title}>
-              Bluesky
-            </Text>
-            <Text style={isMobileWeb ? styles.subtitleMobile : styles.subtitle}>
-              See what's next
-            </Text>
+            <Logo width={92} fill="sky" />
+
+            <View style={{paddingTop: 40, paddingBottom: 20}}>
+              <Logotype width={161} />
+            </View>
+
             <View testID="signinOrCreateAccount" style={styles.btns}>
               <TouchableOpacity
                 testID="createAccountButton"
@@ -117,8 +120,6 @@ function Footer({styles}: {styles: ReturnType<typeof useStyles>}) {
   )
 }
 const useStyles = () => {
-  const {isTabletOrMobile} = useWebMediaQueries()
-  const isMobileWeb = isWeb && isTabletOrMobile
   return StyleSheet.create({
     container: {
       height: '100%',
@@ -161,8 +162,7 @@ const useStyles = () => {
       paddingBottom: 30,
     },
     btns: {
-      flexDirection: isMobileWeb ? 'column' : 'row',
-      gap: 20,
+      gap: 10,
       justifyContent: 'center',
       paddingBottom: 40,
     },

src/view/com/pager/FeedsTabBarMobile.tsx

@@ -3,12 +3,9 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {TabBar} from 'view/com/pager/TabBar'
 import {RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {Link} from '../util/Link'
-import {Text} from '../util/text/Text'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
-import {s} from 'lib/styles'
 import {HITSLOP_10} from 'lib/constants'
 import Animated from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
@@ -21,17 +18,17 @@ import {usePinnedFeedsInfos} from '#/state/queries/feed'
 import {isWeb} from 'platform/detection'
 import {useNavigation} from '@react-navigation/native'
 import {NavigationProp} from 'lib/routes/types'
+import {Logo} from '#/view/icons/Logo'
 
 export function FeedsTabBar(
   props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
 ) {
   const pal = usePalette('default')
-  const {isSandbox, hasSession} = useSession()
+  const {hasSession} = useSession()
   const {_} = useLingui()
   const setDrawerOpen = useSetDrawerOpen()
   const navigation = useNavigation<NavigationProp>()
   const {feeds, hasPinnedCustom} = usePinnedFeedsInfos()
-  const brandBlue = useColorSchemeStyle(s.brandBlue, s.blue3)
   const {headerHeight} = useShellLayout()
   const {headerMinimalShellTransform} = useMinimalShellMode()
   const pinnedDisplayNames = hasSession ? feeds.map(f => f.displayName) : []
@@ -86,9 +83,9 @@ export function FeedsTabBar(
             />
           </TouchableOpacity>
         </View>
-        <Text style={[brandBlue, s.bold, styles.title]}>
-          {isSandbox ? 'SANDBOX' : 'Bluesky'}
-        </Text>
+        <View>
+          <Logo width={30} />
+        </View>
         <View style={[pal.view, {width: 18}]}>
           {hasSession && (
             <Link