Iterate io.element.late_event decoration (#11760)

* Update copy

Signed-off-by: Michael Telatynski <[email protected]>

* Add icon to late event timestamp

Signed-off-by: Michael Telatynski <[email protected]>

* Update snapshot

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

res/css/views/messages/_MessageTimestamp.pcss

@@ -29,3 +29,11 @@ limitations under the License.
     white-space: nowrap;
     user-select: none;
 }
+
+.mx_MessageTimestamp_lateIcon {
+    position: absolute;
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    color: inherit;
+}

res/img/sensor.svg

@@ -15,11 +15,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { ReactNode } from "react";
 import { Tooltip } from "@vector-im/compound-web";
 
 import { formatFullDate, formatTime, formatFullTime, formatRelativeTime } from "../../../DateUtils";
 import { _t } from "../../../languageHandler";
+import { Icon as LateIcon } from "../../../../res/img/sensor.svg";
 
 interface IProps {
     ts: number;
@@ -49,17 +50,20 @@ export default class MessageTimestamp extends React.Component<IProps> {
 
         let label = formatFullDate(date, this.props.showTwelveHour);
         let caption: string | undefined;
+        let icon: ReactNode | undefined;
         if (this.props.receivedTs !== undefined) {
             label = _t("timeline|message_timestamp_sent_at", { dateTime: label });
             const receivedDate = new Date(this.props.receivedTs);
             caption = _t("timeline|message_timestamp_received_at", {
                 dateTime: formatFullDate(receivedDate, this.props.showTwelveHour),
             });
+            icon = <LateIcon className="mx_MessageTimestamp_lateIcon" width="16" height="16" />;
         }
 
         return (
             <Tooltip label={label} caption={caption}>
                 <span className="mx_MessageTimestamp" aria-hidden={true} aria-live="off">
+                    {icon}
                     {timestamp}
                 </span>
             </Tooltip>

src/components/views/messages/MessageTimestamp.tsx

@@ -3418,7 +3418,7 @@
             "label": "Message Actions",
             "view_in_room": "View in room"
         },
-        "message_timestamp_received_at": "Recovered at: %(dateTime)s",
+        "message_timestamp_received_at": "Received at: %(dateTime)s",
         "message_timestamp_sent_at": "Sent at: %(dateTime)s",
         "mjolnir": {
             "changed_rule_glob": "%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",

src/i18n/strings/en_EN.json

@@ -57,7 +57,7 @@ describe("MessageTimestamp", () => {
         );
         await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!);
         expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(
-            `"Sent at: Fri, Dec 17, 2021, 08:09:00Recovered at: Sat, Dec 18, 2021, 08:09:00"`,
+            `"Sent at: Fri, Dec 17, 2021, 08:09:00Received at: Sat, Dec 18, 2021, 08:09:00"`,
         );
     });
 });