From 9ec2ca447ccbc0825b1ec8c2a37b101767cbc0d5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 17 Jul 2020 16:19:10 +0100
Subject: [PATCH] Update style of default tooltips to match the new style
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
res/css/views/elements/_Tooltip.scss | 25 +++++++------------
res/css/views/rooms/_RoomBreadcrumbs2.scss | 10 --------
.../messages/ReactionsRowButtonTooltip.js | 6 +----
src/components/views/messages/TextualBody.js | 1 -
.../views/rooms/RoomBreadcrumbs2.tsx | 2 +-
src/components/views/rooms/RoomTileIcon.tsx | 1 -
6 files changed, 11 insertions(+), 34 deletions(-)
diff --git a/res/css/views/elements/_Tooltip.scss b/res/css/views/elements/_Tooltip.scss
index a3a90e2a4f..45202ff5f9 100644
--- a/res/css/views/elements/_Tooltip.scss
+++ b/res/css/views/elements/_Tooltip.scss
@@ -51,21 +51,27 @@ limitations under the License.
.mx_Tooltip {
display: none;
position: fixed;
- border: 1px solid $menu-border-color;
border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
- background-color: $menu-bg-color;
z-index: 6000; // Higher than context menu so tooltips can be used everywhere
padding: 10px;
pointer-events: none;
line-height: $font-14px;
font-size: $font-12px;
font-weight: 500;
- color: $primary-fg-color;
max-width: 200px;
word-break: break-word;
margin-right: 50px;
+ background-color: $inverted-bg-color;
+ color: $accent-fg-color;
+ border: 0;
+ text-align: center;
+
+ .mx_Tooltip_chevron {
+ display: none;
+ }
+
&.mx_Tooltip_visible {
animation: mx_fadein 0.2s forwards;
}
@@ -75,19 +81,6 @@ limitations under the License.
}
}
-.mx_Tooltip_timeline {
- &.mx_Tooltip {
- background-color: $inverted-bg-color;
- color: $accent-fg-color;
- border: 0;
- text-align: center;
-
- .mx_Tooltip_chevron {
- display: none;
- }
- }
-}
-
.mx_Tooltip_title {
font-weight: 600;
}
diff --git a/res/css/views/rooms/_RoomBreadcrumbs2.scss b/res/css/views/rooms/_RoomBreadcrumbs2.scss
index fd050cfd7c..b4a957cd8d 100644
--- a/res/css/views/rooms/_RoomBreadcrumbs2.scss
+++ b/res/css/views/rooms/_RoomBreadcrumbs2.scss
@@ -55,14 +55,4 @@ limitations under the License.
.mx_RoomBreadcrumbs2_Tooltip {
margin-left: -42px;
margin-top: -42px;
-
- &.mx_Tooltip {
- background-color: $inverted-bg-color;
- color: $accent-fg-color;
- border: 0;
-
- .mx_Tooltip_chevron {
- display: none;
- }
- }
}
diff --git a/src/components/views/messages/ReactionsRowButtonTooltip.js b/src/components/views/messages/ReactionsRowButtonTooltip.js
index 3a87befdae..2b90175722 100644
--- a/src/components/views/messages/ReactionsRowButtonTooltip.js
+++ b/src/components/views/messages/ReactionsRowButtonTooltip.js
@@ -73,11 +73,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent {
let tooltip;
if (tooltipLabel) {
- tooltip = <Tooltip
- tooltipClassName="mx_Tooltip_timeline"
- visible={visible}
- label={tooltipLabel}
- />;
+ tooltip = <Tooltip visible={visible} label={tooltipLabel} />;
}
return tooltip;
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 5784e36a8b..87df1b8a87 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -391,7 +391,6 @@ export default createReactClass({
onClick={this._openHistoryDialog}
title={_t("Edited at %(date)s. Click to view edits.", {date: dateString})}
tooltip={tooltip}
- tooltipClassName="mx_Tooltip_timeline"
>
<span>{`(${_t("edited")})`}</span>
</AccessibleTooltipButton>
diff --git a/src/components/views/rooms/RoomBreadcrumbs2.tsx b/src/components/views/rooms/RoomBreadcrumbs2.tsx
index fde24524cd..71e9d9d6e1 100644
--- a/src/components/views/rooms/RoomBreadcrumbs2.tsx
+++ b/src/components/views/rooms/RoomBreadcrumbs2.tsx
@@ -93,7 +93,7 @@ export default class RoomBreadcrumbs2 extends React.PureComponent<IProps, IState
onClick={() => this.viewRoom(r, i)}
aria-label={_t("Room %(name)s", {name: r.name})}
title={r.name}
- tooltipClassName={"mx_RoomBreadcrumbs2_Tooltip"}
+ tooltipClassName="mx_RoomBreadcrumbs2_Tooltip"
>
<DecoratedRoomAvatar
room={r}
diff --git a/src/components/views/rooms/RoomTileIcon.tsx b/src/components/views/rooms/RoomTileIcon.tsx
index 234840d28d..94833ac818 100644
--- a/src/components/views/rooms/RoomTileIcon.tsx
+++ b/src/components/views/rooms/RoomTileIcon.tsx
@@ -162,7 +162,6 @@ export default class RoomTileIcon extends React.Component<IProps, IState> {
return <TextWithTooltip
tooltip={tooltipText(this.state.icon)}
- tooltipClass="mx_Tooltip_timeline"
class={`mx_RoomTileIcon mx_RoomTileIcon_${this.state.icon.toLowerCase()}`}
/>;
}