Fix profile header buttons (#5558)

* Fix profile header buttons

* Adjust labeler buttons too

* Fix load state jumps

* Small tweak for web

* Remove log

1 files changed, 9 insertions, 17 deletions

diff --git a/src/components/dms/MessageProfileButton.tsx b/src/components/dms/MessageProfileButton.tsx
index 7f440d621..932982d05 100644
--- a/src/components/dms/MessageProfileButton.tsx
+++ b/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,
@@ -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
-            style={[
-              t.atoms.text,
-              {marginLeft: 1, marginBottom: 1, opacity: 0.3},
-            ]}
-            size="md"
-          />
+          <Message style={[t.atoms.text, {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
-          style={[t.atoms.text, {marginLeft: 1, marginBottom: 1}]}
-          size="md"
-        />
+        <ButtonIcon icon={Message} size="md" />
       </Link>
     )
   } else {