diff --git a/apps/web/res/css/_common.pcss b/apps/web/res/css/_common.pcss index 58bebb609b..63a9c98c7e 100644 --- a/apps/web/res/css/_common.pcss +++ b/apps/web/res/css/_common.pcss @@ -163,10 +163,10 @@ b { font-weight: bold; } -/* Keep the legacy link colour without overriding Compound anchors. */ -a:where(:not([data-kind])):hover, -a:where(:not([data-kind])):link, -a:where(:not([data-kind])):visited { +/* Keep the legacy link colour without overriding Compound anchors or shared timestamp styling. */ +a:where(:not([data-kind]):not(.mx_MessageTimestamp)):hover, +a:where(:not([data-kind]):not(.mx_MessageTimestamp)):link, +a:where(:not([data-kind]):not(.mx_MessageTimestamp)):visited { color: $accent-alt; } @@ -600,6 +600,8 @@ legend { .mx_InviteDialog_section button, .mx_InviteDialog_editor button, .mx_UnknownIdentityUsersWarningDialog button, + .mx_ThreadActionBar button, + .mx_HistoryActionBar button, [class|="maplibregl"] ), .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton), @@ -907,16 +909,8 @@ legend { overflow: hidden; } -/* This class is used extensively in element-web and are included here for compatibility with the existing timeline and layout. -/* TODO: Review mx_MessageTimestamp usage after finishing migration of timeline tiles to shared components. */ -/* https://github.com/element-hq/element-web/issues/31651 */ +/* Layout compatibility hook for timestamp placement in existing app/web timeline surfaces. */ .mx_MessageTimestamp { - color: var(--cpd-color-text-secondary) !important; /* override anchor color */ - font-size: $font-10px; - font-variant-numeric: tabular-nums; display: block; /* enable the width setting below */ width: var(--MessageTimestamp-width); - white-space: nowrap; - user-select: none; - text-decoration: none; } diff --git a/apps/web/res/css/structures/_FilePanel.pcss b/apps/web/res/css/structures/_FilePanel.pcss index 3261c26a1c..f9396bf048 100644 --- a/apps/web/res/css/structures/_FilePanel.pcss +++ b/apps/web/res/css/structures/_FilePanel.pcss @@ -67,8 +67,6 @@ Please see LICENSE files in the repository root for full details. .mx_MessageTimestamp { margin-left: auto; - font: var(--cpd-font-body-xs-regular); - color: var(--cpd-color-text-secondary); } } } diff --git a/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss b/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss index 4758bb5407..f2d63b7a1e 100644 --- a/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss +++ b/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss @@ -7,26 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ -.mx_DisambiguatedProfile { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - cursor: pointer; - - .mx_DisambiguatedProfile_displayName { - font: var(--cpd-font-body-md-semibold); - margin-inline-end: 0; - /* keeps the height in check, important for the bubble apperance */ - line-height: 1; - } - - .mx_DisambiguatedProfile_mxid { - color: $secondary-content; - font-size: var(--cpd-font-size-body-sm); - margin-inline-start: 5px; - } -} - /** Disambiguated profile needs to have a different layout in the member tile */ .mx_MemberTileView .mx_DisambiguatedProfile { display: flex; diff --git a/apps/web/res/css/views/right_panel/_ThreadPanel.pcss b/apps/web/res/css/views/right_panel/_ThreadPanel.pcss index 66536a7372..b1d1231980 100644 --- a/apps/web/res/css/views/right_panel/_ThreadPanel.pcss +++ b/apps/web/res/css/views/right_panel/_ThreadPanel.pcss @@ -138,10 +138,6 @@ Please see LICENSE files in the repository root for full details. box-sizing: border-box; } - .mx_MessageTimestamp { - color: $secondary-content; - } - .mx_BaseCard_footer { text-align: left; font-size: $font-12px; diff --git a/apps/web/res/css/views/rooms/_EventBubbleTile.pcss b/apps/web/res/css/views/rooms/_EventBubbleTile.pcss index 493cb9b4df..25a8cbcfdd 100644 --- a/apps/web/res/css/views/rooms/_EventBubbleTile.pcss +++ b/apps/web/res/css/views/rooms/_EventBubbleTile.pcss @@ -288,7 +288,7 @@ Please see LICENSE files in the repository root for full details. /* the selector here is quite weird because timestamps can appear linked & unlinked and in different places */ /* in the DOM depending on the specific rendering context */ - > a, /* timestamp wrapper anchor */ + > a, /* linked timestamp element */ .mx_MessageActionBar + .mx_MessageTimestamp { position: absolute; padding: 4px 8px; @@ -322,7 +322,7 @@ Please see LICENSE files in the repository root for full details. } &.mx_EventTile_sticker { - > a, /* timestamp wrapper anchor */ + > a, /* linked timestamp element */ .mx_MessageActionBar + .mx_MessageTimestamp { /* position timestamps for stickers to the right of the un-bubbled sticker */ right: unset; @@ -434,7 +434,7 @@ Please see LICENSE files in the repository root for full details. .mx_EventTile_reply { max-width: 90%; padding: 0; - > a, /* timestamp wrapper anchor */ + > a, /* linked timestamp element */ .mx_MessageActionBar + .mx_MessageTimestamp { display: none !important; } @@ -549,7 +549,7 @@ Please see LICENSE files in the repository root for full details. font-style: italic; > a { - /* timestamp anchor wrapper */ + /* linked timestamp element */ align-self: center; bottom: unset; top: unset; @@ -606,7 +606,7 @@ Please see LICENSE files in the repository root for full details. } .mx_EventTile_line { - > a, /* timestamp wrapper anchor */ + > a, /* linked timestamp element */ .mx_MessageActionBar + .mx_MessageTimestamp { right: auto; left: -77px; diff --git a/apps/web/src/components/views/messages/EditHistoryMessage.tsx b/apps/web/src/components/views/messages/EditHistoryMessage.tsx index ced10ce290..f12e7759a2 100644 --- a/apps/web/src/components/views/messages/EditHistoryMessage.tsx +++ b/apps/web/src/components/views/messages/EditHistoryMessage.tsx @@ -9,12 +9,12 @@ Please see LICENSE files in the repository root for full details. import React, { createRef } from "react"; import { type EventStatus, type IContent, type MatrixEvent, MatrixEventEvent, MsgType } from "matrix-js-sdk/src/matrix"; import classNames from "classnames"; -import { ActionBarView, EventContentBodyView } from "@element-hq/web-shared-components"; +import { ActionBarView, EventContentBodyView, MessageTimestampView } from "@element-hq/web-shared-components"; import { EditHistoryActionBarViewModel } from "../../../viewmodels/message-body/EditHistoryActionBarViewModel"; import { EventContentBodyViewModel } from "../../../viewmodels/message-body/EventContentBodyViewModel"; +import { MessageTimestampViewModel } from "../../../viewmodels/room/timeline/event-tile/timestamp/MessageTimestampViewModel"; import { editBodyDiffToHtml } from "../../../utils/MessageDiffUtils"; -import { formatTime } from "../../../DateUtils"; import Modal from "../../../Modal"; import ConfirmAndWaitRedactDialog from "../dialogs/ConfirmAndWaitRedactDialog"; import ViewSource from "../../structures/ViewSource"; @@ -45,8 +45,9 @@ export default class EditHistoryMessage extends React.PureComponent; private content = createRef(); - private EventContentBodyViewModel: EventContentBodyViewModel; - private editHistoryActionBarViewModel: EditHistoryActionBarViewModel; + private readonly eventContentBodyViewModel: EventContentBodyViewModel; + private readonly editHistoryActionBarViewModel: EditHistoryActionBarViewModel; + private readonly messageTimestampViewModel: MessageTimestampViewModel; public constructor(props: IProps, context: React.ContextType) { super(props, context); @@ -60,7 +61,7 @@ export default class EditHistoryMessage extends React.PureComponent ); @@ -157,7 +165,7 @@ export default class EditHistoryMessage extends React.PureComponent; + contentElements = ; } if (mxEvent.getContent().msgtype === MsgType.Emote) { const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender(); @@ -177,7 +185,6 @@ export default class EditHistoryMessage extends React.PureComponent
- {timestamp} + {contentContainer} {this.renderActionBar()}
diff --git a/apps/web/test/unit-tests/components/views/dialogs/EditHistoryMessage-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/EditHistoryMessage-test.tsx new file mode 100644 index 0000000000..b430d977b5 --- /dev/null +++ b/apps/web/test/unit-tests/components/views/dialogs/EditHistoryMessage-test.tsx @@ -0,0 +1,273 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import React from "react"; +import { act, fireEvent, render, waitFor } from "jest-matrix-react"; +import { MatrixEventEvent, MsgType } from "matrix-js-sdk/src/matrix"; + +import { mkEvent, stubClient } from "../../../../test-utils"; +import Modal from "../../../../../src/Modal"; +import SettingsStore from "../../../../../src/settings/SettingsStore"; +import type { SettingKey } from "../../../../../src/settings/Settings"; +import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext"; +import EditHistoryMessage from "../../../../../src/components/views/messages/EditHistoryMessage"; +import ConfirmAndWaitRedactDialog from "../../../../../src/components/views/dialogs/ConfirmAndWaitRedactDialog"; +import ViewSource from "../../../../../src/components/structures/ViewSource"; +import { EventContentBodyViewModel } from "../../../../../src/viewmodels/message-body/EventContentBodyViewModel"; +import { EditHistoryActionBarViewModel } from "../../../../../src/viewmodels/message-body/EditHistoryActionBarViewModel"; +import { MessageTimestampViewModel } from "../../../../../src/viewmodels/room/timeline/event-tile/timestamp/MessageTimestampViewModel"; + +describe("EditHistoryMessage", () => { + const roomId = "!room:example.com"; + let client: ReturnType; + let developerMode = false; + + const renderComponent = (props: React.ComponentProps) => { + return render( + + + , + ); + }; + + beforeEach(() => { + client = stubClient(); + developerMode = false; + jest.spyOn(SettingsStore, "getValue").mockImplementation(((settingName: SettingKey) => { + switch (settingName) { + case "developerMode": + return developerMode; + case "showTwelveHourTimestamps": + case "TextualBody.enableBigEmoji": + return false; + case "Pill.shouldShowPillAvatar": + return true; + default: + return null; + } + }) as typeof SettingsStore.getValue); + jest.spyOn(Modal, "createDialog").mockReturnValue({} as any); + }); + + afterEach(() => { + jest.restoreAllMocks(); + }); + + it("renders replaced content, tracks send status, and disposes view models on unmount", async () => { + const event = mkEvent({ + event: true, + id: "$event", + room: roomId, + user: "@alice:example.com", + type: "m.room.message", + content: { + "msgtype": MsgType.Text, + "body": "Original body", + "m.new_content": { + msgtype: MsgType.Text, + body: "Edited body", + }, + }, + }); + const localRedactionEvent = { + on: jest.fn(), + off: jest.fn(), + }; + const getAssociatedStatus = jest.fn().mockReturnValue("sending"); + const eventContentDisposeSpy = jest.spyOn(EventContentBodyViewModel.prototype, "dispose"); + const actionBarDisposeSpy = jest.spyOn(EditHistoryActionBarViewModel.prototype, "dispose"); + const timestampDisposeSpy = jest.spyOn(MessageTimestampViewModel.prototype, "dispose"); + + (event as any).localRedactionEvent = jest.fn().mockReturnValue(localRedactionEvent); + (event as any).getAssociatedStatus = getAssociatedStatus; + + const { container, getByRole, getByText, unmount } = renderComponent({ mxEvent: event }); + + expect(getByText("Edited body")).toBeInTheDocument(); + expect(container.querySelector(".mx_EventTile_sending")).not.toBeNull(); + expect(getByRole("button", { name: /remove/i })).toBeInTheDocument(); + expect(localRedactionEvent.on).toHaveBeenCalledWith(MatrixEventEvent.Status, expect.any(Function)); + + getAssociatedStatus.mockReturnValue(null); + const onStatusChanged = localRedactionEvent.on.mock.calls[0][1]; + act(() => { + onStatusChanged(); + }); + + await waitFor(() => expect(container.querySelector(".mx_EventTile_sending")).toBeNull()); + + unmount(); + + expect(localRedactionEvent.off).toHaveBeenCalledWith(MatrixEventEvent.Status, expect.any(Function)); + expect(eventContentDisposeSpy).toHaveBeenCalled(); + expect(actionBarDisposeSpy).toHaveBeenCalled(); + expect(timestampDisposeSpy).toHaveBeenCalled(); + }); + + it("renders diffs for previous edits and formats emotes with the sender name", () => { + const previousEdit = mkEvent({ + event: true, + id: "$prev", + room: roomId, + user: "@alice:example.com", + type: "m.room.message", + content: { + msgtype: MsgType.Emote, + body: "smiles", + }, + }); + const event = mkEvent({ + event: true, + id: "$event", + room: roomId, + user: "@alice:example.com", + type: "m.room.message", + content: { + msgtype: MsgType.Emote, + body: "waves", + }, + }); + if (event.sender) { + event.sender.name = "Alice"; + } + + const { container, getByText } = renderComponent({ mxEvent: event, previousEdit }); + + expect(getByText("Alice")).toHaveClass("mx_EditHistoryMessage_emoteSender"); + expect(container.querySelector(".mx_EditHistoryMessage_deletion")).not.toBeNull(); + expect(container.querySelector(".mx_EditHistoryMessage_insertion")).not.toBeNull(); + expect(container.querySelector(".mx_EditHistoryMessage_deletion")).not.toBeEmptyDOMElement(); + expect(container.querySelector(".mx_EditHistoryMessage_insertion")).not.toBeEmptyDOMElement(); + }); + + it("renders redacted events and opens view source from the action bar", () => { + developerMode = true; + const event = mkEvent({ + event: true, + id: "$event", + room: roomId, + user: "@alice:example.com", + type: "m.room.message", + content: { + msgtype: MsgType.Text, + body: "Removed", + }, + unsigned: { + redacted_because: { + event_id: "$redaction", + sender: "@moderator:example.com", + type: "m.room.redaction", + origin_server_ts: Date.UTC(2024, 0, 1, 12, 0, 0), + content: {}, + unsigned: {}, + }, + }, + }); + jest.spyOn(event, "isRedacted").mockReturnValue(true); + + const { container, getByRole, queryByRole } = renderComponent({ mxEvent: event, isBaseEvent: true }); + + expect(container.querySelector(".mx_RedactedBody")).not.toBeNull(); + expect(queryByRole("button", { name: /remove/i })).toBeNull(); + + fireEvent.click(getByRole("button", { name: /view source/i })); + + expect(Modal.createDialog).toHaveBeenCalledWith( + ViewSource, + { + mxEvent: event, + ignoreEdits: true, + }, + "mx_Dialog_viewsource", + ); + }); + + it("opens the redact dialog and uses the client redact callback", async () => { + const event = mkEvent({ + event: true, + id: "$event", + room: roomId, + user: "@alice:example.com", + type: "m.room.message", + content: { + msgtype: MsgType.Text, + body: "Editable", + }, + }); + + const { getByRole } = renderComponent({ mxEvent: event }); + + fireEvent.click(getByRole("button", { name: /remove/i })); + + expect(Modal.createDialog).toHaveBeenCalledWith( + ConfirmAndWaitRedactDialog, + expect.objectContaining({ + event, + redact: expect.any(Function), + }), + "mx_Dialog_confirmredact", + ); + + const [, dialogProps] = (Modal.createDialog as jest.Mock).mock.calls[0]; + await dialogProps.redact(); + + expect(client.redactEvent).toHaveBeenCalledWith(roomId, "$event"); + }); + + it("updates content and timestamp view models when props change", () => { + developerMode = true; + const firstEventTs = Date.parse("2021-12-17T08:09:00.000Z"); + const secondEventTs = Date.parse("2021-12-17T09:09:00.000Z"); + const firstEvent = mkEvent({ + event: true, + id: "$first", + room: roomId, + user: "@alice:example.com", + type: "m.room.message", + ts: firstEventTs, + content: { + msgtype: MsgType.Text, + body: "First", + }, + }); + const secondEvent = mkEvent({ + event: true, + id: "$second", + room: roomId, + user: "@alice:example.com", + type: "m.room.message", + ts: secondEventTs, + content: { + "msgtype": MsgType.Text, + "body": "Second", + "m.new_content": { + msgtype: MsgType.Text, + body: "Second edited", + }, + }, + }); + + const { getByRole, getByText, queryByRole, rerender } = renderComponent({ + mxEvent: firstEvent, + isTwelveHour: false, + }); + + expect(getByRole("button", { name: /remove/i })).toBeInTheDocument(); + expect(getByText("08:09")).toBeInTheDocument(); + + rerender( + + + , + ); + + expect(getByText("Second edited")).toBeInTheDocument(); + expect(getByText("9:09 AM")).toBeInTheDocument(); + expect(queryByRole("button", { name: /remove/i })).toBeNull(); + expect(getByRole("button", { name: /view source/i })).toBeInTheDocument(); + }); +}); diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap index bf12e387fd..6347665fe9 100644 --- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap +++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap @@ -72,7 +72,8 @@ exports[` should match the snapshot 1`] = ` class="mx_EventTile_line" > 00:00 @@ -212,7 +213,8 @@ exports[` should support events with 1`] = ` class="mx_EventTile_line" > 00:00 @@ -263,7 +265,8 @@ exports[` should support events with 1`] = ` class="mx_EventTile_line" > 00:00 @@ -325,7 +328,8 @@ exports[` should support events with 1`] = ` class="mx_EventTile_line" > 00:00 diff --git a/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap index b27b49473f..bf5258b68a 100644 --- a/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap +++ b/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap @@ -57,7 +57,7 @@ exports[`HTMLExport should export 1`] = `

-
  • @user49:example.com
    00:00
    Message #49
  • @user48:example.com
    00:00
    Message #48
  • @user47:example.com
    00:00
    Message #47
  • @user46:example.com
    00:00
    Message #46
  • @user45:example.com
    00:00
    Message #45
  • @user44:example.com
    00:00
    Message #44
  • @user43:example.com
    00:00
    Message #43
  • @user42:example.com
    00:00
    Message #42
  • @user41:example.com
    00:00
    Message #41
  • @user40:example.com
    00:00
    Message #40
  • @user39:example.com
    00:00
    Message #39
  • @user38:example.com
    00:00
    Message #38
  • @user37:example.com
    00:00
    Message #37
  • @user36:example.com
    00:00
    Message #36
  • @user35:example.com
    00:00
    Message #35
  • @user34:example.com
    00:00
    Message #34
  • @user33:example.com
    00:00
    Message #33
  • @user32:example.com
    00:00
    Message #32
  • @user31:example.com
    00:00
    Message #31
  • @user30:example.com
    00:00
    Message #30
  • @user29:example.com
    00:00
    Message #29
  • @user28:example.com
    00:00
    Message #28
  • @user27:example.com
    00:00
    Message #27
  • @user26:example.com
    00:00
    Message #26
  • @user25:example.com
    00:00
    Message #25
  • @user24:example.com
    00:00
    Message #24
  • @user23:example.com
    00:00
    Message #23
  • @user22:example.com
    00:00
    Message #22
  • @user21:example.com
    00:00
    Message #21
  • @user20:example.com
    00:00
    Message #20
  • @user19:example.com
    00:00
    Message #19
  • @user18:example.com
    00:00
    Message #18
  • @user17:example.com
    00:00
    Message #17
  • @user16:example.com
    00:00
    Message #16
  • @user15:example.com
    00:00
    Message #15
  • @user14:example.com
    00:00
    Message #14
  • @user13:example.com
    00:00
    Message #13
  • @user12:example.com
    00:00
    Message #12
  • @user11:example.com
    00:00
    Message #11
  • @user10:example.com
    00:00
    Message #10
  • @user9:example.com
    00:00
    Message #9
  • @user8:example.com
    00:00
    Message #8
  • @user7:example.com
    00:00
    Message #7
  • @user6:example.com
    00:00
    Message #6
  • @user5:example.com
    00:00
    Message #5
  • @user4:example.com
    00:00
    Message #4
  • @user3:example.com
    00:00
    Message #3
  • @user2:example.com
    00:00
    Message #2
  • @user1:example.com
    00:00
    Message #1
  • @user0:example.com
    00:00
    Message #0
    • +
  • @user49:example.com
    00:00
    Message #49
  • @user48:example.com
    00:00
    Message #48
  • @user47:example.com
    00:00
    Message #47
  • @user46:example.com
    00:00
    Message #46
  • @user45:example.com
    00:00
    Message #45
  • @user44:example.com
    00:00
    Message #44
  • @user43:example.com
    00:00
    Message #43
  • @user42:example.com
    00:00
    Message #42
  • @user41:example.com
    00:00
    Message #41
  • @user40:example.com
    00:00
    Message #40
  • @user39:example.com
    00:00
    Message #39
  • @user38:example.com
    00:00
    Message #38
  • @user37:example.com
    00:00
    Message #37
  • @user36:example.com
    00:00
    Message #36
  • @user35:example.com
    00:00
    Message #35
  • @user34:example.com
    00:00
    Message #34
  • @user33:example.com
    00:00
    Message #33
  • @user32:example.com
    00:00
    Message #32
  • @user31:example.com
    00:00
    Message #31
  • @user30:example.com
    00:00
    Message #30
  • @user29:example.com
    00:00
    Message #29
  • @user28:example.com
    00:00
    Message #28
  • @user27:example.com
    00:00
    Message #27
  • @user26:example.com
    00:00
    Message #26
  • @user25:example.com
    00:00
    Message #25
  • @user24:example.com
    00:00
    Message #24
  • @user23:example.com
    00:00
    Message #23
  • @user22:example.com
    00:00
    Message #22
  • @user21:example.com
    00:00
    Message #21
  • @user20:example.com
    00:00
    Message #20
  • @user19:example.com
    00:00
    Message #19
  • @user18:example.com
    00:00
    Message #18
  • @user17:example.com
    00:00
    Message #17
  • @user16:example.com
    00:00
    Message #16
  • @user15:example.com
    00:00
    Message #15
  • @user14:example.com
    00:00
    Message #14
  • @user13:example.com
    00:00
    Message #13
  • @user12:example.com
    00:00
    Message #12
  • @user11:example.com
    00:00
    Message #11
  • @user10:example.com
    00:00
    Message #10
  • @user9:example.com
    00:00
    Message #9
  • @user8:example.com
    00:00
    Message #8
  • @user7:example.com
    00:00
    Message #7
  • @user6:example.com
    00:00
    Message #6
  • @user5:example.com
    00:00
    Message #5
  • @user4:example.com
    00:00
    Message #4
  • @user3:example.com
    00:00
    Message #3
  • @user2:example.com
    00:00
    Message #2
  • @user1:example.com
    00:00
    Message #1
  • @user0:example.com
    00:00
    Message #0
    • diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/default-auto.png index 9874621547..56a96f7fac 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-actions-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-actions-auto.png index 9b784175af..b9fe307d09 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-actions-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-actions-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-href-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-href-auto.png index 9b784175af..b9fe307d09 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-href-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-href-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-inhibit-tooltip-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-inhibit-tooltip-auto.png index 9b784175af..b9fe307d09 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-inhibit-tooltip-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-inhibit-tooltip-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-ts-received-at-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-ts-received-at-auto.png index a08fe65499..0a31698ebb 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-ts-received-at-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-ts-received-at-auto.png differ diff --git a/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.module.css b/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.module.css index e00b9f0678..284695c861 100644 --- a/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.module.css +++ b/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.module.css @@ -7,7 +7,7 @@ .content { color: var(--cpd-color-text-secondary); /* override anchor color */ - font-size: var(--cpd-font-size-body-xs); + font-size: 0.625rem; /* There is no Compound equivalent to $font-10px */ font-variant-numeric: tabular-nums; display: inline-block; white-space: nowrap; diff --git a/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.tsx b/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.tsx index 0d978ca3d8..228ac28b6c 100644 --- a/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.tsx +++ b/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.tsx @@ -53,7 +53,7 @@ export interface MessageTimestampViewActions { * The view model for the message timestamp. * * Snapshot data describes timestamp content and rendering behavior, while - * container styling is supplied via component props. + * host layout and placement styling is supplied via component props. */ export type MessageTimestampViewModel = ViewModel & MessageTimestampViewActions; @@ -74,11 +74,11 @@ interface MessageTimestampViewProps { * The view model provides the timestamp values and display options. The component * can render as a link when `href` is set, and can show both sent-at and received-at * times in the tooltip when `tsReceivedAt` is provided. Use `className` for - * host-level styling. + * host-level layout and placement styling. * * @example * ```tsx - * + * * ``` */ export function MessageTimestampView({ vm, className }: Readonly): JSX.Element {