Bluesky app fork with some witchin' additions 💫

Merge #4492, fixes profile menu hover (#4580)

* Fix button hover color (#4492)

* Update ProfileMenu.tsx

* Update Button.tsx

* Update ProfileFeed.tsx

* Update ProfileFeed.tsx

* Re-add change post conflict

---------

Co-authored-by: Minseo Lee <itoupluk427@gmail.com>

authored by

Eric Bailey
Minseo Lee
and committed by
GitHub
eac4668d 80197556

+19 -19
+1 -1
src/components/Button.tsx
··· 231 if (!disabled) { 232 baseStyles.push(t.atoms.bg) 233 hoverStyles.push({ 234 - backgroundColor: t.palette.contrast_100, 235 }) 236 } 237 }
··· 231 if (!disabled) { 232 baseStyles.push(t.atoms.bg) 233 hoverStyles.push({ 234 + backgroundColor: t.palette.contrast_25, 235 }) 236 } 237 }
+11 -12
src/view/com/profile/ProfileMenu.tsx
··· 9 import {logger} from '#/logger' 10 import {useAnalytics} from 'lib/analytics/analytics' 11 import {HITSLOP_10} from 'lib/constants' 12 - import {usePalette} from 'lib/hooks/usePalette' 13 import {makeProfileLink} from 'lib/routes/links' 14 import {shareUrl} from 'lib/sharing' 15 import {toShareUrl} from 'lib/strings/url-helpers' ··· 24 import {useSession} from 'state/session' 25 import {EventStopper} from 'view/com/util/EventStopper' 26 import * as Toast from 'view/com/util/Toast' 27 - import {useTheme} from '#/alf' 28 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' 29 import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag' 30 import {ListSparkle_Stroke2_Corner0_Rounded as List} from '#/components/icons/ListSparkle' ··· 49 const {currentAccount, hasSession} = useSession() 50 const t = useTheme() 51 // TODO ALF this 52 - const pal = usePalette('default') 53 const {track} = useAnalytics() 54 const {openModal} = useModalControls() 55 const reportDialogControl = useReportDialogControl() ··· 187 <EventStopper onKeyDown={false}> 188 <Menu.Root> 189 <Menu.Trigger label={_(`More options`)}> 190 - {({props}) => { 191 return ( 192 <TouchableOpacity 193 {...props} 194 hitSlop={HITSLOP_10} 195 testID="profileHeaderDropdownBtn" 196 style={[ 197 - { 198 - flexDirection: 'row', 199 - alignItems: 'center', 200 - justifyContent: 'center', 201 - padding: 8, 202 - borderRadius: 50, 203 - }, 204 - pal.btn, 205 ]}> 206 <FontAwesomeIcon 207 icon="ellipsis"
··· 9 import {logger} from '#/logger' 10 import {useAnalytics} from 'lib/analytics/analytics' 11 import {HITSLOP_10} from 'lib/constants' 12 import {makeProfileLink} from 'lib/routes/links' 13 import {shareUrl} from 'lib/sharing' 14 import {toShareUrl} from 'lib/strings/url-helpers' ··· 23 import {useSession} from 'state/session' 24 import {EventStopper} from 'view/com/util/EventStopper' 25 import * as Toast from 'view/com/util/Toast' 26 + import {atoms as a, useTheme} from '#/alf' 27 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' 28 import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag' 29 import {ListSparkle_Stroke2_Corner0_Rounded as List} from '#/components/icons/ListSparkle' ··· 48 const {currentAccount, hasSession} = useSession() 49 const t = useTheme() 50 // TODO ALF this 51 + const alf = useTheme() 52 const {track} = useAnalytics() 53 const {openModal} = useModalControls() 54 const reportDialogControl = useReportDialogControl() ··· 186 <EventStopper onKeyDown={false}> 187 <Menu.Root> 188 <Menu.Trigger label={_(`More options`)}> 189 + {({props, state}) => { 190 return ( 191 <TouchableOpacity 192 {...props} 193 hitSlop={HITSLOP_10} 194 testID="profileHeaderDropdownBtn" 195 style={[ 196 + a.rounded_full, 197 + a.justify_center, 198 + a.align_center, 199 + {width: 36, height: 36}, 200 + alf.atoms.bg_contrast_25, 201 + (state.hovered || state.pressed) && [ 202 + alf.atoms.bg_contrast_50, 203 + ], 204 ]}> 205 <FontAwesomeIcon 206 icon="ellipsis"
+7 -6
src/view/screens/ProfileFeed.tsx
··· 1 import React, {useCallback, useMemo} from 'react' 2 import {Pressable, StyleSheet, View} from 'react-native' 3 import {msg, Plural, Trans} from '@lingui/macro' 4 import {useLingui} from '@lingui/react' 5 import {useIsFocused, useNavigation} from '@react-navigation/native' ··· 54 import {Button as NewButton, ButtonText} from '#/components/Button' 55 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' 56 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' 57 - import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid' 58 import { 59 Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled, 60 Heart2_Stroke2_Corner0_Rounded as HeartOutline, ··· 303 a.align_center, 304 a.rounded_full, 305 {height: 36, width: 36}, 306 - t.atoms.bg_contrast_50, 307 (state.hovered || state.pressed) && [ 308 - t.atoms.bg_contrast_100, 309 ], 310 ]} 311 testID="headerDropdownBtn"> 312 - <Ellipsis 313 - size="lg" 314 - fill={t.atoms.text_contrast_medium.color} 315 /> 316 </Pressable> 317 )
··· 1 import React, {useCallback, useMemo} from 'react' 2 import {Pressable, StyleSheet, View} from 'react-native' 3 + import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 4 import {msg, Plural, Trans} from '@lingui/macro' 5 import {useLingui} from '@lingui/react' 6 import {useIsFocused, useNavigation} from '@react-navigation/native' ··· 55 import {Button as NewButton, ButtonText} from '#/components/Button' 56 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' 57 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' 58 import { 59 Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled, 60 Heart2_Stroke2_Corner0_Rounded as HeartOutline, ··· 303 a.align_center, 304 a.rounded_full, 305 {height: 36, width: 36}, 306 + t.atoms.bg_contrast_25, 307 (state.hovered || state.pressed) && [ 308 + t.atoms.bg_contrast_50, 309 ], 310 ]} 311 testID="headerDropdownBtn"> 312 + <FontAwesomeIcon 313 + icon="ellipsis" 314 + size={20} 315 + style={t.atoms.text} 316 /> 317 </Pressable> 318 )