use alf for splashscreen (web)

src/view/com/auth/SplashScreen.web.tsx

@@ -1,13 +1,9 @@
 import React from 'react'
-import {StyleSheet, TouchableOpacity, View, Pressable} from 'react-native'
+import {View, Pressable} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-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 {CenteredView} from '../util/Views'
-import {isWeb} from 'platform/detection'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {Trans, msg} from '@lingui/macro'
 import {Logo} from '#/view/icons/Logo'
@@ -16,6 +12,10 @@ import {useLingui} from '@lingui/react'
 import {sanitizeAppLanguageSetting} from '#/locale/helpers'
 import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
 import {APP_LANGUAGES} from '#/locale/languages'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
+import {Text} from '#/components/Typography'
 
 export const SplashScreen = ({
   onDismiss,
@@ -26,10 +26,9 @@ export const SplashScreen = ({
   onPressSignin: () => void
   onPressCreateAccount: () => void
 }) => {
-  const pal = usePalette('default')
+  const {_} = useLingui()
-  const {isTabletOrMobile} = useWebMediaQueries()
+  const t = useTheme()
-  const styles = useStyles()
+  const {isTabletOrMobile: isMobileWeb} = useWebMediaQueries()
-  const isMobileWeb = isWeb && isTabletOrMobile
 
   return (
     <>
@@ -48,61 +47,89 @@ export const SplashScreen = ({
             icon="x"
             size={24}
             style={{
-              color: String(pal.text.color),
+              color: String(t.atoms.text.color),
             }}
           />
         </Pressable>
       )}
 
-      <CenteredView style={[styles.container, pal.view]}>
+      <CenteredView style={[a.h_full, a.flex_1]}>
         <View
           testID="noSessionView"
           style={[
-            styles.containerInner,
+            a.h_full,
-            isMobileWeb && styles.containerInnerMobile,
+            a.justify_center,
-            pal.border,
+            // @ts-ignore web only
-            {alignItems: 'center'},
+            {paddingBottom: '20vh'},
+            isMobileWeb && a.pb_5xl,
+            t.atoms.border_contrast_medium,
+            a.align_center,
+            a.gap_5xl,
           ]}>
           <ErrorBoundary>
+            <View style={[a.justify_center, a.align_center]}>
               <Logo width={92} fill="sky" />
 
-            <View style={{paddingTop: 40, paddingBottom: 20}}>
+              <View style={[a.pb_sm, a.pt_5xl]}>
-              <Logotype width={161} fill={pal.text.color} />
+                <Logotype width={161} fill={t.atoms.text.color} />
               </View>
 
-            <View testID="signinOrCreateAccount" style={styles.btns}>
+              <Text
-              <TouchableOpacity
+                style={[
+                  a.text_md,
+                  a.font_semibold,
+                  t.atoms.text_contrast_medium,
+                ]}>
+                <Trans>What's up?</Trans>
+              </Text>
+            </View>
+
+            <View
+              testID="signinOrCreateAccount"
+              style={[a.w_full, {maxWidth: 320}]}>
+              <Button
                 testID="createAccountButton"
-                style={[styles.btn, {backgroundColor: colors.blue3}]}
                 onPress={onPressCreateAccount}
-                // TODO: web accessibility
+                accessibilityRole="button"
-                accessibilityRole="button">
+                label={_(msg`Create new account`)}
-                <Text style={[s.white, styles.btnLabel]}>
+                accessibilityHint={_(
+                  msg`Opens flow to create a new Bluesky account`,
+                )}
+                style={[a.mx_xl, a.mb_xl]}
+                size="large"
+                variant="solid"
+                color="primary">
+                <ButtonText>
                   <Trans>Create a new account</Trans>
-                </Text>
+                </ButtonText>
-              </TouchableOpacity>
+              </Button>
-              <TouchableOpacity
+              <Button
                 testID="signInButton"
-                style={[styles.btn, pal.btn]}
                 onPress={onPressSignin}
-                // TODO: web accessibility
+                label={_(msg`Sign in`)}
-                accessibilityRole="button">
+                accessibilityHint={_(
-                <Text style={[pal.text, styles.btnLabel]}>
+                  msg`Opens flow to sign into your existing Bluesky account`,
+                )}
+                style={[a.mx_xl, a.mb_xl]}
+                size="large"
+                variant="solid"
+                color="secondary">
+                <ButtonText>
                   <Trans>Sign In</Trans>
-                </Text>
+                </ButtonText>
-              </TouchableOpacity>
+              </Button>
             </View>
           </ErrorBoundary>
         </View>
-        <Footer styles={styles} />
+        <Footer />
       </CenteredView>
     </>
   )
 }
 
-function Footer({styles}: {styles: ReturnType<typeof useStyles>}) {
+function Footer() {
-  const pal = usePalette('default')
   const {_} = useLingui()
+  const t = useTheme()
 
   const langPrefs = useLanguagePrefs()
   const setLangPrefs = useLanguagePrefsApi()
@@ -122,39 +149,45 @@ function Footer({styles}: {styles: ReturnType<typeof useStyles>}) {
   )
 
   return (
-    <View style={[styles.footer, pal.view, pal.border]}>
+    <View
+      style={[
+        a.absolute,
+        a.inset_0,
+        {top: 'auto'},
+        a.p_xl,
+        a.border_t,
+        a.flex_row,
+        a.flex_wrap,
+        a.gap_xl,
+        a.flex_1,
+        t.atoms.border_contrast_medium,
+      ]}>
       <TextLink
         href="https://bsky.social"
         text={_(msg`Business`)}
-        style={[styles.footerLink, pal.link]}
+        style={{color: t.palette.primary_500}}
       />
       <TextLink
         href="https://bsky.social/about/blog"
         text={_(msg`Blog`)}
-        style={[styles.footerLink, pal.link]}
+        style={{color: t.palette.primary_500}}
       />
       <TextLink
         href="https://bsky.social/about/join"
         text={_(msg`Jobs`)}
-        style={[styles.footerLink, pal.link]}
+        style={{color: t.palette.primary_500}}
       />
 
-      <View style={styles.footerDivider} />
+      <View style={a.flex_1} />
 
-      <View
+      <View style={[a.flex_row, a.gap_sm, a.align_center, a.flex_shrink]}>
-        style={{
+        <Text aria-hidden={true} style={t.atoms.text_contrast_medium}>
-          flexDirection: 'row',
-          gap: 8,
-          alignItems: 'center',
-          flexShrink: 1,
-        }}>
-        <Text aria-hidden={true} style={[pal.textLight]}>
           {APP_LANGUAGES.find(l => l.code2 === sanitizedLang)?.name}
         </Text>
-        <FontAwesomeIcon
+        <ChevronDown
-          icon="chevron-down"
+          fill={t.atoms.text.color}
-          size={12}
+          size="xs"
-          style={[pal.textLight, {flexShrink: 0}]}
+          style={a.flex_shrink}
         />
 
         <select
@@ -183,79 +216,3 @@ function Footer({styles}: {styles: ReturnType<typeof useStyles>}) {
     </View>
   )
 }
-const useStyles = () => {
-  return StyleSheet.create({
-    container: {
-      height: '100%',
-    },
-    containerInner: {
-      height: '100%',
-      justifyContent: 'center',
-      // @ts-ignore web only
-      paddingBottom: '20vh',
-      paddingHorizontal: 20,
-    },
-    containerInnerMobile: {
-      paddingBottom: 50,
-    },
-    title: {
-      textAlign: 'center',
-      color: colors.blue3,
-      fontSize: 68,
-      fontWeight: 'bold',
-      paddingBottom: 10,
-    },
-    titleMobile: {
-      textAlign: 'center',
-      color: colors.blue3,
-      fontSize: 58,
-      fontWeight: 'bold',
-    },
-    subtitle: {
-      textAlign: 'center',
-      color: colors.gray5,
-      fontSize: 52,
-      fontWeight: 'bold',
-      paddingBottom: 30,
-    },
-    subtitleMobile: {
-      textAlign: 'center',
-      color: colors.gray5,
-      fontSize: 42,
-      fontWeight: 'bold',
-      paddingBottom: 30,
-    },
-    btns: {
-      gap: 10,
-      justifyContent: 'center',
-      paddingBottom: 40,
-    },
-    btn: {
-      borderRadius: 30,
-      paddingHorizontal: 24,
-      paddingVertical: 12,
-      minWidth: 220,
-    },
-    btnLabel: {
-      textAlign: 'center',
-      fontSize: 18,
-    },
-    notice: {
-      paddingHorizontal: 40,
-      textAlign: 'center',
-    },
-    footer: {
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 0,
-      padding: 20,
-      borderTopWidth: 1,
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      gap: 20,
-    },
-    footerDivider: {flexGrow: 1},
-    footerLink: {},
-  })
-}