Tweak interactive tooltip to match design

This tweaks the tooltip to match the color, spacing, etc. seen in the designs. Part of element-hq/element-web#9753 Part of element-hq/element-web#9716
matrix-org · Jun 21, 2019 · 3bd247e · 3bd247e
1 parent 32bf458
commit 3bd247e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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 {