From 059988ff5c1968fd0780f0d000c671d13f285910 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Fri, 17 May 2019 12:09:47 +0100 Subject: [PATCH] Extract tooltip styling to a shared class We want to use the same styling with edited tooltip as well, so this extracts the shared bits. --- res/css/_common.scss | 1 - res/css/views/elements/_Tooltip.scss | 13 +++++++++++++ .../views/messages/_ReactionsRowButtonTooltip.scss | 10 ---------- res/themes/dark/css/_dark.scss | 5 +++-- res/themes/light/css/_light.scss | 5 +++-- .../views/messages/ReactionsRowButtonTooltip.js | 2 +- 6 files changed, 20 insertions(+), 16 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index d3cf1921e0..d46f38bddb 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -557,4 +557,3 @@ textarea { .mx_Username_color8 { color: $username-variant8-color; } - diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss index 43ddf6dde5..66e8b5943f 100644 --- a/res/css/views/elements/_Tooltip.scss +++ b/res/css/views/elements/_Tooltip.scss @@ -74,3 +74,16 @@ limitations under the License. animation: mx_fadeout 0.1s forwards; } } + +.mx_Tooltip_timeline { + box-shadow: none; + background-color: $tooltip-timeline-bg-color; + color: $tooltip-timeline-fg-color; + text-align: center; + border: none; + border-radius: 3px; + + .mx_Tooltip_chevron::after { + border-right-color: $tooltip-timeline-bg-color; + } +} diff --git a/res/css/views/messages/_ReactionsRowButtonTooltip.scss b/res/css/views/messages/_ReactionsRowButtonTooltip.scss index 086271e556..95e339144f 100644 --- a/res/css/views/messages/_ReactionsRowButtonTooltip.scss +++ b/res/css/views/messages/_ReactionsRowButtonTooltip.scss @@ -15,18 +15,8 @@ limitations under the License. */ .mx_ReactionsRowButtonTooltip { - box-shadow: none; - background-color: $reaction-row-button-tooltip-bg-color; - color: $reaction-row-button-tooltip-fg-color; - text-align: center; font-size: 8px; padding: 6px; - border: none; - border-radius: 3px; - - .mx_Tooltip_chevron::after { - border-right-color: $reaction-row-button-tooltip-bg-color; - } .mx_ReactionsRowButtonTooltip_reactedWith { opacity: 0.7; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 251f038f75..bdccf71540 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -156,8 +156,9 @@ $reaction-row-button-border-color: #616b7f; $reaction-row-button-hover-border-color: $header-panel-text-primary-color; $reaction-row-button-selected-bg-color: #1f6954; $reaction-row-button-selected-border-color: $accent-color; -$reaction-row-button-tooltip-bg-color: $tagpanel-bg-color; -$reaction-row-button-tooltip-fg-color: #ffffff; + +$tooltip-timeline-bg-color: $tagpanel-bg-color; +$tooltip-timeline-fg-color: #ffffff; // ***** Mixins! ***** diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 375b4a44b3..d11dfebda3 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -264,8 +264,9 @@ $reaction-row-button-border-color: #e9edf1; $reaction-row-button-hover-border-color: $focus-bg-color; $reaction-row-button-selected-bg-color: #e9fff9; $reaction-row-button-selected-border-color: $accent-color; -$reaction-row-button-tooltip-bg-color: $tagpanel-bg-color; -$reaction-row-button-tooltip-fg-color: #ffffff; + +$tooltip-timeline-bg-color: $tagpanel-bg-color; +$tooltip-timeline-fg-color: #ffffff; // ***** Mixins! ***** diff --git a/src/components/views/messages/ReactionsRowButtonTooltip.js b/src/components/views/messages/ReactionsRowButtonTooltip.js index fc4aed0410..709c20c113 100644 --- a/src/components/views/messages/ReactionsRowButtonTooltip.js +++ b/src/components/views/messages/ReactionsRowButtonTooltip.js @@ -69,7 +69,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent { let tooltip; if (tooltipLabel) { tooltip = ;