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>

src/components/Button.tsx

@@ -231,7 +231,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
           if (!disabled) {
             baseStyles.push(t.atoms.bg)
             hoverStyles.push({
-              backgroundColor: t.palette.contrast_100,
+              backgroundColor: t.palette.contrast_25,
             })
           }
         }

src/view/com/profile/ProfileMenu.tsx

@@ -9,7 +9,6 @@ import {useQueryClient} from '@tanstack/react-query'
 import {logger} from '#/logger'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {HITSLOP_10} from 'lib/constants'
-import {usePalette} from 'lib/hooks/usePalette'
 import {makeProfileLink} from 'lib/routes/links'
 import {shareUrl} from 'lib/sharing'
 import {toShareUrl} from 'lib/strings/url-helpers'
@@ -24,7 +23,7 @@ import {
 import {useSession} from 'state/session'
 import {EventStopper} from 'view/com/util/EventStopper'
 import * as Toast from 'view/com/util/Toast'
-import {useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
 import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
 import {ListSparkle_Stroke2_Corner0_Rounded as List} from '#/components/icons/ListSparkle'
@@ -49,7 +48,7 @@ let ProfileMenu = ({
   const {currentAccount, hasSession} = useSession()
   const t = useTheme()
   // TODO ALF this
-  const pal = usePalette('default')
+  const alf = useTheme()
   const {track} = useAnalytics()
   const {openModal} = useModalControls()
   const reportDialogControl = useReportDialogControl()
@@ -187,21 +186,21 @@ let ProfileMenu = ({
     <EventStopper onKeyDown={false}>
       <Menu.Root>
         <Menu.Trigger label={_(`More options`)}>
-          {({props}) => {
+          {({props, state}) => {
             return (
               <TouchableOpacity
                 {...props}
                 hitSlop={HITSLOP_10}
                 testID="profileHeaderDropdownBtn"
                 style={[
-                  {
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    padding: 8,
-                    borderRadius: 50,
-                  },
-                  pal.btn,
+                  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"

src/view/screens/ProfileFeed.tsx

@@ -1,5 +1,6 @@
 import React, {useCallback, useMemo} from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useIsFocused, useNavigation} from '@react-navigation/native'
@@ -54,7 +55,6 @@ import {atoms as a, useTheme} from '#/alf'
 import {Button as NewButton, ButtonText} from '#/components/Button'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
-import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid'
 import {
   Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled,
   Heart2_Stroke2_Corner0_Rounded as HeartOutline,
@@ -303,15 +303,16 @@ export function ProfileFeedScreenInner({
                         a.align_center,
                         a.rounded_full,
                         {height: 36, width: 36},
-                        t.atoms.bg_contrast_50,
+                        t.atoms.bg_contrast_25,
                         (state.hovered || state.pressed) && [
-                          t.atoms.bg_contrast_100,
+                          t.atoms.bg_contrast_50,
                         ],
                       ]}
                       testID="headerDropdownBtn">
-                      <Ellipsis
-                        size="lg"
-                        fill={t.atoms.text_contrast_medium.color}
+                      <FontAwesomeIcon
+                        icon="ellipsis"
+                        size={20}
+                        style={t.atoms.text}
                       />
                     </Pressable>
                   )