Update style of default tooltips to match the new style

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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;
 }

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;
-        }
-    }
 }

src/components/views/messages/ReactionsRowButtonTooltip.js

@@ -73,11 +73,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent {
 
         let tooltip;
         if (tooltipLabel) {
-            tooltip = <Tooltip
+            tooltip = <Tooltip visible={visible} label={tooltipLabel} />;
-                tooltipClassName="mx_Tooltip_timeline"
-                visible={visible}
-                label={tooltipLabel}
-            />;
         }
 
         return tooltip;

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>

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}

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()}`}
         />;
     }