fix: improve tooltip in different color theme (#304)

* fix: improve tooltip in different color theme

* fix(components): add font-family in mac for tooltip

Author: mortalYoung

src/common/className.ts

@@ -1,3 +1,4 @@
+import { Utils } from '@dtinsight/dt-utils/lib';
 import { isEmpty } from 'lodash';
 import { APP_PREFIX } from 'mo/common/const';
 /**
@@ -55,3 +56,11 @@ export function getBEMElement(block: string, element: string) {
 export function getBEMModifier(blockOrElement: string, modifier: string) {
     return `${blockOrElement}--${modifier}`;
 }
+
+/**
+ * Returns the className of font-family in mac
+ * @returns
+ */
+export function getFontInMac() {
+    return Utils.isMacOs() ? 'mac' : '';
+}

src/components/tooltip/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { default as RcTooltip } from 'rc-tooltip';
 import 'rc-tooltip/assets/bootstrap.css';
-import { TooltipProps } from 'rc-tooltip/lib/Tooltip';
+import type { TooltipProps } from 'rc-tooltip/lib/Tooltip';
+import { classNames, getFontInMac } from 'mo/common/className';
 
 export interface IToolTipProps extends TooltipProps {}
 
@@ -10,15 +11,18 @@ const Tooltip = ({
     children,
     placement = 'bottom',
     trigger = 'hover',
+    overlayClassName,
+    mouseEnterDelay,
     ...rest
 }: IToolTipProps) => {
     if (overlay) {
         return (
             <RcTooltip
+                overlayClassName={classNames(getFontInMac(), overlayClassName)}
                 placement={placement}
                 trigger={trigger}
                 overlay={overlay}
-                mouseEnterDelay={0.1}
+                mouseEnterDelay={mouseEnterDelay || 0.1}
                 {...rest}
             >
                 {children}

src/components/tooltip/style.scss

@@ -1,23 +1,27 @@
 @import 'mo/style/common';
 
 #{$rcTooltip} {
+    background-color: var(--menu-background);
     box-sizing: border-box;
-    color: var(--tooltip-color);
+    color: var(--menu-foreground);
+    font-size: 13px;
     margin: 0;
     opacity: 1;
     padding: 0;
 
     &-inner {
-        background-color: var(--tooltip-background);
+        background-color: inherit;
         border-radius: 2px;
-        box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
+        box-shadow: 0 2px 8px var(--widget-shadow);
         box-sizing: border-box;
+        color: inherit;
+        min-height: auto;
         min-width: 30px;
         padding: 6px 8px;
     }
 }
 
 #{$rcTooltip}-placement-bottom #{$rcTooltip}-arrow {
-    border-bottom-color: var(--tooltip-background);
+    border-bottom-color: var(--menu-background);
     top: -5px;
 }

src/extensions/theme-defaults/themes/dark_defaults.json

@@ -51,9 +51,7 @@
         "tab.activeForeground": "#fff",
         "diffEditor.insertedTextBackground": "#9bb95533",
         "diffEditor.removedTextBackground": "#ff000033",
-        "actionBar.checkedBackground": "rgba(0, 127, 212, 0.4)",
-        "tooltip.color": "#333",
-        "tooltip.background": "rgba(0, 0, 0, 0.75)"
+        "actionBar.checkedBackground": "rgba(0, 127, 212, 0.4)"
     },
     "semanticHighlighting": true
 }

src/extensions/theme-defaults/themes/light_defaults.json

@@ -49,9 +49,7 @@
         "tab.inactiveBackground": "rgb(236, 236, 236)",
         "tab.inactiveForeground": "rgba(51, 51, 51, 0.7)",
         "tab.activeBackground": "#fffffe",
-        "tab.activeForeground": "#333333",
-        "tooltip.color": "#333",
-        "tooltip.background": "rgba(0, 0, 0, 0.75)"
+        "tab.activeForeground": "#333333"
     },
     "semanticHighlighting": true
 }

src/workbench/workbench.tsx

@@ -4,7 +4,7 @@ import SplitPane from 'react-split-pane';
 import Pane from 'react-split-pane/lib/Pane';
 import { container } from 'tsyringe';
 
-import { classNames, prefixClaName } from 'mo/common/className';
+import { classNames, getFontInMac, prefixClaName } from 'mo/common/className';
 
 import { EditorView } from 'mo/workbench/editor';
 import { SidebarView } from 'mo/workbench/sidebar';
@@ -13,7 +13,6 @@ import { ActivityBarView } from 'mo/workbench/activityBar';
 import { StatusBarView } from 'mo/workbench/statusBar';
 import { PanelView } from 'mo/workbench/panel';
 import { ID_APP } from 'mo/common/id';
-import { Utils } from '@dtinsight/dt-utils';
 import { APP_PREFIX } from 'mo/common/const';
 
 import { connect } from 'mo/react';
@@ -27,7 +26,7 @@ import { IWorkbench } from 'mo/model';
 const mainBenchClassName = prefixClaName('mainBench');
 const workbenchClassName = prefixClaName('workbench');
 const compositeBarClassName = prefixClaName('compositeBar');
-const appClassName = classNames(APP_PREFIX, Utils.isMacOs() ? 'mac' : '');
+const appClassName = classNames(APP_PREFIX, getFontInMac());
 
 const layoutController = container.resolve(LayoutController);
 const layoutService = container.resolve(LayoutService);