Handle logged out mobile web better

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 (
     <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={isMobileWeb ? styles.titleMobile : styles.title}>
-          <Text style={styles.subtitle}>See what's next</Text>
+            Bluesky
-          <View testID="signinOrCreateAccount" style={styles.btns}>
+          </Text>
-            <TouchableOpacity
+          <Text style={isMobileWeb ? styles.subtitleMobile : styles.subtitle}>
-              testID="createAccountButton"
+            See what's next
-              style={[styles.btn, {backgroundColor: colors.blue3}]}
+          </Text>
-              onPress={onPressCreateAccount}>
+          {isDesktopWeb && (
-              <Text style={[s.white, styles.btnLabel]}>
+            <View testID="signinOrCreateAccount" style={styles.btns}>
-                Create a new account
+              <TouchableOpacity
-              </Text>
+                testID="createAccountButton"
-            </TouchableOpacity>
+                style={[styles.btn, {backgroundColor: colors.blue3}]}
-            <TouchableOpacity
+                onPress={onPressCreateAccount}>
-              testID="signInButton"
+                <Text style={[s.white, styles.btnLabel]}>
-              style={[styles.btn, pal.btn]}
+                  Create a new account
-              onPress={onPressSignin}>
+                </Text>
-              <Text style={[pal.text, styles.btnLabel]}>Sign in</Text>
+              </TouchableOpacity>
-            </TouchableOpacity>
+              <TouchableOpacity
-          </View>
+                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,
+    height: '100%',
-    paddingVertical: 40,
+    justifyContent: 'center',
-    paddingBottom: 50,
+    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,
+  },
 })

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 (
     <View style={[styles.helptip, bg]}>
-      <InfoCircleIcon size={18} style={fg} strokeWidth={1.5} />
+      <View style={styles.icon}>
-      <Text type="xs-medium" style={[fg, s.ml5]}>
+        <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,

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}) {
     <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,
+  },
 })

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 <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,
-  },
 })