Merge pull request #3294 from bluesky-social/samuel/alf-splash

Use ALF for Splashscreen

src/view/com/auth/SplashScreen.tsx

@@ -1,23 +1,21 @@
 import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {Text} from 'view/com/util/text/Text'
+
 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 {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
 import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
 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 {Text} from '#/components/Typography'
+import {Button, ButtonText} from '#/components/Button'
+import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
 
 export const SplashScreen = ({
   onPressSignin,
@@ -26,7 +24,7 @@ export const SplashScreen = ({
   onPressSignin: () => void
   onPressCreateAccount: () => void
 }) => {
-  const pal = usePalette('default')
+  const t = useTheme()
   const {_} = useLingui()
 
   const langPrefs = useLanguagePrefs()
@@ -46,49 +44,62 @@ export const SplashScreen = ({
   )
 
   return (
-    <CenteredView style={[styles.container, pal.view]}>
+    <CenteredView style={[a.h_full, a.flex_1]}>
       <ErrorBoundary>
-        <View style={styles.hero}>
+        <View style={[{flex: 1}, a.justify_center, a.align_center]}>
           <Logo width={92} fill="sky" />
 
-          <View style={{paddingTop: 40, paddingBottom: 6}}>
+          <View style={[a.pb_sm, a.pt_5xl]}>
-            <Logotype width={161} fill={pal.text.color} />
+            <Logotype width={161} fill={t.atoms.text.color} />
           </View>
 
-          <Text type="lg-medium" style={[pal.textLight]}>
+          <Text
+            style={[a.text_md, a.font_semibold, t.atoms.text_contrast_medium]}>
             <Trans>What's up?</Trans>
           </Text>
         </View>
-        <View testID="signinOrCreateAccount" style={styles.btns}>
+        <View testID="signinOrCreateAccount">
-          <TouchableOpacity
+          <Button
             testID="createAccountButton"
-            style={[styles.btn, {backgroundColor: colors.blue3}]}
             onPress={onPressCreateAccount}
             accessibilityRole="button"
-            accessibilityLabel={_(msg`Create new account`)}
+            label={_(msg`Create new account`)}
             accessibilityHint={_(
               msg`Opens flow to create a new Bluesky account`,
-            )}>
+            )}
-            <Text style={[s.white, styles.btnLabel]}>
+            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}
-            accessibilityRole="button"
+            label={_(msg`Sign in`)}
-            accessibilityLabel={_(msg`Sign in`)}
             accessibilityHint={_(
               msg`Opens flow to sign into your existing Bluesky account`,
-            )}>
+            )}
-            <Text style={[pal.text, styles.btnLabel]}>
+            style={[a.mx_xl, a.mb_xl]}
+            size="large"
+            variant="solid"
+            color="secondary">
+            <ButtonText>
               <Trans>Sign In</Trans>
-            </Text>
+            </ButtonText>
-          </TouchableOpacity>
+          </Button>
         </View>
-        <View style={styles.footer}>
+        <View
-          <View style={{position: 'relative'}}>
+          style={[
+            a.px_lg,
+            a.pt_md,
+            a.pb_2xl,
+            a.justify_center,
+            a.align_center,
+          ]}>
+          <View style={a.relative}>
             <RNPickerSelect
               placeholder={{}}
               value={sanitizedLang}
@@ -101,33 +112,28 @@ export const SplashScreen = ({
               useNativeAndroidPickerStyle={false}
               style={{
                 inputAndroid: {
-                  color: pal.textLight.color,
+                  color: t.atoms.text_contrast_medium.color,
                   fontSize: 16,
-                  paddingRight: 10 + 4,
+                  paddingRight: 12 + 4,
                 },
                 inputIOS: {
-                  color: pal.text.color,
+                  color: t.atoms.text.color,
                   fontSize: 16,
-                  paddingRight: 10 + 4,
+                  paddingRight: 12 + 4,
                 },
               }}
             />
 
             <View
-              style={{
+              style={[
-                position: 'absolute',
+                a.absolute,
-                top: 0,
+                a.inset_0,
-                right: 0,
+                {left: 'auto'},
-                bottom: 0,
+                {pointerEvents: 'none'},
-                pointerEvents: 'none',
+                a.align_center,
-                alignItems: 'center',
+                a.justify_center,
-                justifyContent: 'center',
+              ]}>
-              }}>
+              <ChevronDown fill={t.atoms.text.color} size="xs" />
-              <FontAwesomeIcon
-                icon="chevron-down"
-                size={10}
-                style={pal.textLight as FontAwesomeIconStyle}
-              />
             </View>
           </View>
         </View>
@@ -136,44 +142,3 @@ export const SplashScreen = ({
     </CenteredView>
   )
 }
-
-const styles = StyleSheet.create({
-  container: {
-    height: '100%',
-  },
-  hero: {
-    flex: 2,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  btns: {
-    paddingBottom: 0,
-  },
-  title: {
-    textAlign: 'center',
-    fontSize: 68,
-    fontWeight: 'bold',
-  },
-  subtitle: {
-    textAlign: 'center',
-    fontSize: 42,
-    fontWeight: 'bold',
-  },
-  btn: {
-    borderRadius: 32,
-    paddingVertical: 16,
-    marginBottom: 20,
-    marginHorizontal: 20,
-  },
-  btnLabel: {
-    textAlign: 'center',
-    fontSize: 21,
-  },
-  footer: {
-    paddingHorizontal: 16,
-    paddingTop: 12,
-    paddingBottom: 24,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-})

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

@@ -1,13 +1,8 @@
 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 +11,11 @@ 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'
+import {InlineLink} from '#/components/Link'
 
 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,88 @@ 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>
-            <Logo width={92} fill="sky" />
+            <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>
+
+              <Text
+                style={[
+                  a.text_md,
+                  a.font_semibold,
+                  t.atoms.text_contrast_medium,
+                ]}>
+                <Trans>What's up?</Trans>
+              </Text>
             </View>
 
-            <View testID="signinOrCreateAccount" style={styles.btns}>
+            <View
-              <TouchableOpacity
+              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 t = useTheme()
-  const {_} = useLingui()
 
   const langPrefs = useLanguagePrefs()
   const setLangPrefs = useLanguagePrefsApi()
@@ -122,39 +148,39 @@ function Footer({styles}: {styles: ReturnType<typeof useStyles>}) {
   )
 
   return (
-    <View style={[styles.footer, pal.view, pal.border]}>
+    <View
-      <TextLink
+      style={[
-        href="https://bsky.social"
+        a.absolute,
-        text={_(msg`Business`)}
+        a.inset_0,
-        style={[styles.footerLink, pal.link]}
+        {top: 'auto'},
-      />
+        a.p_xl,
-      <TextLink
+        a.border_t,
-        href="https://bsky.social/about/blog"
+        a.flex_row,
-        text={_(msg`Blog`)}
+        a.flex_wrap,
-        style={[styles.footerLink, pal.link]}
+        a.gap_xl,
-      />
+        a.flex_1,
-      <TextLink
+        t.atoms.border_contrast_medium,
-        href="https://bsky.social/about/join"
+      ]}>
-        text={_(msg`Jobs`)}
+      <InlineLink to="https://bsky.social">
-        style={[styles.footerLink, pal.link]}
+        <Trans>Business</Trans>
-      />
+      </InlineLink>
+      <InlineLink to="https://bsky.social/about/blog">
+        <Trans>Blog</Trans>
+      </InlineLink>
+      <InlineLink to="https://bsky.social/about/join">
+        <Trans>Jobs</Trans>
+      </InlineLink>
 
-      <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 +209,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: {},
-  })
-}