convert CustomFeedEmptyState to ALF Button

src/view/com/posts/CustomFeedEmptyState.tsx

@@ -1,10 +1,6 @@
 import {useCallback, useEffect, useRef} from 'react'
 import {StyleSheet, View} from 'react-native'
-import {
-  FontAwesomeIcon,
-  type FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 import {useNavigation} from '@react-navigation/native'
 
 import {DISCOVER_FEED_URI} from '#/lib/constants'
@@ -14,9 +10,11 @@ import {type NavigationProp} from '#/lib/routes/types'
 import {s} from '#/lib/styles'
 import {useFeedFeedbackContext} from '#/state/feed-feedback'
 import {useSession} from '#/state/session'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron'
 import {useAnalytics} from '#/analytics'
 import {IS_WEB} from '#/env'
-import {Button} from '../util/forms/Button'
 import {Text} from '../util/text/Text'
 
 export function CustomFeedEmptyState() {
@@ -40,8 +38,8 @@ export function CustomFeedEmptyState() {
       }
     }
   }, [feedFeedback.feedSourceInfo, currentAccount?.did])
+  const {t: l} = useLingui()
   const pal = usePalette('default')
-  const palInverted = usePalette('inverted')
   const navigation = useNavigation<NavigationProp>()
 
   const onPressFindAccounts = useCallback(() => {
@@ -64,19 +62,18 @@ export function CustomFeedEmptyState() {
           language settings.
         </Trans>
       </Text>
-      <Button
-        type="inverted"
-        style={styles.emptyBtn}
-        onPress={onPressFindAccounts}>
-        <Text type="lg-medium" style={palInverted.text}>
-          <Trans>Find accounts to follow</Trans>
-        </Text>
-        <FontAwesomeIcon
-          icon="angle-right"
-          style={palInverted.text as FontAwesomeIconStyle}
-          size={14}
-        />
-      </Button>
+      <View style={[a.mt_xl, a.align_center]}>
+        <Button
+          label={l`Find accounts to follow`}
+          onPress={onPressFindAccounts}
+          color="secondary_inverted"
+          size="large">
+          <ButtonText>
+            <Trans>Find accounts to follow</Trans>
+          </ButtonText>
+          <ButtonIcon icon={ChevronRightIcon} />
+        </Button>
+      </View>
     </View>
   )
 }
@@ -93,22 +90,4 @@ const styles = StyleSheet.create({
     marginLeft: 'auto',
     marginRight: 'auto',
   },
-  emptyBtn: {
-    marginVertical: 20,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 18,
-    paddingHorizontal: 24,
-    borderRadius: 30,
-  },
-
-  feedsTip: {
-    position: 'absolute',
-    left: 22,
-  },
-  feedsTipArrow: {
-    marginLeft: 32,
-    marginTop: 8,
-  },
 })