Handle logged out mobile web better

zio/stable
Paul Frazee 2023-03-14 14:59:37 -05:00
parent 41f4385db9
commit 528e14fe90
4 changed files with 118 additions and 52 deletions

View File

@ -1,11 +1,14 @@
import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {Text} from 'view/com/util/text/Text'
import {TextLink} from '../util/Link'
import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
import {s, colors} from 'lib/styles'
import {usePalette} from 'lib/hooks/usePalette'
import {useStores} from 'state/index'
import {CenteredView} from '../util/Views'
import {isDesktopWeb, isMobileWeb} from 'platform/detection'
import {HelpTip} from './util/HelpTip'
export const SplashScreen = ({
onPressSignin,
@ -23,26 +26,38 @@ export const SplashScreen = ({
return (
<CenteredView style={[styles.container, pal.view]}>
<View testID="noSessionView" style={[styles.containerInner, pal.border]}>
<View
testID="noSessionView"
style={[
styles.containerInner,
isMobileWeb && styles.containerInnerMobile,
pal.border,
]}>
<ErrorBoundary>
<Text style={styles.title}>Bluesky</Text>
<Text style={styles.subtitle}>See what's next</Text>
<View testID="signinOrCreateAccount" style={styles.btns}>
<TouchableOpacity
testID="createAccountButton"
style={[styles.btn, {backgroundColor: colors.blue3}]}
onPress={onPressCreateAccount}>
<Text style={[s.white, styles.btnLabel]}>
Create a new account
</Text>
</TouchableOpacity>
<TouchableOpacity
testID="signInButton"
style={[styles.btn, pal.btn]}
onPress={onPressSignin}>
<Text style={[pal.text, styles.btnLabel]}>Sign in</Text>
</TouchableOpacity>
</View>
<Text style={isMobileWeb ? styles.titleMobile : styles.title}>
Bluesky
</Text>
<Text style={isMobileWeb ? styles.subtitleMobile : styles.subtitle}>
See what's next
</Text>
{isDesktopWeb && (
<View testID="signinOrCreateAccount" style={styles.btns}>
<TouchableOpacity
testID="createAccountButton"
style={[styles.btn, {backgroundColor: colors.blue3}]}
onPress={onPressCreateAccount}>
<Text style={[s.white, styles.btnLabel]}>
Create a new account
</Text>
</TouchableOpacity>
<TouchableOpacity
testID="signInButton"
style={[styles.btn, pal.btn]}
onPress={onPressSignin}>
<Text style={[pal.text, styles.btnLabel]}>Sign in</Text>
</TouchableOpacity>
</View>
)}
<Text
type="xl"
style={[styles.notice, pal.textLight]}
@ -55,22 +70,56 @@ export const SplashScreen = ({
</TouchableOpacity>{' '}
to try the beta before it's publicly available.
</Text>
{isMobileWeb && (
<>
<View style={[s.p20, s.mt10]}>
<HelpTip text="Beta testers: the mobile web app isn't quite ready yet. Log in on desktop web or using the iPhone app." />
</View>
</>
)}
</ErrorBoundary>
</View>
<Footer />
</CenteredView>
)
}
function Footer() {
const pal = usePalette('default')
return (
<View style={[styles.footer, pal.view, pal.border]}>
<TextLink
href="https://blueskyweb.xyz"
text="Business"
style={[styles.footerLink, pal.link]}
/>
<TextLink
href="https://blueskyweb.xyz/blog"
text="Blog"
style={[styles.footerLink, pal.link]}
/>
<TextLink
href="https://blueskyweb.xyz/join"
text="Jobs"
style={[styles.footerLink, pal.link]}
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
height: '100%',
},
containerInner: {
borderBottomWidth: 1,
paddingVertical: 40,
paddingBottom: 50,
height: '100%',
justifyContent: 'center',
paddingBottom: '20vh',
paddingHorizontal: 20,
},
containerInnerMobile: {
paddingBottom: 50,
},
title: {
textAlign: 'center',
color: colors.blue3,
@ -78,6 +127,12 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
paddingBottom: 10,
},
titleMobile: {
textAlign: 'center',
color: colors.blue3,
fontSize: 58,
fontWeight: 'bold',
},
subtitle: {
textAlign: 'center',
color: colors.gray5,
@ -85,6 +140,13 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
paddingBottom: 30,
},
subtitleMobile: {
textAlign: 'center',
color: colors.gray5,
fontSize: 42,
fontWeight: 'bold',
paddingBottom: 30,
},
btns: {
flexDirection: 'row',
justifyContent: 'center',
@ -105,4 +167,16 @@ const styles = StyleSheet.create({
paddingHorizontal: 40,
textAlign: 'center',
},
footer: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
padding: 20,
borderTopWidth: 1,
flexDirection: 'row',
},
footerLink: {
marginRight: 20,
},
})

View File

@ -13,8 +13,10 @@ export function HelpTip({text}: {text: string}) {
const fg = useColorSchemeStyle({color: colors.gray5}, {color: colors.gray4})
return (
<View style={[styles.helptip, bg]}>
<InfoCircleIcon size={18} style={fg} strokeWidth={1.5} />
<Text type="xs-medium" style={[fg, s.ml5]}>
<View style={styles.icon}>
<InfoCircleIcon size={18} style={fg} strokeWidth={1.5} />
</View>
<Text type="xs-medium" style={[fg, s.ml5, s.flex1]}>
{text}
</Text>
</View>
@ -22,9 +24,12 @@ export function HelpTip({text}: {text: string}) {
}
const styles = StyleSheet.create({
icon: {
width: 18,
},
helptip: {
flexDirection: 'row',
alignItems: 'center',
alignItems: 'flex-start',
borderRadius: 6,
paddingHorizontal: 10,
paddingVertical: 8,

View File

@ -4,6 +4,7 @@ import {observer} from 'mobx-react-lite'
import {useStores} from 'state/index'
import {usePalette} from 'lib/hooks/usePalette'
import type {Modal as ModalIface} from 'state/models/ui/shell'
import {isMobileWeb} from 'platform/detection'
import * as ConfirmModal from './Confirm'
import * as EditProfileModal from './EditProfile'
@ -79,7 +80,14 @@ function Modal({modal}: {modal: ModalIface}) {
<TouchableWithoutFeedback onPress={onPressMask}>
<View style={styles.mask}>
<TouchableWithoutFeedback onPress={onInnerPress}>
<View style={[styles.container, pal.view]}>{element}</View>
<View
style={[
styles.container,
isMobileWeb && styles.containerMobile,
pal.view,
]}>
{element}
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
@ -99,8 +107,13 @@ const styles = StyleSheet.create({
},
container: {
width: 500,
maxWidth: '100vw',
paddingVertical: 20,
paddingHorizontal: 24,
borderRadius: 8,
},
containerMobile: {
borderRadius: 0,
paddingHorizontal: 0,
},
})

View File

@ -12,7 +12,6 @@ import {Composer} from './Composer.web'
import {usePalette} from 'lib/hooks/usePalette'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
import {s, colors} from 'lib/styles'
import {isMobileWeb} from 'platform/detection'
import {RoutesContainer, FlatNavigator} from '../../Navigation'
const ShellInner = observer(() => {
@ -44,10 +43,6 @@ const ShellInner = observer(() => {
export const Shell: React.FC = observer(() => {
const pageBg = useColorSchemeStyle(styles.bgLight, styles.bgDark)
if (isMobileWeb) {
return <NoMobileWeb />
}
return (
<View style={[s.hContentRegion, pageBg]}>
<RoutesContainer>
@ -57,21 +52,6 @@ export const Shell: React.FC = observer(() => {
)
})
function NoMobileWeb() {
const pal = usePalette('default')
return (
<View style={[pal.view, styles.noMobileWeb]}>
<Text type="title-2xl" style={s.pb20}>
We're so sorry!
</Text>
<Text type="lg">
This app is not available for mobile Web yet. Please open it on your
desktop or download the iOS app.
</Text>
</View>
)
}
const styles = StyleSheet.create({
bgLight: {
backgroundColor: colors.white,
@ -92,10 +72,4 @@ const styles = StyleSheet.create({
viewBorderRight: {
left: 'calc(50vw + 300px)',
},
noMobileWeb: {
height: '100%',
justifyContent: 'center',
paddingHorizontal: 20,
paddingBottom: 40,
},
})