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
2026-05-22 16:00:38 +00:00
parent 375fc140a6
commit 7285293b7b
32 changed files with 77 additions and 105 deletions
@@ -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";
@@ -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;
-    }
-}
@@ -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;
-        }
-    }
-}
@@ -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;
-    }
 }