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

apps/web/src/components/structures/MessagePanel.tsx

@@ -66,7 +66,7 @@ const continuedTypes = [EventType.Sticker, EventType.RoomMessage];
  */
 function DateSeparatorWrapper({ roomId, ts }: { roomId: string; ts: number }): JSX.Element {
     const vm = useCreateAutoDisposedViewModel(() => new DateSeparatorViewModel({ roomId, ts }));
-    return <DateSeparatorView vm={vm} />;
+    return <DateSeparatorView vm={vm} className="mx_TimelineSeparator" />;
 }
 
 /**

apps/web/src/components/structures/RoomView.tsx

@@ -416,7 +416,8 @@ function RoomStatusBarWrappedView(props: ConstructorParameters<typeof RoomStatus
 function EncryptionEventWrappedView({ mxEvent }: { mxEvent: MatrixEvent }): ReactElement | null {
     const cli = useMatrixClientContext();
     const vm = useCreateAutoDisposedViewModel(() => new EncryptionEventViewModel({ mxEvent, cli }));
-    return <EncryptionEventView vm={vm} />;
+
+    return <EncryptionEventView vm={vm} className="mx_EventTileBubble mx_cryptoEvent" />;
 }
 
 export class RoomView extends React.Component<IRoomProps, IRoomState> {

apps/web/src/components/structures/WaitingForThirdPartyRoomView.tsx

@@ -45,7 +45,7 @@ export const WaitingForThirdPartyRoomView: React.FC<Props> = ({ roomView, resize
                         <ScrollPanel className="mx_RoomView_messagePanel">
                             <EventTileBubble
                                 icon={<LockSolidIcon />}
-                                className="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon"
+                                className="mx_EventTileBubble mx_cryptoEvent"
                                 title={_t("room|waiting_for_join_title", { brand })}
                                 subtitle={_t("room|waiting_for_join_subtitle", { brand })}
                             />

apps/web/src/components/structures/grouper/CreationGrouper.tsx

@@ -29,7 +29,7 @@ import { DateSeparatorViewModel } from "../../../viewmodels/timeline/DateSeparat
  */
 function DateSeparatorWrapper({ roomId, ts }: { roomId: string; ts: number }): ReactNode {
     const vm = useCreateAutoDisposedViewModel(() => new DateSeparatorViewModel({ roomId, ts }));
-    return <DateSeparatorView vm={vm} />;
+    return <DateSeparatorView vm={vm} className="mx_TimelineSeparator" />;
 }
 
 export class CreationGrouper extends BaseGrouper {

apps/web/src/components/structures/grouper/MainGrouper.tsx

@@ -31,7 +31,7 @@ const groupedStateEvents = [
  */
 function DateSeparatorWrapper({ roomId, ts }: { roomId: string; ts: number }): ReactNode {
     const vm = useCreateAutoDisposedViewModel(() => new DateSeparatorViewModel({ roomId, ts }));
-    return <DateSeparatorView vm={vm} />;
+    return <DateSeparatorView vm={vm} className="mx_TimelineSeparator" />;
 }
 
 // Wrap consecutive grouped events in a ListSummary