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..d7f54641cd 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, @@ -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}> - + ) } else { diff --git a/src/screens/Profile/Header/ProfileHeaderStandard.tsx b/src/screens/Profile/Header/ProfileHeaderStandard.tsx index 3bfc4bf2f2..1bdafa92f8 100644 --- a/src/screens/Profile/Header/ProfileHeaderStandard.tsx +++ b/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]}> Edit Profile @@ -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]}> Unblock @@ -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]}> { 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"> + + ) }}