From 3bd247ebaa02acf973f992cb6c01b221cd03c90f Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Fri, 21 Jun 2019 11:41:19 +0100
Subject: [PATCH] Tweak interactive tooltip to match design

This tweaks the tooltip to match the color, spacing, etc. seen in the designs.

Part of https://github.com/vector-im/riot-web/issues/9753
Part of https://github.com/vector-im/riot-web/issues/9716
---
 .../views/elements/_InteractiveTooltip.scss   | 43 +++++--------------
 res/themes/dark/css/_dark.scss                |  3 ++
 res/themes/light/css/_light.scss              |  3 ++
 3 files changed, 16 insertions(+), 33 deletions(-)

diff --git a/res/css/views/elements/_InteractiveTooltip.scss b/res/css/views/elements/_InteractiveTooltip.scss
index 3ec20be928..a949941dd8 100644
--- a/res/css/views/elements/_InteractiveTooltip.scss
+++ b/res/css/views/elements/_InteractiveTooltip.scss
@@ -30,17 +30,18 @@ limitations under the License.
 }
 
 .mx_InteractiveTooltip {
-    border-radius: 4px;
-    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
-    background-color: $menu-bg-color;
-    color: $primary-fg-color;
+    border-radius: 3px;
+    background-color: $interactive-tooltip-bg-color;
+    color: $interactive-tooltip-fg-color;
     position: absolute;
-    font-size: 14px;
+    font-size: 10px;
+    font-weight: 600;
+    padding: 6px;
     z-index: 5001;
 }
 
 .mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
-    top: 8px;
+    top: 10px; // 8px chevron + 2px spacing
 }
 
 .mx_InteractiveTooltip_chevron_top {
@@ -50,24 +51,12 @@ limitations under the License.
     width: 0;
     height: 0;
     border-left: 8px solid transparent;
-    border-bottom: 8px solid $menu-bg-color;
+    border-bottom: 8px solid $interactive-tooltip-bg-color;
     border-right: 8px solid transparent;
 }
 
-.mx_InteractiveTooltip_chevron_top::after {
-    content: '';
-    width: 0;
-    height: 0;
-    border-left: 7px solid transparent;
-    border-bottom: 7px solid $menu-bg-color;
-    border-right: 7px solid transparent;
-    position: absolute;
-    left: -7px;
-    top: 1px;
-}
-
 .mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
-    bottom: 8px;
+    bottom: 10px; // 8px chevron + 2px spacing
 }
 
 .mx_InteractiveTooltip_chevron_bottom {
@@ -77,18 +66,6 @@ limitations under the License.
     width: 0;
     height: 0;
     border-left: 8px solid transparent;
-    border-top: 8px solid $menu-bg-color;
+    border-top: 8px solid $interactive-tooltip-bg-color;
     border-right: 8px solid transparent;
 }
-
-.mx_InteractiveTooltip_chevron_bottom::after {
-    content: '';
-    width: 0;
-    height: 0;
-    border-left: 7px solid transparent;
-    border-top: 7px solid $menu-bg-color;
-    border-right: 7px solid transparent;
-    position: absolute;
-    left: -7px;
-    bottom: 1px;
-}
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index bdccf71540..ed1cc162a0 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -160,6 +160,9 @@ $reaction-row-button-selected-border-color: $accent-color;
 $tooltip-timeline-bg-color: $tagpanel-bg-color;
 $tooltip-timeline-fg-color: #ffffff;
 
+$interactive-tooltip-bg-color: $base-color;
+$interactive-tooltip-fg-color: #ffffff;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 8244485ee3..361f6fa408 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -272,6 +272,9 @@ $reaction-row-button-selected-border-color: $accent-color;
 $tooltip-timeline-bg-color: $tagpanel-bg-color;
 $tooltip-timeline-fg-color: #ffffff;
 
+$interactive-tooltip-bg-color: #27303a;
+$interactive-tooltip-fg-color: #ffffff;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {