Refactor className and children to component properties instead och view model snapshots in shared components (#32711)

* Refactor className? to component property in EncryptionEventView

* Refactor extraClassNames to default react className as component property for DecryptionFailureBodyView

* Refactor className to component property for MessageTimestampView

* Refactor className and children to component properties for ReactionsRowButton

* Refactor className to component property for DisambiguatedProfile

* Refactor className to a component property in DateSeparatorView

* Fix for lint errors and EncryptionEventView unsupported icon color

* EncryptionEventView fix for icon color css specificity/order

packages/shared-components/src/message-body/ReactionsRow/ReactionsRow.module.css

@@ -0,0 +1,70 @@
+/*
+ * 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.
+ */
+
+.reactionsRow {
+    color: var(--cpd-color-text-primary);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--cpd-space-1x);
+}
+
+.showAllButton {
+    all: unset;
+    color: var(--cpd-color-text-secondary);
+    font-size: var(--cpd-font-size-body-xs);
+    line-height: 20px;
+    cursor: pointer;
+}
+
+.showAllButton:hover,
+.showAllButton:focus-visible {
+    color: var(--cpd-color-text-primary);
+}
+
+.addReactionButton {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: var(--cpd-space-1x);
+    margin-inline: var(--cpd-space-1x);
+    border-radius: var(--cpd-space-1x);
+    color: var(--cpd-color-icon-secondary);
+    visibility: hidden;
+    cursor: pointer;
+}
+
+.reactionsRow:hover .addReactionButton {
+    visibility: visible;
+}
+
+.addReactionButtonVisible {
+    visibility: visible;
+}
+
+.addReactionButtonActive {
+    visibility: visible;
+}
+
+.addReactionButtonDisabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.addReactionButton:hover,
+.addReactionButton:focus-visible,
+.addReactionButtonActive {
+    color: var(--cpd-color-icon-primary);
+}
+
+.addReactionButton svg {
+    width: 16px;
+    height: 16px;
+}