Make shared-components tiles render identically outside Element Web - # 3 (#33529)

* Clean up unused app/web styling for ReactionsRow

* Align shared Storybook theme root with app/web

* Move PlayPauseButton styling into shared component

* Use closest compound icon color for all crypto events in both app/web and Storybook

* Updated snapshot

* Experimental strict color matching threshold for playwright

* Experimental color matching threshold for playwright

* Revert color matching threshold for playwright to the default value

* Updated screenshots after matching icon size in audio player with other media body components

* Changed icon color for crypto events accroding to recommendation from the design team

* Use --cpd-color-icon-primary for all crypto events

* Updated snapshots and screenshots after icon color changes

* Updated app/web snapshots and screenshots

apps/web/res/css/_components.pcss

@@ -93,7 +93,6 @@
 @import "./structures/auth/_Registration.pcss";
 @import "./structures/auth/_SessionLockStolenView.pcss";
 @import "./structures/auth/_SetupEncryptionBody.pcss";
-@import "./views/audio_messages/_PlayPauseButton.pcss";
 @import "./views/audio_messages/_PlaybackContainer.pcss";
 @import "./views/audio_messages/_SeekBar.pcss";
 @import "./views/audio_messages/_Waveform.pcss";
@@ -228,7 +227,6 @@
 @import "./views/messages/_MPollBody.pcss";
 @import "./views/messages/_MStickerBody.pcss";
 @import "./views/messages/_MessageActionBar.pcss";
-@import "./views/messages/_ReactionsRow.pcss";
 @import "./views/messages/_TextualEvent.pcss";
 @import "./views/messages/_ThreadActionBar.pcss";
 @import "./views/messages/_common_CryptoEvent.pcss";

apps/web/res/css/views/audio_messages/_PlayPauseButton.pcss

@@ -1,29 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-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.
-*/
-
-.mx_PlayPauseButton {
-    position: relative;
-    width: 32px;
-    height: 32px;
-    min-width: 32px; /* for when the button is used in a flexbox */
-    min-height: 32px; /* for when the button is used in a flexbox */
-    border-radius: 32px;
-    background-color: $system;
-    /* !important override compound icon button */
-    padding: var(--cpd-space-1-5x) !important;
-    box-sizing: border-box;
-
-    svg {
-        width: 20px;
-        height: 20px;
-    }
-
-    &[disabled] svg {
-        opacity: 0.5;
-    }
-}

apps/web/res/css/views/messages/_ReactionsRow.pcss

@@ -1,57 +0,0 @@
-/*
-Copyright 2019-2024 New Vector 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.
-*/
-
-.mx_ReactionsRow {
-    color: var(--cpd-color-text-primary);
-
-    .mx_ReactionsRow_addReactionButton {
-        display: inline-block;
-        visibility: hidden; /* show on hover of the .mx_EventTile */
-        width: 16px;
-        height: 16px;
-        padding: var(--cpd-space-1x);
-        vertical-align: middle;
-        margin-left: 4px;
-        margin-right: 4px;
-
-        svg {
-            height: inherit;
-            width: inherit;
-            color: $tertiary-content;
-        }
-
-        &.mx_ReactionsRow_addReactionButton_active {
-            visibility: visible; /* keep showing whilst the context menu is shown */
-        }
-
-        &:hover,
-        &.mx_ReactionsRow_addReactionButton_active {
-            svg {
-                color: $primary-content;
-            }
-        }
-    }
-}
-
-.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
-    visibility: visible;
-}
-
-.mx_ReactionsRow_showAll {
-    color: $tertiary-content;
-
-    &.mx_AccessibleButton_kind_link_inline {
-        font-size: $font-12px;
-        line-height: $font-20px;
-        margin-inline-start: $spacing-4;
-        vertical-align: middle;
-
-        &:hover {
-            color: $primary-content;
-        }
-    }
-}

apps/web/res/css/views/messages/_common_CryptoEvent.pcss

@@ -8,8 +8,4 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_EventTileBubble.mx_cryptoEvent {
     margin: var(--EventTileBubble_margin-block) auto;
-
-    svg[data-state="supported"] {
-        color: $header-panel-text-primary-color;
-    }
 }

apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -750,7 +750,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
               style="height: 400px;"
             >
               <div
-                class="_container_sq5fu_8 mx_EventTileBubble mx_cryptoEvent _content_m88ar_8"
+                class="_container_sq5fu_8 mx_EventTileBubble mx_cryptoEvent _content_ufv8a_8"
               >
                 <svg
                   data-state="supported"