diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx
index cef376c05f..a20f2d49ec 100644
--- a/src/view/com/auth/SplashScreen.web.tsx
+++ b/src/view/com/auth/SplashScreen.web.tsx
@@ -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 (
-
+
- Bluesky
- See what's next
-
-
-
- Create a new account
-
-
-
- Sign in
-
-
+
+ Bluesky
+
+
+ See what's next
+
+ {isDesktopWeb && (
+
+
+
+ Create a new account
+
+
+
+ Sign in
+
+
+ )}
{' '}
to try the beta before it's publicly available.
+ {isMobileWeb && (
+ <>
+
+
+
+ >
+ )}
+
)
}
+function Footer() {
+ const pal = usePalette('default')
+ return (
+
+
+
+
+
+ )
+}
+
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,
+ },
})
diff --git a/src/view/com/auth/util/HelpTip.tsx b/src/view/com/auth/util/HelpTip.tsx
index 3ea4437df2..65f7278d6b 100644
--- a/src/view/com/auth/util/HelpTip.tsx
+++ b/src/view/com/auth/util/HelpTip.tsx
@@ -13,8 +13,10 @@ export function HelpTip({text}: {text: string}) {
const fg = useColorSchemeStyle({color: colors.gray5}, {color: colors.gray4})
return (
-
-
+
+
+
+
{text}
@@ -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,
diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx
index 3439b0c896..1b233cf37b 100644
--- a/src/view/com/modals/Modal.web.tsx
+++ b/src/view/com/modals/Modal.web.tsx
@@ -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}) {
- {element}
+
+ {element}
+
@@ -99,8 +107,13 @@ const styles = StyleSheet.create({
},
container: {
width: 500,
+ maxWidth: '100vw',
paddingVertical: 20,
paddingHorizontal: 24,
borderRadius: 8,
},
+ containerMobile: {
+ borderRadius: 0,
+ paddingHorizontal: 0,
+ },
})
diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
index a588c99a15..54aba48f01 100644
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@@ -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
- }
return (
@@ -57,21 +52,6 @@ export const Shell: React.FC = observer(() => {
)
})
-function NoMobileWeb() {
- const pal = usePalette('default')
- return (
-
-
- We're so sorry!
-
-
- This app is not available for mobile Web yet. Please open it on your
- desktop or download the iOS app.
-
-
- )
-}
-
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,
- },
})