Improve Tooltip font/layout consistency

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

res/css/_components.scss

@@ -146,7 +146,6 @@
 @import "./views/messages/_MjolnirBody.scss";
 @import "./views/messages/_ReactionsRow.scss";
 @import "./views/messages/_ReactionsRowButton.scss";
-@import "./views/messages/_ReactionsRowButtonTooltip.scss";
 @import "./views/messages/_RedactedBody.scss";
 @import "./views/messages/_RoomAvatarEvent.scss";
 @import "./views/messages/_SenderProfile.scss";

res/css/views/elements/_Tooltip.scss

@@ -52,7 +52,7 @@ limitations under the License.
     display: none;
     position: fixed;
     border: 1px solid $menu-border-color;
-    border-radius: 4px;
+    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
@@ -60,7 +60,7 @@ limitations under the License.
     pointer-events: none;
     line-height: $font-14px;
     font-size: $font-12px;
-    font-weight: 600;
+    font-weight: 500;
     color: $primary-fg-color;
     max-width: 200px;
     word-break: break-word;
@@ -87,3 +87,12 @@ limitations under the License.
         }
     }
 }
+
+.mx_Tooltip_title {
+    font-weight: 600;
+}
+
+.mx_Tooltip_sub {
+    opacity: 0.7;
+    margin-top: 4px;
+}

res/css/views/messages/_ReactionsRowButtonTooltip.scss

@@ -1,19 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_ReactionsRowButtonTooltip_reactedWith {
-    opacity: 0.7;
-}

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -24,6 +24,7 @@ import Tooltip from './Tooltip';
 
 interface ITooltipProps extends IProps {
     title: string;
+    tooltip?: React.ReactNode;
     tooltipClassName?: string;
 }
 
@@ -52,7 +53,7 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
     };
 
     render() {
-        const {title, children, ...props} = this.props;
+        const {title, tooltip, children, ...props} = this.props;
         const tooltipClassName = classnames(
             "mx_AccessibleTooltipButton_tooltip",
             this.props.tooltipClassName,
@@ -61,7 +62,7 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
         const tip = this.state.hover ? <Tooltip
             className="mx_AccessibleTooltipButton_container"
             tooltipClassName={tooltipClassName}
-            label={title}
+            label={tooltip || title}
         /> : <div />;
         return (
             <AccessibleButton {...props} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} aria-label={title}>

src/components/views/messages/ReactionsRowButtonTooltip.js

@@ -55,7 +55,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent {
                 },
                 {
                     reactors: () => {
-                        return <div className="mx_ReactionsRowButtonTooltip_senders">
+                        return <div className="mx_Tooltip_title">
                             {formatCommaSeparatedList(senders, 6)}
                         </div>;
                     },
@@ -63,7 +63,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent {
                         if (!shortName) {
                             return null;
                         }
-                        return <div className="mx_ReactionsRowButtonTooltip_reactedWith">
+                        return <div className="mx_Tooltip_sub">
                             {sub}
                         </div>;
                     },

src/components/views/messages/TextualBody.js

@@ -376,11 +376,21 @@ export default createReactClass({
         const date = this.props.mxEvent.replacingEventDate();
         const dateString = date && formatDate(date);
 
+        const tooltip = <div>
+            <div className="mx_Tooltip_title">
+                {_t("Edited at %(date)s", {date: dateString})}
+            </div>
+            <div className="mx_Tooltip_sub">
+                {_t("Click to view edits")}
+            </div>
+        </div>;
+
         return (
             <AccessibleTooltipButton
                 className="mx_EventTile_edited"
                 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>

src/i18n/strings/en_EN.json

@@ -1455,6 +1455,8 @@
     "Failed to copy": "Failed to copy",
     "Add an Integration": "Add an Integration",
     "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?": "You are about to be taken to a third-party site so you can authenticate your account for use with %(integrationsUrl)s. Do you wish to continue?",
+    "Edited at %(date)s": "Edited at %(date)s",
+    "Click to view edits": "Click to view edits",
     "Edited at %(date)s. Click to view edits.": "Edited at %(date)s. Click to view edits.",
     "edited": "edited",
     "Can't load this message": "Can't load this message",