Fix profile header buttons (#5558) · pyrox.dev/witchsky@eb3b01d

+5 -5

src/components/Button.tsx

··· 14 14 } from 'react-native' 15 15 import {LinearGradient} from 'expo-linear-gradient' 16 16 17 - import {atoms as a, flatten, select, tokens, useTheme, web} from '#/alf' 17 + import {atoms as a, flatten, select, tokens, useTheme} from '#/alf' 18 18 import {Props as SVGIconProps} from '#/components/icons/common' 19 19 import {Text} from '#/components/Typography' 20 20 ··· 352 352 }) 353 353 } else if (size === 'small') { 354 354 baseStyles.push({ 355 - paddingVertical: 8, 355 + paddingVertical: 9, 356 356 paddingHorizontal: 12, 357 357 borderRadius: 6, 358 358 gap: 6, ··· 374 374 } 375 375 } else if (size === 'small') { 376 376 if (shape === 'round') { 377 - baseStyles.push({height: 36, width: 36}) 377 + baseStyles.push({height: 34, width: 34}) 378 378 } else { 379 379 baseStyles.push({height: 34, width: 34}) 380 380 } ··· 627 627 } 628 628 629 629 if (size === 'large') { 630 - baseStyles.push(a.text_md, a.leading_tight, web({top: -0.4})) 630 + baseStyles.push(a.text_md, a.leading_tight) 631 631 } else if (size === 'small') { 632 - baseStyles.push(a.text_sm, a.leading_tight, web({top: -0.4})) 632 + baseStyles.push(a.text_sm, a.leading_tight) 633 633 } else if (size === 'tiny') { 634 634 baseStyles.push(a.text_xs, a.leading_tight) 635 635 }

+9 -17

src/components/dms/MessageProfileButton.tsx

··· 4 4 import {msg} from '@lingui/macro' 5 5 import {useLingui} from '@lingui/react' 6 6 7 + import {logEvent} from '#/lib/statsig/statsig' 7 8 import {useMaybeConvoForUser} from '#/state/queries/messages/get-convo-for-members' 8 - import {logEvent} from 'lib/statsig/statsig' 9 9 import {atoms as a, useTheme} from '#/alf' 10 - import {Message_Stroke2_Corner0_Rounded as Message} from '../icons/Message' 11 - import {Link} from '../Link' 12 - import {canBeMessaged} from './util' 10 + import {ButtonIcon} from '#/components/Button' 11 + import {canBeMessaged} from '#/components/dms/util' 12 + import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message' 13 + import {Link} from '#/components/Link' 13 14 14 15 export function MessageProfileButton({ 15 16 profile, ··· 40 41 a.align_center, 41 42 t.atoms.bg_contrast_25, 42 43 a.rounded_full, 43 - {width: 36, height: 36}, 44 + {width: 34, height: 34}, 44 45 ]}> 45 - <Message 46 - style={[ 47 - t.atoms.text, 48 - {marginLeft: 1, marginBottom: 1, opacity: 0.3}, 49 - ]} 50 - size="md" 51 - /> 46 + <Message style={[t.atoms.text, {opacity: 0.3}]} size="md" /> 52 47 </View> 53 48 ) 54 49 } else { ··· 66 61 shape="round" 67 62 label={_(msg`Message ${profile.handle}`)} 68 63 to={`/messages/${convo.id}`} 69 - style={[a.justify_center, {width: 36, height: 36}]} 64 + style={[a.justify_center]} 70 65 onPress={onPress}> 71 - <Message 72 - style={[t.atoms.text, {marginLeft: 1, marginBottom: 1}]} 73 - size="md" 74 - /> 66 + <ButtonIcon icon={Message} size="md" /> 75 67 </Link> 76 68 ) 77 69 } else {

+7 -7

src/screens/Profile/Header/ProfileHeaderLabeler.tsx

··· 25 25 import {useRequireAuth, useSession} from '#/state/session' 26 26 import {ProfileMenu} from '#/view/com/profile/ProfileMenu' 27 27 import * as Toast from '#/view/com/util/Toast' 28 - import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf' 28 + import {atoms as a, tokens, useTheme} from '#/alf' 29 29 import {Button, ButtonText} from '#/components/Button' 30 30 import {DialogOuterProps} from '#/components/Dialog' 31 31 import { ··· 61 61 const profile: Shadow<AppBskyActorDefs.ProfileViewDetailed> = 62 62 useProfileShadow(profileUnshadowed) 63 63 const t = useTheme() 64 - const {gtMobile} = useBreakpoints() 65 64 const {_} = useLingui() 66 65 const {currentAccount, hasSession} = useSession() 67 66 const {openModal} = useModalControls() ··· 167 166 style={[a.px_lg, a.pt_md, a.pb_sm]} 168 167 pointerEvents={isIOS ? 'auto' : 'box-none'}> 169 168 <View 170 - style={[a.flex_row, a.justify_end, a.gap_sm, a.pb_lg]} 169 + style={[a.flex_row, a.justify_end, a.align_center, a.gap_xs, a.pb_lg]} 171 170 pointerEvents={isIOS ? 'auto' : 'box-none'}> 172 171 {isMe ? ( 173 172 <Button ··· 196 195 <View 197 196 style={[ 198 197 { 199 - paddingVertical: gtMobile ? 12 : 10, 198 + paddingVertical: 9, 199 + paddingHorizontal: 12, 200 + borderRadius: 6, 201 + gap: 6, 200 202 backgroundColor: isSubscribed 201 203 ? state.hovered || state.pressed 202 204 ? t.palette.contrast_50 ··· 205 207 ? tokens.color.temp_purple_dark 206 208 : tokens.color.temp_purple, 207 209 }, 208 - a.px_lg, 209 - a.rounded_sm, 210 - a.gap_sm, 211 210 ]}> 212 211 <Text 213 212 style={[ ··· 218 217 }, 219 218 a.font_bold, 220 219 a.text_center, 220 + a.leading_tight, 221 221 ]}> 222 222 {isSubscribed ? ( 223 223 <Trans>Unsubscribe</Trans>

+5 -4

src/screens/Profile/Header/ProfileHeaderStandard.tsx

··· 153 153 style={[ 154 154 {paddingLeft: 90}, 155 155 a.flex_row, 156 + a.align_center, 156 157 a.justify_end, 157 - a.gap_sm, 158 + a.gap_xs, 158 159 a.pb_sm, 159 160 a.flex_wrap, 160 161 ]} ··· 167 168 variant="solid" 168 169 onPress={onPressEditProfile} 169 170 label={_(msg`Edit profile`)} 170 - style={[a.rounded_full, a.py_sm]}> 171 + style={[a.rounded_full]}> 171 172 <ButtonText> 172 173 <Trans>Edit Profile</Trans> 173 174 </ButtonText> ··· 182 183 label={_(msg`Unblock`)} 183 184 disabled={!hasSession} 184 185 onPress={() => unblockPromptControl.open()} 185 - style={[a.rounded_full, a.py_sm]}> 186 + style={[a.rounded_full]}> 186 187 <ButtonText> 187 188 <Trans context="action">Unblock</Trans> 188 189 </ButtonText> ··· 205 206 onPress={ 206 207 profile.viewer?.following ? onPressUnfollow : onPressFollow 207 208 } 208 - style={[a.rounded_full, a.gap_xs, a.py_sm]}> 209 + style={[a.rounded_full]}> 209 210 <ButtonIcon 210 211 position="left" 211 212 icon={profile.viewer?.following ? Check : Plus}

+3 -4

src/screens/Profile/Header/index.tsx

··· 27 27 </View> 28 28 <View style={styles.content}> 29 29 <View style={[styles.buttonsLine]}> 30 - <LoadingPlaceholder width={167} height={36} style={styles.br50} /> 30 + <LoadingPlaceholder width={140} height={34} style={styles.br50} /> 31 31 </View> 32 32 </View> 33 33 </View> ··· 69 69 }, 70 70 content: { 71 71 paddingTop: 12, 72 - paddingHorizontal: 14, 73 - paddingBottom: 4, 72 + paddingHorizontal: 16, 73 + paddingBottom: 8, 74 74 }, 75 75 buttonsLine: { 76 76 flexDirection: 'row', 77 77 marginLeft: 'auto', 78 - marginBottom: 12, 79 78 }, 80 79 br45: {borderRadius: 45}, 81 80 br50: {borderRadius: 50},

