From 7496540d07caa6e8f1dc803d33e892856da07de7 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sat, 18 May 2024 20:57:01 +0100
Subject: [PATCH 1/6] add profile button

---
 .../Profile/Header/ProfileHeaderStandard.tsx  | 79 ++++++++++++++-----
 .../queries/messages/get-convo-for-members.ts | 30 ++++++-
 src/view/com/profile/ProfileMenu.tsx          | 34 ++++----
 3 files changed, 104 insertions(+), 39 deletions(-)

diff --git a/src/screens/Profile/Header/ProfileHeaderStandard.tsx b/src/screens/Profile/Header/ProfileHeaderStandard.tsx
index f3f2a370da..953fbd6169 100644
--- a/src/screens/Profile/Header/ProfileHeaderStandard.tsx
+++ b/src/screens/Profile/Header/ProfileHeaderStandard.tsx
@@ -9,12 +9,15 @@ import {
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
 
+import {NavigationProp} from '#/lib/routes/types'
 import {useGate} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {isIOS, isWeb} from '#/platform/detection'
 import {Shadow} from '#/state/cache/types'
 import {useModalControls} from '#/state/modals'
+import {useMaybeConvoForUser} from '#/state/queries/messages/get-convo-for-members'
 import {
   useProfileBlockMutationQueue,
   useProfileFollowMutationQueue,
@@ -29,6 +32,7 @@ import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import * as Prompt from '#/components/Prompt'
 import {RichText} from '#/components/RichText'
@@ -71,6 +75,9 @@ let ProfileHeaderStandard = ({
   const [_queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile)
   const unblockPromptControl = Prompt.usePromptControl()
   const requireAuth = useRequireAuth()
+  const navigation = useNavigation<NavigationProp>()
+
+  const {data: convoId} = useMaybeConvoForUser(profile.did)
 
   const onPressEditProfile = React.useCallback(() => {
     track('ProfileHeader:EditProfileButtonClicked')
@@ -141,6 +148,11 @@ let ProfileHeaderStandard = ({
     }
   }, [_, queueUnblock, track])
 
+  const onPressDm = React.useCallback(() => {
+    if (!convoId) return
+    navigation.navigate('MessagesConversation', {conversation: convoId})
+  }, [navigation, convoId])
+
   const isMe = React.useMemo(
     () => currentAccount?.did === profile.did,
     [currentAccount, profile],
@@ -156,7 +168,14 @@ let ProfileHeaderStandard = ({
         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_sm]}
+          style={[
+            {paddingLeft: 90},
+            a.flex_row,
+            a.justify_end,
+            a.gap_sm,
+            a.pb_sm,
+            a.flex_wrap,
+          ]}
           pointerEvents={isIOS ? 'auto' : 'box-none'}>
           {isMe ? (
             <Button
@@ -166,7 +185,7 @@ let ProfileHeaderStandard = ({
               variant="solid"
               onPress={onPressEditProfile}
               label={_(msg`Edit profile`)}
-              style={a.rounded_full}>
+              style={[a.rounded_full, a.py_sm]}>
               <ButtonText>
                 <Trans>Edit Profile</Trans>
               </ButtonText>
@@ -181,7 +200,7 @@ let ProfileHeaderStandard = ({
                 label={_(msg`Unblock`)}
                 disabled={!hasSession}
                 onPress={() => unblockPromptControl.open()}
-                style={a.rounded_full}>
+                style={[a.rounded_full, a.py_sm]}>
                 <ButtonText>
                   <Trans context="action">Unblock</Trans>
                 </ButtonText>
@@ -190,24 +209,42 @@ let ProfileHeaderStandard = ({
           ) : !profile.viewer?.blockedBy ? (
             <>
               {hasSession && (
-                <Button
-                  testID="suggestedFollowsBtn"
-                  size="small"
-                  color={showSuggestedFollows ? 'primary' : 'secondary'}
-                  variant="solid"
-                  shape="round"
-                  onPress={() => setShowSuggestedFollows(!showSuggestedFollows)}
-                  label={_(msg`Show follows similar to ${profile.handle}`)}>
-                  <FontAwesomeIcon
-                    icon="user-plus"
-                    style={
-                      showSuggestedFollows
-                        ? {color: t.palette.white}
-                        : t.atoms.text
+                <>
+                  {convoId && (
+                    <Button
+                      testID="dmBtn"
+                      size="small"
+                      color="secondary"
+                      variant="solid"
+                      shape="round"
+                      onPress={onPressDm}
+                      label={_(msg`Message ${profile.handle}`)}
+                      style={{width: 36, height: 36}}>
+                      <Envelope style={t.atoms.text} size="md" />
+                    </Button>
+                  )}
+                  <Button
+                    testID="suggestedFollowsBtn"
+                    size="small"
+                    color={showSuggestedFollows ? 'primary' : 'secondary'}
+                    variant="solid"
+                    shape="round"
+                    onPress={() =>
+                      setShowSuggestedFollows(!showSuggestedFollows)
                     }
-                    size={14}
-                  />
-                </Button>
+                    label={_(msg`Show follows similar to ${profile.handle}`)}
+                    style={{width: 36, height: 36}}>
+                    <FontAwesomeIcon
+                      icon="user-plus"
+                      style={
+                        showSuggestedFollows
+                          ? {color: t.palette.white}
+                          : t.atoms.text
+                      }
+                      size={14}
+                    />
+                  </Button>
+                </>
               )}
 
               <Button
@@ -223,7 +260,7 @@ let ProfileHeaderStandard = ({
                 onPress={
                   profile.viewer?.following ? onPressUnfollow : onPressFollow
                 }
-                style={[a.rounded_full, a.gap_xs]}>
+                style={[a.rounded_full, a.gap_xs, a.py_sm]}>
                 <ButtonIcon
                   position="left"
                   icon={profile.viewer?.following ? Check : Plus}
diff --git a/src/state/queries/messages/get-convo-for-members.ts b/src/state/queries/messages/get-convo-for-members.ts
index 083146b83b..e565b165c7 100644
--- a/src/state/queries/messages/get-convo-for-members.ts
+++ b/src/state/queries/messages/get-convo-for-members.ts
@@ -1,11 +1,14 @@
 import {ChatBskyConvoGetConvoForMembers} from '@atproto/api'
-import {useMutation, useQueryClient} from '@tanstack/react-query'
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 
 import {logger} from '#/logger'
 import {DM_SERVICE_HEADERS} from '#/state/queries/messages/const'
 import {useAgent} from '#/state/session'
 import {RQKEY as CONVO_KEY} from './conversation'
 
+const RQKEY_ROOT = 'convo-for-user'
+export const RQKEY = (did: string) => [RQKEY_ROOT, did]
+
 export function useGetConvoForMembers({
   onSuccess,
   onError,
@@ -35,3 +38,28 @@ export function useGetConvoForMembers({
     },
   })
 }
+
+/**
+ * Gets the conversation ID for a given DID. Returns null if it's not possible to message them.
+ */
+export function useMaybeConvoForUser(did: string) {
+  const {getAgent} = useAgent()
+
+  return useQuery({
+    queryKey: RQKEY(did),
+    queryFn: async () => {
+      const convo = await getAgent()
+        .api.chat.bsky.convo.getConvoForMembers(
+          {members: [did]},
+          {headers: DM_SERVICE_HEADERS},
+        )
+        .catch(() => ({success: null}))
+
+      if (convo.success) {
+        return convo.data.convo.id
+      } else {
+        return null
+      }
+    },
+  })
+}
diff --git a/src/view/com/profile/ProfileMenu.tsx b/src/view/com/profile/ProfileMenu.tsx
index cb0b1d97c8..e3357ec1e7 100644
--- a/src/view/com/profile/ProfileMenu.tsx
+++ b/src/view/com/profile/ProfileMenu.tsx
@@ -1,41 +1,42 @@
 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 {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useQueryClient} from '@tanstack/react-query'
-import * as Toast from 'view/com/util/Toast'
-import {EventStopper} from 'view/com/util/EventStopper'
-import {useSession} from 'state/session'
-import * as Menu from '#/components/Menu'
-import {useTheme} from '#/alf'
-import {usePalette} from 'lib/hooks/usePalette'
+
+import {logger} from '#/logger'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {HITSLOP_10} from 'lib/constants'
+import {usePalette} from 'lib/hooks/usePalette'
+import {makeProfileLink} from 'lib/routes/links'
 import {shareUrl} from 'lib/sharing'
 import {toShareUrl} from 'lib/strings/url-helpers'
-import {makeProfileLink} from 'lib/routes/links'
-import {useAnalytics} from 'lib/analytics/analytics'
+import {Shadow} from 'state/cache/types'
 import {useModalControls} from 'state/modals'
-import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
 import {
   RQKEY as profileQueryKey,
   useProfileBlockMutationQueue,
   useProfileFollowMutationQueue,
   useProfileMuteMutationQueue,
 } from 'state/queries/profile'
+import {useSession} from 'state/session'
+import {EventStopper} from 'view/com/util/EventStopper'
+import * as Toast from 'view/com/util/Toast'
+import {useTheme} from '#/alf'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
+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'
-import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
-import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
+import {PeopleRemove2_Stroke2_Corner0_Rounded as UserMinus} from '#/components/icons/PeopleRemove2'
 import {PersonCheck_Stroke2_Corner0_Rounded as PersonCheck} from '#/components/icons/PersonCheck'
 import {PersonX_Stroke2_Corner0_Rounded as PersonX} from '#/components/icons/PersonX'
-import {PeopleRemove2_Stroke2_Corner0_Rounded as UserMinus} from '#/components/icons/PeopleRemove2'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
-import {logger} from '#/logger'
-import {Shadow} from 'state/cache/types'
+import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
+import * as Menu from '#/components/Menu'
 import * as Prompt from '#/components/Prompt'
+import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
 
 let ProfileMenu = ({
   profile,
@@ -192,9 +193,8 @@ let ProfileMenu = ({
                     flexDirection: 'row',
                     alignItems: 'center',
                     justifyContent: 'center',
-                    paddingVertical: 10,
+                    padding: 8,
                     borderRadius: 50,
-                    paddingHorizontal: 16,
                   },
                   pal.btn,
                 ]}>

From 15ecf70e9e460ca7ba94c1d26f2b4e3fa5f0219c Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sat, 18 May 2024 21:12:38 +0100
Subject: [PATCH 2/6] separate out button to component

---
 src/components/dms/MessageProfileButton.tsx   | 44 +++++++++++++++++++
 .../Profile/Header/ProfileHeaderStandard.tsx  | 27 +-----------
 2 files changed, 46 insertions(+), 25 deletions(-)
 create mode 100644 src/components/dms/MessageProfileButton.tsx

diff --git a/src/components/dms/MessageProfileButton.tsx b/src/components/dms/MessageProfileButton.tsx
new file mode 100644
index 0000000000..38e28722fb
--- /dev/null
+++ b/src/components/dms/MessageProfileButton.tsx
@@ -0,0 +1,44 @@
+import React, {useCallback} from 'react'
+import {AppBskyActorDefs} from '@atproto/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from '#/lib/routes/types'
+import {useMaybeConvoForUser} from '#/state/queries/messages/get-convo-for-members'
+import {useTheme} from '#/alf'
+import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
+import {Button} from '../Button'
+
+export function MessageProfileButton({
+  profile,
+}: {
+  profile: AppBskyActorDefs.ProfileView
+}) {
+  const navigation = useNavigation<NavigationProp>()
+  const {_} = useLingui()
+  const t = useTheme()
+
+  const {data: convoId} = useMaybeConvoForUser(profile.did)
+
+  const onPressDm = useCallback(() => {
+    if (!convoId) return
+    navigation.navigate('MessagesConversation', {conversation: convoId})
+  }, [navigation, convoId])
+
+  if (!convoId) return null
+
+  return (
+    <Button
+      testID="dmBtn"
+      size="small"
+      color="secondary"
+      variant="solid"
+      shape="round"
+      onPress={onPressDm}
+      label={_(msg`Message ${profile.handle}`)}
+      style={{width: 36, height: 36}}>
+      <Envelope style={t.atoms.text} size="md" />
+    </Button>
+  )
+}
diff --git a/src/screens/Profile/Header/ProfileHeaderStandard.tsx b/src/screens/Profile/Header/ProfileHeaderStandard.tsx
index 953fbd6169..66141e7826 100644
--- a/src/screens/Profile/Header/ProfileHeaderStandard.tsx
+++ b/src/screens/Profile/Header/ProfileHeaderStandard.tsx
@@ -9,15 +9,12 @@ import {
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useNavigation} from '@react-navigation/native'
 
-import {NavigationProp} from '#/lib/routes/types'
 import {useGate} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {isIOS, isWeb} from '#/platform/detection'
 import {Shadow} from '#/state/cache/types'
 import {useModalControls} from '#/state/modals'
-import {useMaybeConvoForUser} from '#/state/queries/messages/get-convo-for-members'
 import {
   useProfileBlockMutationQueue,
   useProfileFollowMutationQueue,
@@ -31,8 +28,8 @@ import {ProfileMenu} from '#/view/com/profile/ProfileMenu'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {MessageProfileButton} from '#/components/dms/MessageProfileButton'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
-import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import * as Prompt from '#/components/Prompt'
 import {RichText} from '#/components/RichText'
@@ -75,9 +72,6 @@ let ProfileHeaderStandard = ({
   const [_queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile)
   const unblockPromptControl = Prompt.usePromptControl()
   const requireAuth = useRequireAuth()
-  const navigation = useNavigation<NavigationProp>()
-
-  const {data: convoId} = useMaybeConvoForUser(profile.did)
 
   const onPressEditProfile = React.useCallback(() => {
     track('ProfileHeader:EditProfileButtonClicked')
@@ -148,11 +142,6 @@ let ProfileHeaderStandard = ({
     }
   }, [_, queueUnblock, track])
 
-  const onPressDm = React.useCallback(() => {
-    if (!convoId) return
-    navigation.navigate('MessagesConversation', {conversation: convoId})
-  }, [navigation, convoId])
-
   const isMe = React.useMemo(
     () => currentAccount?.did === profile.did,
     [currentAccount, profile],
@@ -210,19 +199,7 @@ let ProfileHeaderStandard = ({
             <>
               {hasSession && (
                 <>
-                  {convoId && (
-                    <Button
-                      testID="dmBtn"
-                      size="small"
-                      color="secondary"
-                      variant="solid"
-                      shape="round"
-                      onPress={onPressDm}
-                      label={_(msg`Message ${profile.handle}`)}
-                      style={{width: 36, height: 36}}>
-                      <Envelope style={t.atoms.text} size="md" />
-                    </Button>
-                  )}
+                  <MessageProfileButton profile={profile} />
                   <Button
                     testID="suggestedFollowsBtn"
                     size="small"

From efdc534e1489860b798b3d7767172c21a4ff45bf Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sat, 18 May 2024 21:13:03 +0100
Subject: [PATCH 3/6] normalise subscribe to labeller button size

---
 src/screens/Profile/Header/ProfileHeaderLabeler.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/screens/Profile/Header/ProfileHeaderLabeler.tsx b/src/screens/Profile/Header/ProfileHeaderLabeler.tsx
index 459bd0d958..e79b345cd3 100644
--- a/src/screens/Profile/Header/ProfileHeaderLabeler.tsx
+++ b/src/screens/Profile/Header/ProfileHeaderLabeler.tsx
@@ -128,7 +128,7 @@ let ProfileHeaderLabeler = ({
 
   const onPressSubscribe = React.useCallback(
     () =>
-      requireAuth(async () => {
+      requireAuth(async (): Promise<void> => {
         if (!canSubscribe) {
           cantSubscribePrompt.open()
           return
@@ -197,7 +197,6 @@ let ProfileHeaderLabeler = ({
                   <View
                     style={[
                       {
-                        paddingVertical: 12,
                         backgroundColor:
                           isSubscribed || !canSubscribe
                             ? state.hovered || state.pressed
@@ -207,7 +206,8 @@ let ProfileHeaderLabeler = ({
                             ? tokens.color.temp_purple_dark
                             : tokens.color.temp_purple,
                       },
-                      a.px_lg,
+                      a.py_sm,
+                      a.px_md,
                       a.rounded_sm,
                       a.gap_sm,
                     ]}>

From b61603a7ad23f9b9e53888c261617e9f02a8724d Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sat, 18 May 2024 21:23:56 +0100
Subject: [PATCH 4/6] infinite staletime

---
 src/state/queries/messages/get-convo-for-members.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/state/queries/messages/get-convo-for-members.ts b/src/state/queries/messages/get-convo-for-members.ts
index e565b165c7..9187c1607f 100644
--- a/src/state/queries/messages/get-convo-for-members.ts
+++ b/src/state/queries/messages/get-convo-for-members.ts
@@ -4,6 +4,7 @@ import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 import {logger} from '#/logger'
 import {DM_SERVICE_HEADERS} from '#/state/queries/messages/const'
 import {useAgent} from '#/state/session'
+import {STALE} from '..'
 import {RQKEY as CONVO_KEY} from './conversation'
 
 const RQKEY_ROOT = 'convo-for-user'
@@ -61,5 +62,6 @@ export function useMaybeConvoForUser(did: string) {
         return null
       }
     },
+    staleTime: STALE.INFINITY,
   })
 }

From 674748ac014998d67b72133d2aead37829ad2e0f Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 20 May 2024 17:06:31 +0100
Subject: [PATCH 5/6] use Link rather than Button and change icon

---
 src/components/dms/MessageProfileButton.tsx | 26 +++++++--------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/components/dms/MessageProfileButton.tsx b/src/components/dms/MessageProfileButton.tsx
index 38e28722fb..7c0c5612fd 100644
--- a/src/components/dms/MessageProfileButton.tsx
+++ b/src/components/dms/MessageProfileButton.tsx
@@ -1,44 +1,36 @@
-import React, {useCallback} from 'react'
+import React from 'react'
 import {AppBskyActorDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useNavigation} from '@react-navigation/native'
 
-import {NavigationProp} from '#/lib/routes/types'
 import {useMaybeConvoForUser} from '#/state/queries/messages/get-convo-for-members'
-import {useTheme} from '#/alf'
-import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
-import {Button} from '../Button'
+import {atoms as a, useTheme} from '#/alf'
+import {Message_Stroke2_Corner0_Rounded as Message} from '../icons/Message'
+import {Link} from '../Link'
 
 export function MessageProfileButton({
   profile,
 }: {
   profile: AppBskyActorDefs.ProfileView
 }) {
-  const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
   const t = useTheme()
 
   const {data: convoId} = useMaybeConvoForUser(profile.did)
 
-  const onPressDm = useCallback(() => {
-    if (!convoId) return
-    navigation.navigate('MessagesConversation', {conversation: convoId})
-  }, [navigation, convoId])
-
   if (!convoId) return null
 
   return (
-    <Button
+    <Link
       testID="dmBtn"
       size="small"
       color="secondary"
       variant="solid"
       shape="round"
-      onPress={onPressDm}
       label={_(msg`Message ${profile.handle}`)}
-      style={{width: 36, height: 36}}>
-      <Envelope style={t.atoms.text} size="md" />
-    </Button>
+      to={`/messages/${convoId}`}
+      style={[a.justify_center, {width: 36, height: 36}]}>
+      <Message style={t.atoms.text} size="md" />
+    </Link>
   )
 }

From 0d5633a7730a675f9c4d84e3885a52be895b385e Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 20 May 2024 17:09:19 +0100
Subject: [PATCH 6/6] adjust icon position

---
 src/components/dms/MessageProfileButton.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/dms/MessageProfileButton.tsx b/src/components/dms/MessageProfileButton.tsx
index 7c0c5612fd..6f227de65a 100644
--- a/src/components/dms/MessageProfileButton.tsx
+++ b/src/components/dms/MessageProfileButton.tsx
@@ -30,7 +30,10 @@ export function MessageProfileButton({
       label={_(msg`Message ${profile.handle}`)}
       to={`/messages/${convoId}`}
       style={[a.justify_center, {width: 36, height: 36}]}>
-      <Message style={t.atoms.text} size="md" />
+      <Message
+        style={[t.atoms.text, {marginLeft: 1, marginBottom: 1}]}
+        size="md"
+      />
     </Link>
   )
 }