Update tooltip and themes with better visibility (#3298)

* Update tooltip and themes with better visibility

* Rename merge request # into release notes

* rename release note

* update VRT

* tweak light theme

* dont put border on autocomplete menus

* update VRT

* tweak popover style

* simplify

* update VRT

* update VRT

---------

Co-authored-by: Dustin Conlon <dustin@dustinconlon.com>
Co-authored-by: Dustin Conlon <58367364+VoltaicGRiD@users.noreply.github.com>
Co-authored-by: youngcw <calebyoung94@gmail.com>

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

@@ -576,6 +576,7 @@ function SingleAutocomplete<T extends Item>({
                 isNonModal
                 style={{
                   ...styles.darkScrollbar,
+                  ...styles.popover,
                   backgroundColor: theme.menuAutoCompleteBackground,
                   color: theme.menuAutoCompleteText,
                   minWidth: 200,

packages/desktop-client/src/components/select/DateSelect.tsx

@@ -27,7 +27,7 @@ import {
 import { stringToInteger } from 'loot-core/src/shared/util';
 
 import { useSyncedPref } from '../../hooks/useSyncedPref';
-import { theme } from '../../style';
+import { styles, theme } from '../../style';
 import { Input } from '../common/Input';
 import { Popover } from '../common/Popover';
 import { View } from '../common/View';
@@ -335,7 +335,7 @@ export function DateSelect({
         isOpen={open}
         isNonModal
         onOpenChange={() => setOpen(false)}
-        style={{ minWidth: 225 }}
+        style={{ ...styles.popover, minWidth: 225 }}
         data-testid="date-select-tooltip"
       >
         {content}

packages/desktop-client/src/style/styles.ts

@@ -131,10 +131,18 @@ export const styles = {
   tooltip: {
     padding: 5,
     ...shadowLarge,
+    borderWidth: 2,
     borderRadius: 4,
+    borderStyle: 'solid',
+    borderColor: theme.tooltipBorder,
+    backgroundColor: theme.tooltipBackground,
+    color: theme.tooltipText,
+    overflow: 'auto',
+  },
+  popover: {
+    border: 'none',
     backgroundColor: theme.menuBackground,
     color: theme.menuItemText,
-    overflow: 'auto',
   },
   // Dynamically set
   horizontalScrollbar: null as CSSProperties | null,

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

@@ -206,3 +206,7 @@ export const budgetHeaderCurrentMonth = tableHeaderBackground;
 export const floatingActionBarBackground = colorPalette.purple800;
 export const floatingActionBarBorder = floatingActionBarBackground;
 export const floatingActionBarText = colorPalette.navy150;
+
+export const tooltipText = colorPalette.navy100;
+export const tooltipBackground = colorPalette.navy800;
+export const tooltipBorder = colorPalette.navy700;

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

@@ -205,3 +205,7 @@ export const budgetHeaderOtherMonth = colorPalette.gray80;
 export const floatingActionBarBackground = colorPalette.purple400;
 export const floatingActionBarBorder = floatingActionBarBackground;
 export const floatingActionBarText = colorPalette.navy50;
+
+export const tooltipText = colorPalette.navy900;
+export const tooltipBackground = colorPalette.navy50;
+export const tooltipBorder = colorPalette.navy150;

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

@@ -208,3 +208,7 @@ export const budgetHeaderOtherMonth = colorPalette.gray80;
 export const floatingActionBarBackground = colorPalette.purple400;
 export const floatingActionBarBorder = floatingActionBarBackground;
 export const floatingActionBarText = colorPalette.navy50;
+
+export const tooltipText = colorPalette.navy900;
+export const tooltipBackground = colorPalette.white;
+export const tooltipBorder = colorPalette.navy150;

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

@@ -208,3 +208,7 @@ export const budgetHeaderCurrentMonth = tableHeaderBackground;
 export const floatingActionBarBackground = colorPalette.gray900;
 export const floatingActionBarBorder = colorPalette.purple300;
 export const floatingActionBarText = colorPalette.purple200;
+
+export const tooltipText = colorPalette.gray100;
+export const tooltipBackground = colorPalette.gray800;
+export const tooltipBorder = colorPalette.gray600;

upcoming-release-notes/3298.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [VoltaicGRiD, psybers]
+---
+
+Implement greater visibility and accessibility on popover menus and tooltips.