tweak hover state (#5892)

src/view/shell/Drawer.tsx

@@ -226,7 +226,6 @@ let DrawerContent = ({}: {}): React.ReactNode => {
       <ScrollView
         style={[a.flex_1]}
         contentContainerStyle={[
-          a.px_xl,
           {
             paddingTop: Math.max(
               insets.top + a.pt_xl.paddingTop,
@@ -234,6 +233,7 @@ let DrawerContent = ({}: {}): React.ReactNode => {
             ),
           },
         ]}>
+        <View style={[a.px_xl]}>
           {hasSession && currentAccount ? (
             <DrawerProfileCard
               account={currentAccount}
@@ -246,6 +246,7 @@ let DrawerContent = ({}: {}): React.ReactNode => {
           )}
 
           <Divider style={[a.mt_xl, a.mb_sm]} />
+        </View>
 
         {hasSession ? (
           <>
@@ -272,6 +273,7 @@ let DrawerContent = ({}: {}): React.ReactNode => {
           </>
         )}
 
+        <View style={[a.px_xl]}>
           <Divider style={[a.mb_xl, a.mt_sm]} />
 
           <View style={[a.flex_col, a.gap_md, a.flex_wrap]}>
@@ -301,6 +303,7 @@ let DrawerContent = ({}: {}): React.ReactNode => {
               </Text>
             )}
           </View>
+        </View>
       </ScrollView>
 
       <DrawerFooter
@@ -387,8 +390,6 @@ let SearchMenuItem = ({
         )
       }
       label={_(msg`Search`)}
-      accessibilityLabel={_(msg`Search`)}
-      accessibilityHint=""
       bold={isActive}
       onPress={onPress}
     />
@@ -415,8 +416,6 @@ let HomeMenuItem = ({
         )
       }
       label={_(msg`Home`)}
-      accessibilityLabel={_(msg`Home`)}
-      accessibilityHint=""
       bold={isActive}
       onPress={onPress}
     />
@@ -443,8 +442,6 @@ let ChatMenuItem = ({
         )
       }
       label={_(msg`Chat`)}
-      accessibilityLabel={_(msg`Chat`)}
-      accessibilityHint=""
       bold={isActive}
       onPress={onPress}
     />
@@ -472,7 +469,6 @@ let NotificationsMenuItem = ({
         )
       }
       label={_(msg`Notifications`)}
-      accessibilityLabel={_(msg`Notifications`)}
       accessibilityHint={
         numUnreadNotifications === ''
           ? ''
@@ -505,8 +501,6 @@ let FeedsMenuItem = ({
         )
       }
       label={_(msg`Feeds`)}
-      accessibilityLabel={_(msg`Feeds`)}
-      accessibilityHint=""
       bold={isActive}
       onPress={onPress}
     />
@@ -522,8 +516,6 @@ let ListsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
     <MenuItem
       icon={<List style={[t.atoms.text]} width={iconWidth} />}
       label={_(msg`Lists`)}
-      accessibilityLabel={_(msg`Lists`)}
-      accessibilityHint=""
       onPress={onPress}
     />
   )
@@ -549,8 +541,6 @@ let ProfileMenuItem = ({
         )
       }
       label={_(msg`Profile`)}
-      accessibilityLabel={_(msg`Profile`)}
-      accessibilityHint=""
       onPress={onPress}
     />
   )
@@ -564,32 +554,30 @@ let SettingsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
     <MenuItem
       icon={<Settings style={[t.atoms.text]} width={iconWidth} />}
       label={_(msg`Settings`)}
-      accessibilityLabel={_(msg`Settings`)}
-      accessibilityHint=""
       onPress={onPress}
     />
   )
 }
 SettingsMenuItem = React.memo(SettingsMenuItem)
 
-function MenuItem({
-  icon,
-  label,
-  accessibilityLabel,
-  count,
-  bold,
-  onPress,
-}: MenuItemProps) {
+function MenuItem({icon, label, count, bold, onPress}: MenuItemProps) {
   const t = useTheme()
   return (
-    <PressableScale
+    <Button
       testID={`menuItemButton-${label}`}
-      style={[a.flex_row, a.align_center, a.gap_sm, {paddingVertical: 10}]}
       onPress={onPress}
       accessibilityRole="tab"
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint=""
-      targetScale={0.95}>
+      label={label}>
+      {({hovered, pressed}) => (
+        <View
+          style={[
+            a.flex_1,
+            a.flex_row,
+            a.gap_md,
+            a.py_md,
+            a.px_xl,
+            (hovered || pressed) && t.atoms.bg_contrast_25,
+          ]}>
           <View style={[a.relative]}>
             {icon}
             {count ? (
@@ -628,10 +616,17 @@ function MenuItem({
             ) : undefined}
           </View>
           <Text
-        style={[a.flex_1, a.text_2xl, bold && a.font_bold, web(a.leading_snug)]}
+            style={[
+              a.flex_1,
+              a.text_2xl,
+              bold && a.font_heavy,
+              web(a.leading_snug),
+            ]}
             numberOfLines={1}>
             {label}
           </Text>
-    </PressableScale>
+        </View>
+      )}
+    </Button>
   )
 }