Make shared-components tiles render identically outside Element Web - #4 (#33622)

* Use shared MessageTimestampView in edit history

* Move timestamp typography into shared component

* Updated snapshots

* Update comments after clean up

* Fixed sonar issue and added tests for improved coverage

* Fix Prettier issue

* Fix font-size on timestamps and toolbar button sizing

* Updated snapshots

* Updated Storybook screenshots

* Updated screenshots

* Clean up app/web unused/redundant styling for disambiguated profile

* Fix merge error

* Fixes after merge

* Fixes after merge

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

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

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;

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;

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;