From 32537dc3cfeca3bc798d76d455b939d5ac3935d7 Mon Sep 17 00:00:00 2001 From: carkom Date: Sat, 9 Dec 2023 09:01:08 +0000 Subject: [PATCH] autocomplete menu --- .../src/components/filters/FiltersMenu.js | 4 ++-- .../src/components/reports/GraphButton.tsx | 4 ++-- .../desktop-client/src/components/reports/Tooltip.js | 8 +++----- .../src/components/reports/graphs/AreaGraph.tsx | 4 ++-- .../src/components/reports/graphs/BarGraph.tsx | 4 ++-- .../src/components/reports/graphs/BarLineGraph.tsx | 4 ++-- .../src/components/reports/graphs/DonutGraph.tsx | 4 ++-- .../src/components/reports/graphs/LineGraph.tsx | 4 ++-- .../src/components/reports/graphs/NetWorthGraph.tsx | 4 ++-- .../components/reports/graphs/StackedBarGraph.tsx | 4 ++-- packages/desktop-client/src/style/themes/dark.ts | 12 ++++++------ 11 files changed, 27 insertions(+), 29 deletions(-) diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.js b/packages/desktop-client/src/components/filters/FiltersMenu.js index 16034382cca..59803286944 100644 --- 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, }} > Filters diff --git a/packages/desktop-client/src/components/reports/GraphButton.tsx b/packages/desktop-client/src/components/reports/GraphButton.tsx index d3857def566..50c50297dd6 100644 --- 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, }} > {title} diff --git a/packages/desktop-client/src/components/reports/Tooltip.js b/packages/desktop-client/src/components/reports/Tooltip.js index 20f2af6b27e..1f1a481708f 100644 --- 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 index 50022af9df1..45d3b6ddcdd 100644 --- 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 index dd8b5558e83..964679bf893 100644 --- 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 index 816ffc8d532..6378969ef99 100644 --- 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 index a8ad506a00e..4fb8b19f6c7 100644 --- 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 index 069082c2630..419e0a2e612 100644 --- 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 index eed4baff05c..d17e37ac1a2 100644 --- 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 index 37e2b3ea41c..b588b7a86bd 100644 --- 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 index e2e4aa349f1..8c1aa1737de 100644 --- 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;