Fix profile header buttons (#5558)

* Fix profile header buttons

* Adjust labeler buttons too

* Fix load state jumps

* Small tweak for web

* Remove log

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 {ButtonIcon} from '#/components/Button'
-import {Link} from '../Link'
+import {canBeMessaged} from '#/components/dms/util'
-import {canBeMessaged} from './util'
+import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message'
+import {Link} from '#/components/Link'
 
 export function MessageProfileButton({
   profile,
@@ -40,15 +41,9 @@ export function MessageProfileButton({
             a.align_center,
             t.atoms.bg_contrast_25,
             a.rounded_full,
-            {width: 36, height: 36},
+            {width: 34, height: 34},
           ]}>
-          <Message
+          <Message style={[t.atoms.text, {opacity: 0.3}]} size="md" />
-            style={[
-              t.atoms.text,
-              {marginLeft: 1, marginBottom: 1, opacity: 0.3},
-            ]}
-            size="md"
-          />
         </View>
       )
     } else {
@@ -66,12 +61,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
+        <ButtonIcon icon={Message} size="md" />
-          style={[t.atoms.text, {marginLeft: 1, marginBottom: 1}]}
-          size="md"
-        />
       </Link>
     )
   } else {

src/screens/Profile/Header/ProfileHeaderLabeler.tsx

@@ -25,7 +25,7 @@ import {usePreferencesQuery} from '#/state/queries/preferences'
 import {useRequireAuth, useSession} from '#/state/session'
 import {ProfileMenu} from '#/view/com/profile/ProfileMenu'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, tokens, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {DialogOuterProps} from '#/components/Dialog'
 import {
@@ -61,7 +61,6 @@ let ProfileHeaderLabeler = ({
   const profile: Shadow<AppBskyActorDefs.ProfileViewDetailed> =
     useProfileShadow(profileUnshadowed)
   const t = useTheme()
-  const {gtMobile} = useBreakpoints()
   const {_} = useLingui()
   const {currentAccount, hasSession} = useSession()
   const {openModal} = useModalControls()
@@ -167,7 +166,7 @@ let ProfileHeaderLabeler = ({
         style={[a.px_lg, a.pt_md, a.pb_sm]}
         pointerEvents={isIOS ? 'auto' : 'box-none'}>
         <View
-          style={[a.flex_row, a.justify_end, a.gap_sm, a.pb_lg]}
+          style={[a.flex_row, a.justify_end, a.align_center, a.gap_xs, a.pb_lg]}
           pointerEvents={isIOS ? 'auto' : 'box-none'}>
           {isMe ? (
             <Button
@@ -196,7 +195,10 @@ let ProfileHeaderLabeler = ({
                   <View
                     style={[
                       {
-                        paddingVertical: gtMobile ? 12 : 10,
+                        paddingVertical: 9,
+                        paddingHorizontal: 12,
+                        borderRadius: 6,
+                        gap: 6,
                         backgroundColor: isSubscribed
                           ? state.hovered || state.pressed
                             ? t.palette.contrast_50
@@ -205,9 +207,6 @@ let ProfileHeaderLabeler = ({
                           ? tokens.color.temp_purple_dark
                           : tokens.color.temp_purple,
                       },
-                      a.px_lg,
-                      a.rounded_sm,
-                      a.gap_sm,
                     ]}>
                     <Text
                       style={[
@@ -218,6 +217,7 @@ let ProfileHeaderLabeler = ({
                         },
                         a.font_bold,
                         a.text_center,
+                        a.leading_tight,
                       ]}>
                       {isSubscribed ? (
                         <Trans>Unsubscribe</Trans>

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/screens/Profile/Header/index.tsx

@@ -27,7 +27,7 @@ let ProfileHeaderLoading = (_props: {}): React.ReactNode => {
       </View>
       <View style={styles.content}>
         <View style={[styles.buttonsLine]}>
-          <LoadingPlaceholder width={167} height={36} style={styles.br50} />
+          <LoadingPlaceholder width={140} height={34} style={styles.br50} />
         </View>
       </View>
     </View>
@@ -69,13 +69,12 @@ const styles = StyleSheet.create({
   },
   content: {
     paddingTop: 12,
-    paddingHorizontal: 14,
+    paddingHorizontal: 16,
-    paddingBottom: 4,
+    paddingBottom: 8,
   },
   buttonsLine: {
     flexDirection: 'row',
     marginLeft: 'auto',
-    marginBottom: 12,
   },
   br45: {borderRadius: 45},
   br50: {borderRadius: 50},

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={[
+                label={_(msg`More options`)}
-                  a.rounded_full,
+                hitSlop={HITSLOP_20}
-                  a.justify_center,
+                variant="solid"
-                  a.align_center,
+                color="secondary"
-                  {width: 36, height: 36},
+                size="small"
-                  alf.atoms.bg_contrast_25,
+                shape="round">
-                  (state.hovered || state.pressed) && [
+                <ButtonIcon icon={Ellipsis} size="sm" />
-                    alf.atoms.bg_contrast_50,
+              </Button>
-                  ],
-                ]}>
-                <FontAwesomeIcon
-                  icon="ellipsis"
-                  size={20}
-                  style={t.atoms.text}
-                />
-              </TouchableOpacity>
             )
           }}
         </Menu.Trigger>