show bottom bar on web tablet breakpoints when logged out (signup cta) (#2747)

* show signup bottom bar on web tablet

* show signup bottom bar on web tablet

* comment

* adjust load latest btn position based on logged in/out
zio/stable
Hailey 2024-02-04 12:54:07 -08:00 committed by GitHub
parent 250b48d5a2
commit 0bbe2c5e32
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 5 deletions

View File

@ -10,6 +10,7 @@ import Animated from 'react-native-reanimated'
const AnimatedTouchableOpacity =
Animated.createAnimatedComponent(TouchableOpacity)
import {isWeb} from 'platform/detection'
import {useSession} from 'state/session'
export function LoadLatestBtn({
onPress,
@ -21,9 +22,14 @@ export function LoadLatestBtn({
showIndicator: boolean
}) {
const pal = usePalette('default')
const {isDesktop, isTablet, isMobile} = useWebMediaQueries()
const {hasSession} = useSession()
const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
const {fabMinimalShellTransform} = useMinimalShellMode()
// Adjust height of the fab if we have a session only on mobile web. If we don't have a session, we want to adjust
// it on both tablet and mobile since we are showing the bottom bar (see createNativeStackNavigatorWithAuth)
const showBottomBar = hasSession ? isMobile : isTabletOrMobile
return (
<AnimatedTouchableOpacity
style={[
@ -32,7 +38,7 @@ export function LoadLatestBtn({
isTablet && styles.loadLatestTablet,
pal.borderDark,
pal.view,
isMobile && fabMinimalShellTransform,
showBottomBar && fabMinimalShellTransform,
]}
onPress={onPress}
hitSlop={HITSLOP_20}

View File

@ -101,7 +101,7 @@ function NativeStackNavigator({
const onboardingState = useOnboardingState()
const {showLoggedOut} = useLoggedOutView()
const {setShowLoggedOut} = useLoggedOutViewControls()
const {isMobile} = useWebMediaQueries()
const {isMobile, isTabletOrMobile} = useWebMediaQueries()
if ((!PWI_ENABLED || activeRouteRequiresAuth) && !hasSession) {
return <LoggedOut />
}
@ -134,6 +134,10 @@ function NativeStackNavigator({
}
}
// Show the bottom bar if we have a session only on mobile web. If we don't have a session, we want to show it
// on both tablet and mobile web so that we see the sign up CTA.
const showBottomBar = hasSession ? isMobile : isTabletOrMobile
return (
<NavigationContent>
<NativeStackView
@ -142,8 +146,8 @@ function NativeStackNavigator({
navigation={navigation}
descriptors={newDescriptors}
/>
{isWeb && isMobile && <BottomBarWeb />}
{isWeb && !isMobile && (
{isWeb && showBottomBar && <BottomBarWeb />}
{isWeb && !showBottomBar && (
<>
<DesktopLeftNav />
<DesktopRightNav routeName={activeRoute.name} />