Cleaner sidebar layout (#9603)

src/components/ProgressGuide/FollowDialog.tsx

@@ -31,8 +31,8 @@ import {
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRightIcon} from '#/components/icons/Arrow'
 import {MagnifyingGlass_Stroke2_Corner0_Rounded as SearchIcon} from '#/components/icons/MagnifyingGlass'
-import {PersonGroup_Stroke2_Corner2_Rounded as PersonGroupIcon} from '#/components/icons/Person'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {boostInterests, InterestTabs} from '#/components/InterestTabs'
 import * as ProfileCard from '#/components/ProfileCard'
@@ -60,10 +60,16 @@ type Item =
       key: string
     }
 
-export function FollowDialog({guide}: {guide: Follow10ProgressGuide}) {
+export function FollowDialog({
+  guide,
+  showArrow,
+}: {
+  guide: Follow10ProgressGuide
+  showArrow?: boolean
+}) {
   const {_} = useLingui()
   const control = Dialog.useDialogControl()
-  const {gtMobile} = useBreakpoints()
+  const {gtPhone} = useBreakpoints()
   const {height: minHeight} = useWindowDimensions()
 
   return (
@@ -74,13 +80,12 @@ export function FollowDialog({guide}: {guide: Follow10ProgressGuide}) {
           control.open()
           logEvent('progressGuide:followDialog:open', {})
         }}
-        size={gtMobile ? 'small' : 'large'}
-        color="primary"
-        variant="solid">
-        <ButtonIcon icon={PersonGroupIcon} />
+        size={gtPhone ? 'small' : 'large'}
+        color="primary">
         <ButtonText>
           <Trans>Find people to follow</Trans>
         </ButtonText>
+        {showArrow && <ButtonIcon icon={ArrowRightIcon} />}
       </Button>
       <Dialog.Outer control={control} nativeOptions={{minHeight}}>
         <Dialog.Handle />