Fix profile header buttons

src/components/Button.tsx

@@ -14,7 +14,7 @@ import {
 } from 'react-native'
 import {LinearGradient} from 'expo-linear-gradient'
 
-import {atoms as a, flatten, select, tokens, useTheme, web} from '#/alf'
+import {atoms as a, flatten, select, tokens, useTheme} from '#/alf'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {Text} from '#/components/Typography'
 
@@ -352,7 +352,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
           })
         } else if (size === 'small') {
           baseStyles.push({
-            paddingVertical: 8,
+            paddingVertical: 9,
             paddingHorizontal: 12,
             borderRadius: 6,
             gap: 6,
@@ -374,7 +374,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
           }
         } else if (size === 'small') {
           if (shape === 'round') {
-            baseStyles.push({height: 36, width: 36})
+            baseStyles.push({height: 34, width: 34})
           } else {
             baseStyles.push({height: 34, width: 34})
           }
@@ -627,9 +627,9 @@ export function useSharedButtonTextStyles() {
     }
 
     if (size === 'large') {
-      baseStyles.push(a.text_md, a.leading_tight, web({top: -0.4}))
+      baseStyles.push(a.text_md, a.leading_tight)
     } else if (size === 'small') {
-      baseStyles.push(a.text_sm, a.leading_tight, web({top: -0.4}))
+      baseStyles.push(a.text_sm, a.leading_tight)
     } else if (size === 'tiny') {
       baseStyles.push(a.text_xs, a.leading_tight)
     }

src/components/dms/MessageProfileButton.tsx

@@ -4,12 +4,13 @@ import {AppBskyActorDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {logEvent} from '#/lib/statsig/statsig'
 import {useMaybeConvoForUser} from '#/state/queries/messages/get-convo-for-members'
-import {logEvent} from 'lib/statsig/statsig'
 import {atoms as a, useTheme} from '#/alf'
-import {Message_Stroke2_Corner0_Rounded as Message} from '../icons/Message'
-import {Link} from '../Link'
-import {canBeMessaged} from './util'
+import {ButtonIcon} from '#/components/Button'
+import {canBeMessaged} from '#/components/dms/util'
+import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message'
+import {Link} from '#/components/Link'
 
 export function MessageProfileButton({
   profile,
@@ -66,12 +67,9 @@ export function MessageProfileButton({
         shape="round"
         label={_(msg`Message ${profile.handle}`)}
         to={`/messages/${convo.id}`}
-        style={[a.justify_center, {width: 36, height: 36}]}
+        style={[a.justify_center]}
         onPress={onPress}>
-        <Message
-          style={[t.atoms.text, {marginLeft: 1, marginBottom: 1}]}
-          size="md"
-        />
+        <ButtonIcon icon={Message} size="md" />
       </Link>
     )
   } else {

src/screens/Profile/Header/ProfileHeaderStandard.tsx

@@ -153,8 +153,9 @@ let ProfileHeaderStandard = ({
           style={[
             {paddingLeft: 90},
             a.flex_row,
+            a.align_center,
             a.justify_end,
-            a.gap_sm,
+            a.gap_xs,
             a.pb_sm,
             a.flex_wrap,
           ]}
@@ -167,7 +168,7 @@ let ProfileHeaderStandard = ({
               variant="solid"
               onPress={onPressEditProfile}
               label={_(msg`Edit profile`)}
-              style={[a.rounded_full, a.py_sm]}>
+              style={[a.rounded_full]}>
               <ButtonText>
                 <Trans>Edit Profile</Trans>
               </ButtonText>
@@ -182,7 +183,7 @@ let ProfileHeaderStandard = ({
                 label={_(msg`Unblock`)}
                 disabled={!hasSession}
                 onPress={() => unblockPromptControl.open()}
-                style={[a.rounded_full, a.py_sm]}>
+                style={[a.rounded_full]}>
                 <ButtonText>
                   <Trans context="action">Unblock</Trans>
                 </ButtonText>
@@ -205,7 +206,7 @@ let ProfileHeaderStandard = ({
                 onPress={
                   profile.viewer?.following ? onPressUnfollow : onPressFollow
                 }
-                style={[a.rounded_full, a.gap_xs, a.py_sm]}>
+                style={[a.rounded_full]}>
                 <ButtonIcon
                   position="left"
                   icon={profile.viewer?.following ? Check : Plus}

src/view/com/profile/ProfileMenu.tsx

@@ -1,12 +1,10 @@
 import React, {memo} from 'react'
-import {TouchableOpacity} from 'react-native'
 import {AppBskyActorDefs} from '@atproto/api'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
 
-import {HITSLOP_10} from '#/lib/constants'
+import {HITSLOP_20} from '#/lib/constants'
 import {makeProfileLink} from '#/lib/routes/links'
 import {shareUrl} from '#/lib/sharing'
 import {toShareUrl} from '#/lib/strings/url-helpers'
@@ -22,8 +20,9 @@ import {
 import {useSession} from '#/state/session'
 import {EventStopper} from '#/view/com/util/EventStopper'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
+import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid'
 import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
 import {ListSparkle_Stroke2_Corner0_Rounded as List} from '#/components/icons/ListSparkle'
 import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
@@ -45,9 +44,6 @@ let ProfileMenu = ({
 }): React.ReactNode => {
   const {_} = useLingui()
   const {currentAccount, hasSession} = useSession()
-  const t = useTheme()
-  // TODO ALF this
-  const alf = useTheme()
   const {openModal} = useModalControls()
   const reportDialogControl = useReportDialogControl()
   const queryClient = useQueryClient()
@@ -175,28 +171,19 @@ let ProfileMenu = ({
     <EventStopper onKeyDown={false}>
       <Menu.Root>
         <Menu.Trigger label={_(`More options`)}>
-          {({props, state}) => {
+          {({props}) => {
             return (
-              <TouchableOpacity
+              <Button
                 {...props}
-                hitSlop={HITSLOP_10}
                 testID="profileHeaderDropdownBtn"
-                style={[
-                  a.rounded_full,
-                  a.justify_center,
-                  a.align_center,
-                  {width: 36, height: 36},
-                  alf.atoms.bg_contrast_25,
-                  (state.hovered || state.pressed) && [
-                    alf.atoms.bg_contrast_50,
-                  ],
-                ]}>
-                <FontAwesomeIcon
-                  icon="ellipsis"
-                  size={20}
-                  style={t.atoms.text}
-                />
-              </TouchableOpacity>
+                label={_(msg`More options`)}
+                hitSlop={HITSLOP_20}
+                variant="solid"
+                color="secondary"
+                size="small"
+                shape="round">
+                <ButtonIcon icon={Ellipsis} size="sm" />
+              </Button>
             )
           }}
         </Menu.Trigger>