Bugfix:Midnight theme button contrast (#2538)

* added green700 (g3) to highlight text in PayeeAutocomplete and CategoryAutocomplete

* added upcoming release note doc for Isuee 2488

* modified background and text to meet WCAG AA compliance for contrast

* updated code for autocomplete highlight on menu items

* fixed linting errors and renamed release note

* updated release note category from 'bug' to 'bugfix'

* fixing the light theme

---------

Co-authored-by: Jenn Cox <jenncox@Jenns-MacBook-Air.local>

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

@@ -261,7 +261,9 @@ function SplitTransactionButton({
         alignItems: 'center',
         fontSize: 11,
         fontWeight: 500,
-        color: theme.noticeTextMenu,
+        color: highlighted
+          ? theme.menuAutoCompleteTextHover
+          : theme.noticeTextMenu,
         padding: '6px 8px',
         ':active': {
           backgroundColor: 'rgba(100, 100, 100, .25)',
@@ -297,7 +299,8 @@ type CategoryItemProps = {
   embedded?: boolean;
 };
 
-function CategoryItem({
+// eslint-disable-next-line import/no-unused-modules
+export function CategoryItem({
   item,
   className,
   style,
@@ -309,6 +312,7 @@ function CategoryItem({
   const narrowStyle = isNarrowWidth
     ? {
         ...styles.mobileMenuItem,
+        color: theme.menuAutoCompleteText,
         borderRadius: 0,
         borderTop: `1px solid ${theme.pillBorder}`,
       }
@@ -324,6 +328,12 @@ function CategoryItem({
           backgroundColor: highlighted
             ? theme.menuAutoCompleteBackgroundHover
             : 'transparent',
+          color: highlighted
+            ? theme.menuAutoCompleteItemTextHover
+            : theme.menuAutoCompleteItemText,
+          ':hover': {
+            color: theme.menuAutoCompleteItemTextHover,
+          },
           padding: 4,
           paddingLeft: 20,
           borderRadius: embedded ? 4 : 0,

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

@@ -421,8 +421,9 @@ export function CreatePayeeButton({
       style={{
         display: 'block',
         flexShrink: 0,
-        color:
-          embedded && isNarrowWidth ? theme.menuItemText : theme.noticeTextMenu,
+        color: highlighted
+          ? theme.menuAutoCompleteTextHover
+          : theme.noticeTextMenu,
         borderRadius: embedded ? 4 : 0,
         fontSize: 11,
         fontWeight: 500,
@@ -483,6 +484,7 @@ function PayeeItem({
   const narrowStyle = isNarrowWidth
     ? {
         ...styles.mobileMenuItem,
+        color: theme.menuAutoCompleteText,
         borderRadius: 0,
         borderTop: `1px solid ${theme.pillBorder}`,
       }
@@ -517,6 +519,12 @@ function PayeeItem({
           backgroundColor: highlighted
             ? theme.menuAutoCompleteBackgroundHover
             : 'transparent',
+          color: highlighted
+            ? theme.menuAutoCompleteItemTextHover
+            : theme.menuAutoCompleteItemText,
+          ':hover': {
+            color: theme.menuAutoCompleteItemTextHover,
+          },
           borderRadius: embedded ? 4 : 0,
           padding: 4,
           paddingLeft: 20,

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

@@ -61,6 +61,7 @@ export const menuAutoCompleteBackground = colorPalette.navy900;
 export const menuAutoCompleteBackgroundHover = colorPalette.navy600;
 export const menuAutoCompleteText = colorPalette.navy200;
 export const menuAutoCompleteTextHeader = colorPalette.purple200;
+export const menuAutoCompleteItemText = menuItemText;
 
 export const modalBackground = colorPalette.gray800;
 export const modalBorder = colorPalette.navy600;

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

@@ -61,6 +61,7 @@ export const menuAutoCompleteBackground = colorPalette.navy900;
 export const menuAutoCompleteBackgroundHover = colorPalette.navy600;
 export const menuAutoCompleteText = colorPalette.white;
 export const menuAutoCompleteTextHeader = colorPalette.orange150;
+export const menuAutoCompleteItemText = menuAutoCompleteText;
 
 export const modalBackground = colorPalette.white;
 export const modalBorder = colorPalette.white;

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

@@ -60,7 +60,10 @@ export const menuKeybindingText = colorPalette.navy400;
 export const menuAutoCompleteBackground = colorPalette.navy900;
 export const menuAutoCompleteBackgroundHover = colorPalette.navy600;
 export const menuAutoCompleteText = colorPalette.white;
+export const menuAutoCompleteTextHover = colorPalette.green150;
 export const menuAutoCompleteTextHeader = colorPalette.orange150;
+export const menuAutoCompleteItemTextHover = menuAutoCompleteText;
+export const menuAutoCompleteItemText = menuAutoCompleteText;
 
 export const modalBackground = colorPalette.white;
 export const modalBorder = colorPalette.white;

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

@@ -50,7 +50,7 @@ export const sidebarItemTextSelected = colorPalette.purple200;
 export const menuBackground = colorPalette.gray700;
 export const menuItemBackground = colorPalette.gray200;
 export const menuItemBackgroundHover = colorPalette.gray500;
-export const menuItemText = colorPalette.gray100;
+export const menuItemText = colorPalette.gray100; /* controls all dropdowns */
 export const menuItemTextHover = colorPalette.gray50;
 export const menuItemTextSelected = colorPalette.purple400;
 export const menuItemTextHeader = colorPalette.purple200;
@@ -58,10 +58,12 @@ export const menuBorder = colorPalette.gray800;
 export const menuBorderHover = colorPalette.purple300;
 export const menuKeybindingText = colorPalette.gray500;
 export const menuAutoCompleteBackground = colorPalette.gray600;
-export const menuAutoCompleteBackgroundHover = colorPalette.gray300;
+export const menuAutoCompleteBackgroundHover = colorPalette.gray50;
 export const menuAutoCompleteText = colorPalette.gray100;
+export const menuAutoCompleteTextHover = colorPalette.green900;
 export const menuAutoCompleteTextHeader = colorPalette.purple200;
-
+export const menuAutoCompleteItemTextHover = colorPalette.gray700;
+export const menuAutoCompleteItemText = menuItemText;
 export const modalBackground = colorPalette.gray700;
 export const modalBorder = colorPalette.gray200;
 export const mobileHeaderBackground = colorPalette.gray900;
@@ -140,6 +142,7 @@ export const noticeText = colorPalette.green300;
 export const noticeTextLight = colorPalette.green400;
 export const noticeTextDark = colorPalette.green150;
 export const noticeTextMenu = colorPalette.green400;
+export const noticeTextMenuHover = colorPalette.green700;
 export const noticeBorder = colorPalette.green800;
 export const warningBackground = colorPalette.orange800;
 export const warningText = colorPalette.orange200;

upcoming-release-notes/2538.md

+---
+category: Bugfix
+authors: [Jenna59]
+---
+
+Improve contrast in Payee autocomplete's "Create payee" and Category autocomplete's "Split transaction" buttons
\ No newline at end of file