Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix profile header buttons #5558

Merged
merged 6 commits into from
Oct 3, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Fix profile header buttons
  • Loading branch information
estrattonbailey committed Oct 1, 2024
commit 0ce0e280da7caa5df972aad4dafdf1b1a11a20ea
10 changes: 5 additions & 5 deletions src/components/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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,
Expand All @@ -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})
}
Expand Down Expand Up @@ -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)
}
Expand Down
16 changes: 7 additions & 9 deletions src/components/dms/MessageProfileButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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}>
<Message
style={[t.atoms.text, {marginLeft: 1, marginBottom: 1}]}
size="md"
/>
<ButtonIcon icon={Message} size="md" />
</Link>
)
} else {
Expand Down
9 changes: 5 additions & 4 deletions src/screens/Profile/Header/ProfileHeaderStandard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
]}
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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}
Expand Down
39 changes: 13 additions & 26 deletions src/view/com/profile/ProfileMenu.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand All @@ -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()
Expand Down Expand Up @@ -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={[
a.rounded_full,
a.justify_center,
a.align_center,
{width: 36, height: 36},
alf.atoms.bg_contrast_25,
(state.hovered || state.pressed) && [
alf.atoms.bg_contrast_50,
],
]}>
<FontAwesomeIcon
icon="ellipsis"
size={20}
style={t.atoms.text}
/>
</TouchableOpacity>
label={_(msg`More options`)}
hitSlop={HITSLOP_20}
variant="solid"
color="secondary"
size="small"
shape="round">
<ButtonIcon icon={Ellipsis} size="sm" />
</Button>
)
}}
</Menu.Trigger>
Expand Down
Loading