Fix midnight theme autocomplete hover (#2461)

* Fix midnight theme autocomplete hover and make ItemHeader not depend on category groups

* Update

* Release notes

* Fix typecheck error

packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx

@@ -75,20 +75,20 @@ function CategoryList({
           }
 
           const showGroup = item.cat_group !== lastGroup;
+          const groupName = `${item.group?.name}${item.group?.hidden ? ' (hidden)' : ''}`;
           lastGroup = item.cat_group;
           return (
             <Fragment key={item.id}>
               {showGroup && item.group?.name && (
                 <Fragment key={item.group.name}>
                   {renderCategoryItemGroupHeader({
-                    title: item.group.name,
+                    title: groupName,
                     style: {
                       color:
                         showHiddenItems && item.group?.hidden
                           ? theme.pageTextSubdued
                           : theme.menuAutoCompleteTextHeader,
                     },
-                    item: item.group,
                   })}
                 </Fragment>
               )}

packages/desktop-client/src/components/autocomplete/ItemHeader.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { type CategoryGroupEntity } from 'loot-core/types/models/category-group';
-
 import { theme } from '../../style/theme';
 import { type CSSProperties } from '../../style/types';
 
@@ -9,16 +7,9 @@ export type ItemHeaderProps = {
   title: string;
   style?: CSSProperties;
   type?: string;
-  item?: CategoryGroupEntity;
 };
 
-export function ItemHeader({
-  title,
-  style,
-  type,
-  item,
-  ...props
-}: ItemHeaderProps) {
+export function ItemHeader({ title, style, type, ...props }: ItemHeaderProps) {
   return (
     <div
       style={{
@@ -30,7 +21,6 @@ export function ItemHeader({
       {...props}
     >
       {title}
-      {item?.hidden ? ' (hidden)' : null}
     </div>
   );
 }

packages/desktop-client/src/style/themes/midnight.ts

@@ -58,7 +58,7 @@ export const menuBorder = colorPalette.gray800;
 export const menuBorderHover = colorPalette.purple300;
 export const menuKeybindingText = colorPalette.gray500;
 export const menuAutoCompleteBackground = colorPalette.gray600;
-export const menuAutoCompleteBackgroundHover = colorPalette.gray400;
+export const menuAutoCompleteBackgroundHover = colorPalette.gray300;
 export const menuAutoCompleteText = colorPalette.gray100;
 export const menuAutoCompleteTextHeader = colorPalette.purple200;
 

upcoming-release-notes/2461.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix midnight theme autocomplete hover color.