autocomplete menu

actualbudget · Dec 9, 2023 · 32537dc · 32537dc
1 parent 8c6faf8
commit 32537dc
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 29 deletions.
diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.js b/packages/desktop-client/src/components/filters/FiltersMenu.js
@@ -429,8 +429,8 @@ export function FilterButton({ onApply, compact, hover }) {
               style={{
                 lineHeight: 1.5,
                 padding: '6px 10px',
-                backgroundColor: theme.menuAutoCompleteBackground,
-                color: theme.menuAutoCompleteText,
+                backgroundColor: theme.menuBackground,
+                color: theme.menuItemText,
               }}
             >
               <Text>Filters</Text>

diff --git a/packages/desktop-client/src/components/reports/GraphButton.tsx b/packages/desktop-client/src/components/reports/GraphButton.tsx
@@ -31,8 +31,8 @@ const GraphButton = ({
           style={{
             lineHeight: 1.5,
             padding: '6px 10px',
-            backgroundColor: theme.menuAutoCompleteBackground,
-            color: theme.menuAutoCompleteText,
+            backgroundColor: theme.menuBackground,
+            color: theme.menuItemText,
           }}
         >
           <Text>{title}</Text>

diff --git a/packages/desktop-client/src/components/reports/Tooltip.js b/packages/desktop-client/src/components/reports/Tooltip.js
@@ -58,10 +58,8 @@ class Tooltip extends Component {
             borderRadius: 2,
             boxShadow: light ? 'none' : '0 1px 6px rgba(0, 0, 0, .20)',
             // TODO: Transparent background
-            backgroundColor: light
-              ? 'transparent'
-              : theme.menuAutoCompleteBackground,
-            color: light ? 'inherit' : theme.menuAutoCompleteText,
+            backgroundColor: light ? 'transparent' : theme.menuBackground,
+            color: light ? 'inherit' : theme.menuItemText,
             padding: 10,
           },
           !light &&
@@ -71,7 +69,7 @@ class Tooltip extends Component {
               borderTop: '7px solid transparent',
               borderBottom: '7px solid transparent',
               [position === 'right' ? 'borderRight' : 'borderLeft']:
-                '7px solid ' + theme.menuAutoCompleteBackground,
+                '7px solid ' + theme.menuBackground,
               [position === 'right' ? 'left' : 'right']: -6,
               top: 'calc(50% - 7px)',
               // eslint-disable-next-line rulesdir/typography

diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
@@ -49,8 +49,8 @@ const CustomTooltip = ({
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >

diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -66,8 +66,8 @@ const CustomTooltip = ({
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >

diff --git a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx
@@ -44,8 +44,8 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >

diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -49,8 +49,8 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >

diff --git a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
@@ -43,8 +43,8 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >

diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -79,8 +79,8 @@ function NetWorthGraph({
               pointerEvents: 'none',
               borderRadius: 2,
               boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-              backgroundColor: theme.menuAutoCompleteBackground,
-              color: theme.menuAutoCompleteText,
+              backgroundColor: theme.menuBackground,
+              color: theme.menuItemText,
               padding: 10,
             },
             style,

diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -50,8 +50,8 @@ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
           pointerEvents: 'none',
           borderRadius: 2,
           boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-          backgroundColor: theme.menuAutoCompleteBackground,
-          color: theme.menuAutoCompleteText,
+          backgroundColor: theme.menuBackground,
+          color: theme.menuItemText,
           padding: 10,
         })}`}
       >

diff --git a/packages/desktop-client/src/style/themes/dark.ts b/packages/desktop-client/src/style/themes/dark.ts
@@ -56,10 +56,10 @@ export const menuItemTextHeader = colorPalette.purple500;
 export const menuBorder = colorPalette.navy800;
 export const menuBorderHover = colorPalette.purple400;
 export const menuKeybindingText = colorPalette.navy500;
-export const menuAutoCompleteBackground = colorPalette.navy400;
-export const menuAutoCompleteBackgroundHover = colorPalette.navy300;
-export const menuAutoCompleteText = colorPalette.navy900;
-export const menuAutoCompleteTextHeader = menuItemTextHeader;
+export const menuAutoCompleteBackground = colorPalette.navy900;
+export const menuAutoCompleteBackgroundHover = colorPalette.navy600;
+export const menuAutoCompleteText = colorPalette.navy200;
+export const menuAutoCompleteTextHeader = colorPalette.purple200;
 
 export const modalBackground = colorPalette.gray800;
 export const modalBorder = colorPalette.navy600;
@@ -85,7 +85,7 @@ export const markdownDark = colorPalette.purple500;
 export const markdownLight = colorPalette.purple800;
 
 // Button
-export const buttonMenuText = colorPalette.navy900;
+export const buttonMenuText = colorPalette.navy200;
 export const buttonMenuTextHover = buttonMenuText;
 export const buttonMenuBackground = 'transparent';
 export const buttonMenuBackgroundHover = 'rgba(200, 200, 200, .25)';
@@ -138,7 +138,7 @@ export const noticeBackgroundDark = colorPalette.green500;
 export const noticeText = colorPalette.green300;
 export const noticeTextLight = colorPalette.green500;
 export const noticeTextDark = colorPalette.green150;
-export const noticeTextMenu = colorPalette.green800;
+export const noticeTextMenu = colorPalette.green500;
 export const noticeBorder = colorPalette.green800;
 export const warningBackground = colorPalette.orange800;
 export const warningText = colorPalette.orange300;