From 16c21f40d1ec25d6eb4bbdfc681bd9a727e4a752 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 2 Feb 2024 21:29:04 +0530
Subject: [PATCH] chore: fix super menu contrast issues [skip e2e]

---
 .../LinkedItemSearchResultsAddTagOption.tsx           |  1 -
 .../Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx | 11 +++++++----
 .../Components/SuperEditor/Plugins/ClassNames.ts      |  4 +---
 .../ItemSelectionItemComponent.tsx                    | 10 ++++++++--
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx
index 6b5cf266e..e767dcdc0 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx
+++ b/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) {
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx
index 4b5bf6c69..2cec047ff 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx
+++ b/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}
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ClassNames.ts b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ClassNames.ts
index c83292075..082fa162f 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ClassNames.ts
+++ b/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')
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionItemComponent.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionItemComponent.tsx
index 760e072da..a7653cea4 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionItemComponent.tsx
+++ b/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}