From 8356640e45f848cd69bbb0a3c68f530a63a1a0c2 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Tue, 12 Mar 2024 12:54:16 -0700
Subject: [PATCH] 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
---
.../components/autocomplete/CategoryAutocomplete.tsx | 4 ++--
.../src/components/autocomplete/ItemHeader.tsx | 12 +-----------
packages/desktop-client/src/style/themes/midnight.ts | 2 +-
upcoming-release-notes/2461.md | 6 ++++++
4 files changed, 10 insertions(+), 14 deletions(-)
create mode 100644 upcoming-release-notes/2461.md
diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
index 90daa3b44..de58e530e 100644
--- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
+++ b/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>
)}
diff --git a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx
index 736728085..981c05bec 100644
--- a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx
+++ b/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>
);
}
diff --git a/packages/desktop-client/src/style/themes/midnight.ts b/packages/desktop-client/src/style/themes/midnight.ts
index f0d3a10dc..5ef665a72 100644
--- a/packages/desktop-client/src/style/themes/midnight.ts
+++ b/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;
diff --git a/upcoming-release-notes/2461.md b/upcoming-release-notes/2461.md
new file mode 100644
index 000000000..6428fa295
--- /dev/null
+++ b/upcoming-release-notes/2461.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix midnight theme autocomplete hover color.
--
GitLab