From 2b4d32bb09649a2f4f695950054ce385fe0c696b Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Mon, 25 Aug 2025 16:54:19 -0700
Subject: feat(ui): redesign "See more" suggested profiles card

Refactored the "See more accounts you might like" card to use ButtonIcon
and ButtonText for improved consistency and accessibility. Updated
styles for better alignment, spacing, and visual hierarchy. Navigates to
the Explore page when pressed.
---
 src/components/FeedInterstitials.tsx | 37 +++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 835534871..7debbf5e1 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -25,7 +25,7 @@ import {
   type ViewStyleProp,
   web,
 } from '#/alf'
-import {Button} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
 import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRight} from '#/components/icons/Arrow'
 import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
@@ -36,6 +36,7 @@ import type * as bsky from '#/types/bsky'
 import {ProgressGuideList} from './ProgressGuide/List'
 
 const MOBILE_CARD_WIDTH = 165
+const FINAL_CARD_WIDTH = 120
 
 function CardOuter({
   children,
@@ -420,27 +421,29 @@ export function ProfileGrid({
 }
 
 function SeeMoreSuggestedProfilesCard() {
-  const navigation = useNavigation<NavigationProp>()
+  const t = useTheme()
   const {_} = useLingui()
+  const navigation = useNavigation<NavigationProp>()
 
   return (
     <Button
+      color="primary"
       label={_(msg`Browse more accounts on the Explore page`)}
-      style={[a.flex_col]}
-      onPress={() => {
-        navigation.navigate('SearchTab')
-      }}>
-      <CardOuter>
-        <View style={[a.flex_1, a.justify_center]}>
-          <View style={[a.flex_col, a.align_center, a.gap_md]}>
-            <Text style={[a.leading_snug, a.text_center]}>
-              <Trans>See more accounts you might like</Trans>
-            </Text>
-
-            <ArrowRight size="xl" />
-          </View>
-        </View>
-      </CardOuter>
+      style={[
+        a.flex_col,
+        a.align_center,
+        a.gap_xs,
+        a.p_md,
+        a.rounded_lg,
+        t.atoms.shadow_sm,
+        {width: FINAL_CARD_WIDTH},
+      ]}
+      onPress={() => navigation.navigate('SearchTab')}>
+      <ButtonIcon icon={ArrowRight} size="lg" />
+      <ButtonText
+        style={[a.text_md, a.font_medium, a.leading_snug, a.text_center]}>
+        <Trans>See more</Trans>
+      </ButtonText>
     </Button>
   )
 }
-- 
cgit 1.4.1