use alf for splashscreen (native)

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}}>
-            <Logotype width={161} fill={pal.text.color} />
+          <View style={[a.pb_sm, a.pt_5xl]}>
+            <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}>
-          <TouchableOpacity
+        <View testID="signinOrCreateAccount">
+          <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>
-          </TouchableOpacity>
-          <TouchableOpacity
+            </ButtonText>
+          </Button>
+          <Button
             testID="signInButton"
-            style={[styles.btn, pal.btn]}
             onPress={onPressSignin}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Sign in`)}
+            label={_(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>
-          </TouchableOpacity>
+            </ButtonText>
+          </Button>
         </View>
-        <View style={styles.footer}>
-          <View style={{position: 'relative'}}>
+        <View
+          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={{
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                bottom: 0,
-                pointerEvents: 'none',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}>
-              <FontAwesomeIcon
-                icon="chevron-down"
-                size={10}
-                style={pal.textLight as FontAwesomeIconStyle}
-              />
+              style={[
+                a.absolute,
+                a.inset_0,
+                {left: 'auto'},
+                {pointerEvents: 'none'},
+                a.align_center,
+                a.justify_center,
+              ]}>
+              <ChevronDown fill={t.atoms.text.color} size="xs" />
             </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',
-  },
-})