Handle logged out mobile web better
parent
41f4385db9
commit
528e14fe90
|
@ -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,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue