Tweak the RoomHeaderView to match Figma. (#4975)

ElementX/Sources/Other/SwiftUI/VerificationBadge.swift

@@ -11,14 +11,26 @@ import SwiftUI
 
 struct VerificationBadge: View {
     let verificationState: UserIdentityVerificationState
+    let size: CompoundIcon.Size
+    let font: Font
+    
+    init(verificationState: UserIdentityVerificationState) {
+        self.init(verificationState: verificationState, size: .small, relativeTo: .compound.bodyMD)
+    }
+    
+    init(verificationState: UserIdentityVerificationState, size: CompoundIcon.Size, relativeTo font: Font) {
+        self.verificationState = verificationState
+        self.size = size
+        self.font = font
+    }
     
     var body: some View {
         switch verificationState {
         case .verified:
-            CompoundIcon(\.verified, size: .small, relativeTo: .compound.bodyMD)
+            CompoundIcon(\.verified, size: size, relativeTo: font)
                 .foregroundStyle(.compound.iconSuccessPrimary)
         case .verificationViolation:
-            CompoundIcon(\.infoSolid, size: .small, relativeTo: .compound.bodyMD)
+            CompoundIcon(\.infoSolid, size: size, relativeTo: font)
                 .foregroundStyle(.compound.iconCriticalPrimary)
         case .notVerified:
             EmptyView()
@@ -28,10 +40,18 @@ struct VerificationBadge: View {
 
 struct VerificationBadge_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
-        VStack(spacing: 16.0) {
-            VerificationBadge(verificationState: .notVerified)
-            VerificationBadge(verificationState: .verificationViolation)
-            VerificationBadge(verificationState: .verified)
+        VStack(spacing: 20) {
+            HStack(spacing: 16) {
+                VerificationBadge(verificationState: .notVerified)
+                VerificationBadge(verificationState: .verificationViolation)
+                VerificationBadge(verificationState: .verified)
+            }
+            
+            HStack(spacing: 16) {
+                VerificationBadge(verificationState: .notVerified, size: .xSmall, relativeTo: .compound.bodyMD)
+                VerificationBadge(verificationState: .verificationViolation, size: .xSmall, relativeTo: .compound.bodyMD)
+                VerificationBadge(verificationState: .verified, size: .xSmall, relativeTo: .compound.bodyMD)
+            }
         }
         .previewLayout(.sizeThatFits)
     }

ElementX/Sources/Other/SwiftUI/Views/RoomHeaderView.swift

@@ -22,20 +22,22 @@ struct RoomHeaderView: View {
     
     var body: some View {
         if #available(iOS 26.0, *) {
-            Button(action: action) {
-                // On iOS 26+ we use the toolbarRole(.editor) to leading align.
-                content
-            }
-            .backportButtonStyleGlass()
+            // On iOS 26+ we use the toolbarRole(.editor) to leading align.
+            content
+                // Not using a Button here so that we get our custom padding around the avatar. This also
+                // helps fix a bug where the top pixel was being clipped during the push/pop animation as
+                // the Button styling results in a view that is slightly taller than a bar item should be.
+                .padding(6)
+                .padding(.trailing, 6)
+                .glassEffect(.regular.interactive())
+                .roomHeaderAction(action)
         } else {
             // On iOS 18 and lower, the editor role causes an animation glitch with the back button whenever
             // you push a screen whilst the large title is visible on the room screen.
             content
                 // So take up as much space as possible, with a leading alignment for use in the default principal toolbar position
                 .frame(idealWidth: .greatestFiniteMagnitude, maxWidth: .infinity, alignment: .leading)
-                // Using a button stops it from getting truncated in the navigation bar
-                .contentShape(.rect)
-                .onTapGesture(perform: action)
+                .roomHeaderAction(action)
         }
     }
     
@@ -48,7 +50,7 @@ struct RoomHeaderView: View {
                 VStack(alignment: .leading, spacing: 0) {
                     Text(roomName)
                         .lineLimit(1)
-                        .font(.compound.bodyLGSemibold)
+                        .font(.compound.bodyMDSemibold)
                         .accessibilityIdentifier(A11yIdentifiers.roomScreen.name)
                     if let roomSubtitle {
                         Text(roomSubtitle)
@@ -59,7 +61,7 @@ struct RoomHeaderView: View {
                 }
                 
                 if let dmRecipientVerificationState {
-                    VerificationBadge(verificationState: dmRecipientVerificationState)
+                    VerificationBadge(verificationState: dmRecipientVerificationState, size: .xSmall, relativeTo: .compound.bodyMDSemibold)
                 }
             }
         }
@@ -83,6 +85,17 @@ extension RoomHeaderView {
     }
 }
 
+private extension View {
+    func roomHeaderAction(_ action: @escaping () -> Void) -> some View {
+        // Using a button stops it from getting truncated in the navigation bar
+        contentShape(.rect)
+            .onTapGesture(perform: action)
+            .accessibilityAddTraits(.isButton)
+    }
+}
+
+// MARK: - Previews
+
 struct RoomHeaderView_Previews: PreviewProvider, TestablePreview {
     static var previews: some View {
         VStack(alignment: .leading, spacing: 8) {

ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift

@@ -226,6 +226,10 @@ struct RoomScreen_Previews: PreviewProvider, TestablePreview {
     }
     
     static func makeViewModels(canSendMessage: Bool = true, hasSuccessor: Bool = false) -> ViewModels {
+        // TimelineItemBubbledStylerView sets enableKeyShareOnInvite to true which if run
+        // before these tests, ends up adding a banner to the snapshots.
+        AppSettings.resetAllSettings()
+        
         let roomProxyMock = JoinedRoomProxyMock(.init(id: "stable_id",
                                                       name: "Preview room",
                                                       hasOngoingCall: true,