From 1d5c4222f6a332dc7e8035ce25a1ee06719274a4 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 18 May 2026 16:47:51 +0300
Subject: [PATCH] convert FollowingEmptyState to ALF Button

---
 src/view/com/posts/FollowingEmptyState.tsx | 71 +++++++++-------------
 1 file changed, 29 insertions(+), 42 deletions(-)

diff --git a/src/view/com/posts/FollowingEmptyState.tsx b/src/view/com/posts/FollowingEmptyState.tsx
index ca42f71d34..01d3c1affc 100644
--- a/src/view/com/posts/FollowingEmptyState.tsx
+++ b/src/view/com/posts/FollowingEmptyState.tsx
@@ -1,23 +1,21 @@
 import {useCallback} 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 {usePalette} from '#/lib/hooks/usePalette'
 import {MagnifyingGlassIcon} from '#/lib/icons'
 import {type NavigationProp} from '#/lib/routes/types'
 import {s} from '#/lib/styles'
+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 {IS_WEB} from '#/env'
-import {Button} from '../util/forms/Button'
 import {Text} from '../util/text/Text'
 
 export function FollowingEmptyState() {
+  const {t: l} = useLingui()
   const pal = usePalette('default')
-  const palInverted = usePalette('inverted')
   const navigation = useNavigation<NavigationProp>()
 
   const onPressFindAccounts = useCallback(() => {
@@ -45,36 +43,34 @@ export function FollowingEmptyState() {
             happening.
           </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>
 
         <Text type="xl-medium" style={[s.textCenter, pal.text, s.mt20]}>
           <Trans>You can also discover new Custom Feeds to follow.</Trans>
         </Text>
-        <Button
-          type="inverted"
-          style={[styles.emptyBtn, s.mt10]}
-          onPress={onPressDiscoverFeeds}>
-          <Text type="lg-medium" style={palInverted.text}>
-            <Trans>Discover new custom feeds</Trans>
-          </Text>
-          <FontAwesomeIcon
-            icon="angle-right"
-            style={palInverted.text as FontAwesomeIconStyle}
-            size={14}
-          />
-        </Button>
+        <View style={[a.mt_md, a.align_center]}>
+          <Button
+            label={l`Discover new custom feeds`}
+            onPress={onPressDiscoverFeeds}
+            color="secondary_inverted"
+            size="large">
+            <ButtonText>
+              <Trans>Discover new custom feeds</Trans>
+            </ButtonText>
+            <ButtonIcon icon={ChevronRightIcon} />
+          </Button>
+        </View>
       </View>
     </View>
   )
@@ -98,13 +94,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,
-  },
 })