chore: fix super menu contrast issues [skip e2e]

packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx

@@ -15,7 +15,6 @@ export const LinkedItemSearchResultsAddTagOption = forwardRef(
         className={classNames(
           'group flex w-full items-center gap-2 overflow-hidden px-3 py-2 hover:bg-contrast hover:text-foreground',
           'focus:bg-info-backdrop [&[data-active-item]]:bg-info-backdrop',
-          isFocused ? 'bg-info-backdrop text-foreground' : '',
         )}
         onClick={() => {
           if (onClickCallback) {

packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx

@@ -1,6 +1,7 @@
 import Icon from '@/Components/Icon/Icon'
-import { PopoverItemClassNames, PopoverItemSelectedClassNames } from '../ClassNames'
+import { PopoverItemClassNames } from '../ClassNames'
 import { BlockPickerOption } from './BlockPickerOption'
+import { classNames } from '@standardnotes/snjs'
 
 export function BlockPickerMenuItem({
   index,
@@ -19,9 +20,11 @@ export function BlockPickerMenuItem({
     <li
       key={option.key}
       tabIndex={-1}
-      className={`gap-3 border-b-[0.5px] border-border ${PopoverItemClassNames} ${
-        isSelected ? PopoverItemSelectedClassNames : ''
-      }`}
+      className={classNames(
+        'gap-3 border-b-[0.5px] border-border px-3 py-2',
+        isSelected && 'bg-info-backdrop',
+        PopoverItemClassNames,
+      )}
       ref={option.setRefElement}
       role="option"
       aria-selected={isSelected}

packages/web/src/javascripts/Components/SuperEditor/Plugins/ClassNames.ts

@@ -6,8 +6,6 @@ export const PopoverClassNames = classNames(
 )
 
 export const PopoverItemClassNames = classNames(
-  'flex w-full items-center text-base overflow-hidden py-2 px-3 hover:bg-info hover:text-info-contrast',
+  'flex w-full items-center text-base overflow-hidden hover:bg-contrast hover:text-foreground',
   'cursor-pointer m-0 focus:bg-info focus:text-info-contrast',
 )
-
-export const PopoverItemSelectedClassNames = classNames('bg-info text-info-contrast')

packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionItemComponent.tsx

@@ -1,7 +1,8 @@
 import LinkedItemMeta from '@/Components/LinkedItems/LinkedItemMeta'
 import { LinkedItemSearchResultsAddTagOption } from '@/Components/LinkedItems/LinkedItemSearchResultsAddTagOption'
-import { PopoverItemClassNames, PopoverItemSelectedClassNames } from '../ClassNames'
+import { PopoverItemClassNames } from '../ClassNames'
 import { ItemOption } from './ItemOption'
+import { classNames } from '@standardnotes/snjs'
 
 type Props = {
   index: number
@@ -17,7 +18,12 @@ export function ItemSelectionItemComponent({ index, isSelected, onClick, onMouse
     <li
       key={option.key}
       tabIndex={-1}
-      className={`gap-4 ${PopoverItemClassNames} ${isSelected ? PopoverItemSelectedClassNames : ''}`}
+      className={classNames(
+        'gap-4',
+        PopoverItemClassNames,
+        isSelected && 'bg-info-backdrop',
+        option.item && 'px-3 py-2',
+      )}
       ref={option.setRefElement}
       role="option"
       aria-selected={isSelected}