A couple of fixes to match the Figma more closely.

ElementX/Sources/Other/UserIndicator/UserIndicator.swift

@@ -8,7 +8,6 @@
 
 import Combine
 import Compound
-import Foundation
 import SwiftUI
 
 enum UserIndicatorType: Equatable {

ElementX/Sources/Other/UserIndicator/UserIndicatorModalView.swift

@@ -25,7 +25,7 @@ struct UserIndicatorModalView: View {
 
                 HStack(spacing: 8) {
                     if let icon = indicator.icon {
-                        CompoundIcon(icon, size: .medium, relativeTo: .compound.headingMDBold)
+                        CompoundIcon(icon, size: iconSize, relativeTo: titleFont)
                             .foregroundColor(.compound.iconPrimary)
                     }
                     
@@ -69,6 +69,14 @@ struct UserIndicatorModalView: View {
             .compound.bodyLG
         }
     }
+    
+    private var iconSize: CompoundIcon.Size {
+        if indicator.message != nil {
+            .custom(32)
+        } else {
+            .medium
+        }
+    }
 }
 
 struct UserIndicatorModalView_Previews: PreviewProvider, TestablePreview {

ElementX/Sources/Screens/HomeScreen/View/Filters/RoomListFiltersView.swift

@@ -58,16 +58,17 @@ struct RoomListFiltersView: View {
     }
     
     private func clearButton(scrollViewProxy: ScrollViewProxy) -> some View {
-        Button(action: {
+        Button {
             withAnimation(.easeInOut(duration: 0.2).disabledDuringTests()) {
                 state.clearFilters()
                 scrollViewProxy.scrollTo(leadingID, anchor: .leading)
             }
-        }, label: {
-            CompoundIcon(\.close, size: .small, relativeTo: .compound.bodyLG)
-                .foregroundColor(.compound.iconOnSolidPrimary)
-                .background(Circle().fill(Color.compound.bgActionPrimaryRest))
-        })
+        } label: {
+            CompoundIcon(\.close, size: .xSmall, relativeTo: .compound.bodyLG)
+                .foregroundStyle(.compound.iconOnSolidPrimary)
+                .padding(4)
+                .background(.compound.bgActionPrimaryRest, in: .circle)
+        }
         .accessibilityLabel(L10n.screenRoomlistClearFilters)
     }
     

ElementX/Sources/Screens/HomeScreen/View/HomeScreenNewSoundBanner.swift

@@ -25,14 +25,14 @@ struct HomeScreenNewSoundBanner: View {
     
     var content: some View {
         VStack(alignment: .leading, spacing: 4) {
-            HStack(alignment: .firstTextBaseline, spacing: 16) {
+            HStack(alignment: .center, spacing: 16) {
                 Text(L10n.bannerNewSoundTitle)
                     .font(.compound.bodyLGSemibold)
                     .foregroundColor(.compound.textPrimary)
                     .frame(maxWidth: .infinity, alignment: .leading)
                 
                 Button(action: dismissAction) {
-                    CompoundIcon(\.close, size: .small, relativeTo: .compound.bodyMD)
+                    CompoundIcon(\.close, size: .medium, relativeTo: .compound.bodyLGSemibold)
                         .foregroundColor(.compound.iconSecondary)
                 }
             }

ElementX/Sources/Screens/HomeScreen/View/HomeScreenRecoveryKeyConfirmationBanner.swift

@@ -56,7 +56,7 @@ struct HomeScreenRecoveryKeyConfirmationBanner: View {
     
     var content: some View {
         VStack(alignment: .leading, spacing: 4) {
-            HStack(alignment: .firstTextBaseline, spacing: 16) {
+            HStack(alignment: .center, spacing: 16) {
                 Text(title)
                     .font(.compound.bodyLGSemibold)
                     .foregroundColor(.compound.textPrimary)
@@ -66,7 +66,7 @@ struct HomeScreenRecoveryKeyConfirmationBanner: View {
                     Button {
                         context.send(viewAction: .skipRecoveryKeyConfirmation)
                     } label: {
-                        CompoundIcon(\.close, size: .small, relativeTo: .compound.bodyMD)
+                        CompoundIcon(\.close, size: .medium, relativeTo: .compound.bodyLGSemibold)
                             .foregroundColor(.compound.iconSecondary)
                     }
                 }

ElementX/Sources/Screens/RoomChangeRolesScreen/View/RoomChangeRolesScreenSelectedItem.swift

@@ -15,21 +15,12 @@ struct RoomChangeRolesScreenSelectedItem: View {
     let dismissAction: (() -> Void)?
     
     var body: some View {
-        mainContent
-            .accessibilityActions {
-                if let dismissAction {
-                    Button(L10n.actionDismiss) {
-                        dismissAction()
-                    }
-                }
-            }
-    }
-    
-    // MARK: - Private
-    
-    private var mainContent: some View {
         VStack(spacing: 4) {
-            avatar
+            if let dismissAction {
+                avatar.overlayRemoveItemButton(action: dismissAction)
+            } else {
+                avatar
+            }
             
             Text(member.name ?? member.id)
                 .font(.compound.bodyMD)
@@ -37,6 +28,13 @@ struct RoomChangeRolesScreenSelectedItem: View {
                 .lineLimit(1)
         }
         .accessibilityElement(children: .combine)
+        .accessibilityActions {
+            if let dismissAction {
+                Button(L10n.actionDismiss) {
+                    dismissAction()
+                }
+            }
+        }
     }
     
     var avatar: some View {
@@ -46,18 +44,6 @@ struct RoomChangeRolesScreenSelectedItem: View {
                             avatarSize: .user(on: .roomChangeRoles),
                             mediaProvider: mediaProvider)
             .accessibilityHidden(true)
-            .overlay(alignment: .topTrailing) {
-                if let dismissAction {
-                    Button(action: dismissAction) {
-                        CompoundIcon(\.close, size: .xSmall, relativeTo: .compound.bodyMD)
-                            .foregroundColor(.compound.iconOnSolidPrimary)
-                            .background(Circle().fill(Color.compound.iconPrimary))
-                    }
-                    // We will use the accessibility action
-                    .accessibilityHidden(true)
-                    .offset(x: 4)
-                }
-            }
     }
 }
 

ElementX/Sources/Screens/Timeline/View/TimelineItemViews/CollapsibleRoomTimelineView.swift

@@ -37,7 +37,7 @@ struct CollapsibleRoomTimelineView: View {
                     isExpanded.toggle()
                 }
             } label: {
-                HStack(alignment: .center, spacing: 8) {
+                HStack(alignment: .center, spacing: 4) {
                     Text(L10n.screenRoomTimelineStateChanges(timelineItem.items.count))
                         .font(.compound.bodySM)
                     CompoundIcon(\.chevronRight, size: .small, relativeTo: .compound.bodySM)

ElementX/Sources/Screens/Timeline/View/TimelineItemViews/VideoRoomTimelineView.swift

@@ -63,14 +63,20 @@ struct VideoRoomTimelineView: View {
     }
     
     var playIcon: some View {
-        CompoundIcon(\.playSolid, size: .custom(50), relativeTo: .compound.headingLG)
-            .background(.ultraThinMaterial, in: Circle())
-            .foregroundColor(.white)
+        CompoundIcon(\.playSolid, size: .medium, relativeTo: .compound.headingLG)
+            .foregroundStyle(.compound.iconPrimary)
+            .padding(13)
+            .background {
+                ZStack {
+                    Circle().fill(.compound.bgSubtleSecondary)
+                    Circle().stroke(.compound.borderInteractiveSecondary)
+                }
+            }
     }
     
     var placeholder: some View {
         Rectangle()
-            .foregroundColor(timelineItem.isOutgoing ? .compound._bgBubbleOutgoing : .compound._bgBubbleIncoming)
+            .foregroundStyle(timelineItem.isOutgoing ? .compound._bgBubbleOutgoing : .compound._bgBubbleIncoming)
             .opacity(0.3)
     }
 }