+13 -26

src/view/com/profile/ProfileMenu.tsx

··· 1 1 import React, {memo} from 'react' 2 - import {TouchableOpacity} from 'react-native' 3 2 import {AppBskyActorDefs} from '@atproto/api' 4 - import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 5 3 import {msg, Trans} from '@lingui/macro' 6 4 import {useLingui} from '@lingui/react' 7 5 import {useQueryClient} from '@tanstack/react-query' 8 6 9 - import {HITSLOP_10} from '#/lib/constants' 7 + import {HITSLOP_20} from '#/lib/constants' 10 8 import {makeProfileLink} from '#/lib/routes/links' 11 9 import {shareUrl} from '#/lib/sharing' 12 10 import {toShareUrl} from '#/lib/strings/url-helpers' ··· 22 20 import {useSession} from '#/state/session' 23 21 import {EventStopper} from '#/view/com/util/EventStopper' 24 22 import * as Toast from '#/view/com/util/Toast' 25 - import {atoms as a, useTheme} from '#/alf' 23 + import {Button, ButtonIcon} from '#/components/Button' 26 24 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' 25 + import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid' 27 26 import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag' 28 27 import {ListSparkle_Stroke2_Corner0_Rounded as List} from '#/components/icons/ListSparkle' 29 28 import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute' ··· 45 44 }): React.ReactNode => { 46 45 const {_} = useLingui() 47 46 const {currentAccount, hasSession} = useSession() 48 - const t = useTheme() 49 - // TODO ALF this 50 - const alf = useTheme() 51 47 const {openModal} = useModalControls() 52 48 const reportDialogControl = useReportDialogControl() 53 49 const queryClient = useQueryClient() ··· 175 171 <EventStopper onKeyDown={false}> 176 172 <Menu.Root> 177 173 <Menu.Trigger label={_(`More options`)}> 178 - {({props, state}) => { 174 + {({props}) => { 179 175 return ( 180 - <TouchableOpacity 176 + <Button 181 177 {...props} 182 - hitSlop={HITSLOP_10} 183 178 testID="profileHeaderDropdownBtn" 184 - style={[ 185 - a.rounded_full, 186 - a.justify_center, 187 - a.align_center, 188 - {width: 36, height: 36}, 189 - alf.atoms.bg_contrast_25, 190 - (state.hovered || state.pressed) && [ 191 - alf.atoms.bg_contrast_50, 192 - ], 193 - ]}> 194 - <FontAwesomeIcon 195 - icon="ellipsis" 196 - size={20} 197 - style={t.atoms.text} 198 - /> 199 - </TouchableOpacity> 179 + label={_(msg`More options`)} 180 + hitSlop={HITSLOP_20} 181 + variant="solid" 182 + color="secondary" 183 + size="small" 184 + shape="round"> 185 + <ButtonIcon icon={Ellipsis} size="sm" /> 186 + </Button> 200 187 ) 201 188 }} 202 189 </Menu.Trigger>

Configure Feed

Configure Feed