From 57fae019917bd309ef65e4599d061bd0409fb5b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Nov 2021 10:41:33 +0100
Subject: [PATCH] Improve the look of tooltips (#7049)

---
 res/css/views/elements/_Tooltip.scss                      | 3 +--
 src/components/views/elements/AccessibleTooltipButton.tsx | 8 +++-----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss
index 6c5a7da55a..7e6b36a2ba 100644
--- a/res/css/views/elements/_Tooltip.scss
+++ b/res/css/views/elements/_Tooltip.scss
@@ -52,7 +52,6 @@ limitations under the License.
     display: none;
     position: fixed;
     border-radius: 8px;
-    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
     z-index: 6000; // Higher than context menu so tooltips can be used everywhere
     padding: 10px;
     pointer-events: none;
@@ -63,7 +62,7 @@ limitations under the License.
     word-break: break-word;
     margin-right: 50px;
 
-    background-color: $inverted-bg-color;
+    background-color: #21262C; // Same on both themes
     color: $accent-fg-color;
     border: 0;
     text-align: center;
diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx
index d2a4801a2d..e239028ab8 100644
--- a/src/components/views/elements/AccessibleTooltipButton.tsx
+++ b/src/components/views/elements/AccessibleTooltipButton.tsx
@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
 import Tooltip, { Alignment } from './Tooltip';
@@ -70,13 +69,12 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { title, tooltip, children, tooltipClassName, forceHide, yOffset, alignment, ...props } = this.props;
 
-        const tip = this.state.hover ? <Tooltip
-            className="mx_AccessibleTooltipButton_container"
-            tooltipClassName={classNames("mx_AccessibleTooltipButton_tooltip", tooltipClassName)}
+        const tip = this.state.hover && <Tooltip
+            tooltipClassName={tooltipClassName}
             label={tooltip || title}
             yOffset={yOffset}
             alignment={alignment}
-        /> : null;
+        />;
         return (
             <AccessibleButton
                 {...props}