Updated tooltip / floating menu style to add a border for ease-of-vis…

…ibility and accessibility (actualbudget#2779)

Changed:
- /packages/desktop-client/stc/style/style.ts
- /packages/desktop-client/src/components/tooltips.tsx

Updated to include a border:
- color: theme.menuItemBackgroundHover
  - Used this color since its clean and maches the overall theming regardless of color palette
- width: 2px
  - Not too thin, not too thick
- style: solid
  - So it actually displays

Changed color of tooltip to be more "vocal" against the background on all themes

Uses `theme.menuItemTextHeader` color now

Added whole style for 'tooltipXYZ' for each theme to add definition to colors (actualbudget#2779)

packages/desktop-client/src/components/tooltips.tsx

@@ -371,9 +371,12 @@ export class Tooltip extends Component<TooltipProps> {
       padding: 5,
       width,
       ...styles.shadowLarge,
+      borderWidth: 2,
       borderRadius: 4,
-      backgroundColor: theme.menuBackground,
-      color: theme.menuItemText,
+      borderStyle: 'solid',
+      borderColor: theme.tooltipBorder,
+      backgroundColor: theme.tooltipBackground,
+      color: theme.tooltipText,
       // opacity: 0,
       // transition: 'transform .1s, opacity .1s',
       // transitionTimingFunction: 'ease-out'

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

@@ -133,9 +133,12 @@ export const styles = {
   tooltip: {
     padding: 5,
     ...shadowLarge,
+    borderWidth: 2,
     borderRadius: 4,
-    backgroundColor: theme.menuBackground,
-    color: theme.menuItemText,
+    borderStyle: 'solid',
+    borderColor: theme.tooltipBorder,
+    backgroundColor: theme.tooltipBackground,
+    color: theme.tooltipText,
     overflow: 'auto',
   },
   // Dynamically set

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

@@ -191,3 +191,7 @@ export const reportsBlue = colorPalette.blue400;
 export const reportsGreen = colorPalette.green400;
 export const reportsLabel = pageText;
 export const reportsInnerLabel = colorPalette.navy800;
+
+export const tooltipText = colorPalette.navy100;
+export const tooltipBackground = colorPalette.navy600;
+export const tooltipBorder = colorPalette.navy400;

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

@@ -190,3 +190,7 @@ export const reportsBlue = colorPalette.blue400;
 export const reportsGreen = colorPalette.green400;
 export const reportsLabel = colorPalette.navy900;
 export const reportsInnerLabel = colorPalette.navy800;
+
+export const tooltipText = colorPalette.navy900;
+export const tooltipBackground = colorPalette.navy50;
+export const tooltipBorder = colorPalette.navy150;

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

@@ -193,3 +193,7 @@ export const reportsBlue = colorPalette.blue400;
 export const reportsGreen = colorPalette.green400;
 export const reportsLabel = colorPalette.navy900;
 export const reportsInnerLabel = colorPalette.navy800;
+
+export const tooltipText = colorPalette.navy900;
+export const tooltipBackground = colorPalette.navy50;
+export const tooltipBorder = colorPalette.navy150;

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

@@ -193,3 +193,7 @@ export const reportsBlue = colorPalette.blue400;
 export const reportsGreen = colorPalette.green400;
 export const reportsLabel = pageText;
 export const reportsInnerLabel = colorPalette.navy800;
+
+export const tooltipText = colorPalette.gray100;
+export const tooltipBackground = colorPalette.gray600;
+export const tooltipBorder = colorPalette.gray400;