diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 17179994a9..1c14b48c75 100644
--- a/src/components/Button.tsx
+++ b/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(
})
} 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(
}
} 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)
}
diff --git a/src/components/dms/MessageProfileButton.tsx b/src/components/dms/MessageProfileButton.tsx
index 7f440d621f..932982d05e 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},
]}>
-
+
)
} 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}>
-
+
)
} else {
diff --git a/src/screens/Profile/Header/ProfileHeaderLabeler.tsx b/src/screens/Profile/Header/ProfileHeaderLabeler.tsx
index 7b44e58693..8c95413a8c 100644
--- a/src/screens/Profile/Header/ProfileHeaderLabeler.tsx
+++ b/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 =
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'}>
{isMe ? (
-
+
@@ -69,13 +69,12 @@ const styles = StyleSheet.create({
},
content: {
paddingTop: 12,
- paddingHorizontal: 14,
- paddingBottom: 4,
+ paddingHorizontal: 16,
+ paddingBottom: 8,
},
buttonsLine: {
flexDirection: 'row',
marginLeft: 'auto',
- marginBottom: 12,
},
br45: {borderRadius: 45},
br50: {borderRadius: 50},
diff --git a/src/view/com/profile/ProfileMenu.tsx b/src/view/com/profile/ProfileMenu.tsx
index aaa8a93e6b..f01fb5e172 100644
--- a/src/view/com/profile/ProfileMenu.tsx
+++ b/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 = ({
- {({props, state}) => {
+ {({props}) => {
return (
-
-
-
+ label={_(msg`More options`)}
+ hitSlop={HITSLOP_20}
+ variant="solid"
+ color="secondary"
+ size="small"
+ shape="round">
+
+
)
}}