rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: fix super menu contrast issues [skip e2e]

Browse Source
This commit is contained in:
Aman Harwara
2024-02-02 21:29:04 +05:30
parent 4c21a61dcf
commit 16c21f40d1
4 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx
View File

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

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

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

4
packages/web/src/javascripts/Components/SuperEditor/Plugins/ClassNames.ts
View File

@@ -6,8 +6,6 @@ export const PopoverClassNames = classNames(
) )
export const PopoverItemClassNames = 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', 'cursor-pointer m-0 focus:bg-info focus:text-info-contrast',
) )
export const PopoverItemSelectedClassNames = classNames('bg-info text-info-contrast')

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

@@ -1,7 +1,8 @@
import LinkedItemMeta from '@/Components/LinkedItems/LinkedItemMeta' import LinkedItemMeta from '@/Components/LinkedItems/LinkedItemMeta'
import { LinkedItemSearchResultsAddTagOption } from '@/Components/LinkedItems/LinkedItemSearchResultsAddTagOption' import { LinkedItemSearchResultsAddTagOption } from '@/Components/LinkedItems/LinkedItemSearchResultsAddTagOption'
import { PopoverItemClassNames, PopoverItemSelectedClassNames } from '../ClassNames' import { PopoverItemClassNames } from '../ClassNames'
import { ItemOption } from './ItemOption' import { ItemOption } from './ItemOption'
import { classNames } from '@standardnotes/snjs'
type Props = { type Props = {
index: number index: number
@@ -17,7 +18,12 @@ export function ItemSelectionItemComponent({ index, isSelected, onClick, onMouse
<li <li
key={option.key} key={option.key}
tabIndex={-1} 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} ref={option.setRefElement}
role="option" role="option"
aria-selected={isSelected} aria-selected={isSelected}