UI tweaks and nits for starter packs (#4548)

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
Co-authored-by: Paul Frazee <pfrazee@gmail.com>
Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
fix truncation on native (#4575)

src/view/com/auth/LoggedOut.tsx

@@ -7,7 +7,6 @@ import {useNavigation} from '@react-navigation/native'
 
 import {useAnalytics} from '#/lib/analytics/analytics'
 import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {logEvent} from '#/lib/statsig/statsig'
 import {s} from '#/lib/styles'
 import {isIOS, isNative} from '#/platform/detection'
@@ -51,7 +50,6 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
       return ScreenState.S_LoginOrCreateAccount
     }
   })
-  const {isMobile} = useWebMediaQueries()
   const {clearRequestedAccount} = useLoggedOutViewControls()
   const navigation = useNavigation<NavigationProp>()
 
@@ -73,21 +71,9 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
   }, [navigation])
 
   return (
-    <View
-      testID="noSessionView"
-      style={[
-        s.hContentRegion,
-        pal.view,
-        {
-          // only needed if dismiss button is present
-          paddingTop:
-            onDismiss && isMobile && screenState !== ScreenState.S_StarterPack
-              ? 40
-              : 0,
-        },
-      ]}>
+    <View testID="noSessionView" style={[s.hContentRegion, pal.view]}>
       <ErrorBoundary>
-        {onDismiss && screenState !== ScreenState.S_StarterPack ? (
+        {onDismiss && screenState === ScreenState.S_LoginOrCreateAccount ? (
           <Pressable
             accessibilityHint={_(msg`Go back`)}
             accessibilityLabel={_(msg`Go back`)}

src/view/com/notifications/FeedItem.tsx

@@ -53,7 +53,7 @@ import {PreviewableUserAvatar, UserAvatar} from '../util/UserAvatar'
 
 import hairlineWidth = StyleSheet.hairlineWidth
 import {parseTenorGif} from '#/lib/strings/embed-player'
-import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
+import {StarterPack} from '#/components/icons/StarterPack'
 
 const MAX_AUTHORS = 5
 
@@ -189,7 +189,7 @@ let FeedItem = ({
   } else if (item.type === 'starter-pack-signup') {
     icon = (
       <View style={{height: 30, width: 30}}>
-        <StarterPackIcon />
+        <StarterPack width={30} gradient="sky" />
       </View>
     )
     action = _(msg`signed up with your starter pack`)

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -23,7 +23,7 @@ import {CenteredView} from '../util/Views'
 import hairlineWidth = StyleSheet.hairlineWidth
 
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
-import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
+import {StarterPack} from '#/components/icons/StarterPack'
 
 export function ProfileSubpageHeader({
   isLoading,
@@ -130,7 +130,7 @@ export function ProfileSubpageHeader({
           accessibilityHint=""
           style={{width: 58}}>
           {avatarType === 'starter-pack' ? (
-            <StarterPackIcon width={58} height={58} />
+            <StarterPack width={58} gradient="sky" />
           ) : (
             <UserAvatar type={avatarType} size={58} avatar={avatar} />
           )}

src/view/screens/Home.tsx

@@ -22,13 +22,6 @@ import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
 import {useOTAUpdates} from 'lib/hooks/useOTAUpdates'
 import {useRequestNotificationsPermission} from 'lib/notifications/notifications'
 import {HomeTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
-import {parseStarterPackUri} from 'lib/strings/starter-pack'
-import {isWeb} from 'platform/detection'
-import {useLoggedOutViewControls} from 'state/shell/logged-out'
-import {
-  useActiveStarterPack,
-  useSetActiveStarterPack,
-} from 'state/shell/starter-pack'
 import {FeedPage} from 'view/com/feeds/FeedPage'
 import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState'
@@ -37,40 +30,11 @@ import {FollowingEndOfFeed} from 'view/com/posts/FollowingEndOfFeed'
 import {NoFeedsPinned} from '#/screens/Home/NoFeedsPinned'
 import {HomeHeader} from '../com/home/HomeHeader'
 
-type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
+type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home' | 'Start'>
 export function HomeScreen(props: Props) {
-  const {navigation} = props
-  const {hasSession} = useSession()
   const {data: preferences} = usePreferencesQuery()
   const {data: pinnedFeedInfos, isLoading: isPinnedFeedsLoading} =
     usePinnedFeedsInfos()
-  const activeStarterPack = useActiveStarterPack()
-  const setActiveStarterPack = useSetActiveStarterPack()
-  const {setShowLoggedOut, requestSwitchToAccount} = useLoggedOutViewControls()
-
-  React.useEffect(() => {
-    // This will be true if the app was launched with a starter pack referral.
-    if (activeStarterPack?.uri) {
-      if (hasSession) {
-        const parsed = parseStarterPackUri(activeStarterPack.uri)
-        if (!parsed) return
-        setActiveStarterPack(undefined)
-        navigation.navigate('StarterPack', parsed)
-      } else {
-        setShowLoggedOut(true)
-        requestSwitchToAccount({
-          requestedAccount: isWeb ? 'starterpack' : 'new',
-        })
-      }
-    }
-  }, [
-    hasSession,
-    setShowLoggedOut,
-    requestSwitchToAccount,
-    activeStarterPack,
-    setActiveStarterPack,
-    navigation,
-  ])
 
   if (preferences && pinnedFeedInfos && !isPinnedFeedsLoading) {
     return (

src/view/screens/Profile.tsx

@@ -447,6 +447,7 @@ function ProfileScreenLoaded({
           ? ({headerHeight, isFocused, scrollElRef}) => (
               <ProfileStarterPacks
                 ref={starterPacksSectionRef}
+                isMe={isMe}
                 starterPacksQuery={starterPacksQuery}
                 scrollElRef={scrollElRef as ListRef}
                 headerOffset={headerHeight}

src/view/screens/Storybook/Icons.tsx

@@ -45,6 +45,14 @@ export function Icons() {
         <Loader size="lg" fill={t.atoms.text.color} />
         <Loader size="xl" fill={t.atoms.text.color} />
       </View>
+
+      <View style={[a.flex_row, a.gap_xl]}>
+        <Globe size="xs" gradient="sky" />
+        <Globe size="sm" gradient="sky" />
+        <Globe size="md" gradient="sky" />
+        <Globe size="lg" gradient="sky" />
+        <Globe size="xl" gradient="sky" />
+      </View>
     </View>
   )
 }

src/view/shell/desktop/LeftNav.tsx

@@ -100,12 +100,18 @@ function ProfileCard() {
   )
 }
 
+const HIDDEN_BACK_BNT_ROUTES = ['StarterPackWizard', 'StarterPackEdit']
+
 function BackBtn() {
   const {isTablet} = useWebMediaQueries()
   const pal = usePalette('default')
   const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
-  const shouldShow = useNavigationState(state => !isStateAtTabRoot(state))
+  const shouldShow = useNavigationState(
+    state =>
+      !isStateAtTabRoot(state) &&
+      !HIDDEN_BACK_BNT_ROUTES.includes(getCurrentRoute(state).name),
+  )
 
   const onPressBack = React.useCallback(() => {
     if (navigation.canGoBack()) {