Use ListRow in InviteUsersScreen and MessageForwardingScreen. (#2196)

* Use ListRow in InviteUsersScreen and MessageForwardingScreen.

* Remove button styles and fix snapshots.

ElementX/Sources/Screens/InviteUsersScreen/View/InviteUsersScreen.swift

@@ -20,9 +20,13 @@ import SwiftUI
 struct InviteUsersScreen: View {
     @ObservedObject var context: InviteUsersScreenViewModel.Context
     
+    var showTopSection: Bool {
+        !context.viewState.selectedUsers.isEmpty || context.viewState.isSearching
+    }
+    
     var body: some View {
         mainContent
-            .compoundForm()
+            .compoundList()
             .scrollDismissesKeyboard(.immediately)
             .navigationTitle(L10n.screenCreateRoomAddPeopleTitle)
             .navigationBarTitleDisplayMode(.inline)
@@ -40,19 +44,21 @@ struct InviteUsersScreen: View {
     private var mainContent: some View {
         GeometryReader { proxy in
             Form {
-                // this is a fix for having the carousel not clipped, and inside the form, so when the search is dismissed, it wont break the design
-                Section {
-                    EmptyView()
-                } header: {
-                    VStack(spacing: 8) {
-                        selectedUsersSection
-                            .textCase(.none)
-                            .frame(width: proxy.size.width)
-                        
-                        if context.viewState.isSearching {
-                            ProgressView()
-                                .frame(maxWidth: .infinity, alignment: .center)
-                                .listRowBackground(Color.clear)
+                if showTopSection {
+                    // this is a fix for having the carousel not clipped, and inside the form, so when the search is dismissed, it wont break the design
+                    Section {
+                        EmptyView()
+                    } header: {
+                        VStack(spacing: 16) {
+                            selectedUsersSection
+                                .textCase(.none)
+                                .frame(width: proxy.size.width)
+                            
+                            if context.viewState.isSearching {
+                                ProgressView()
+                                    .frame(maxWidth: .infinity, alignment: .center)
+                                    .listRowBackground(Color.clear)
+                            }
                         }
                     }
                 }
@@ -80,20 +86,21 @@ struct InviteUsersScreen: View {
         if !context.viewState.usersSection.users.isEmpty {
             Section {
                 ForEach(context.viewState.usersSection.users, id: \.userID) { user in
-                    Button { context.send(viewAction: .toggleUser(user)) } label: {
-                        UserProfileCell(user: user,
-                                        membership: context.viewState.membershipState(user),
-                                        imageProvider: context.imageProvider)
-                    }
-                    .disabled(context.viewState.isUserDisabled(user))
-                    .buttonStyle(FormButtonStyle(accessory: .multipleSelection(isSelected: context.viewState.isUserSelected(user))))
+                    UserProfileListRow(user: user,
+                                       membership: context.viewState.membershipState(user),
+                                       imageProvider: context.imageProvider,
+                                       kind: .multiSelection(isSelected: context.viewState.isUserSelected(user)) {
+                                           context.send(viewAction: .toggleUser(user))
+                                       })
+                                       .disabled(context.viewState.isUserDisabled(user))
+                                       .accessibilityIdentifier(A11yIdentifiers.inviteUsersScreen.userProfile)
                 }
             } header: {
                 if let title = context.viewState.usersSection.title {
                     Text(title)
+                        .compoundListSectionHeader()
                 }
             }
-            .compoundFormSection()
         } else {
             Section.empty
         }

ElementX/Sources/Screens/MessageForwardingScreen/View/MessageForwardingScreen.swift

@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 
+import Compound
 import SwiftUI
 
 struct MessageForwardingScreen: View {
@@ -23,8 +24,9 @@ struct MessageForwardingScreen: View {
         Form {
             Section {
                 ForEach(context.viewState.rooms) { room in
-                    MessageForwardingRoomCell(room: room, context: context)
-                        .buttonStyle(FormButtonStyle(accessory: .singleSelection(isSelected: context.viewState.selectedRoomID == room.id)))
+                    MessageForwardingListRow(room: room,
+                                             isSelected: context.viewState.selectedRoomID == room.id,
+                                             context: context)
                 }
                 // Replace these with ScrollView's `scrollPosition` when dropping iOS 16.
             } header: {
@@ -38,9 +40,8 @@ struct MessageForwardingScreen: View {
                         context.send(viewAction: .reachedBottom)
                     }
             }
-            .compoundFormSection()
         }
-        .compoundForm()
+        .compoundList()
         .navigationTitle(L10n.commonForwardMessage)
         .navigationBarTitleDisplayMode(.inline)
         .toolbar {
@@ -69,32 +70,20 @@ struct MessageForwardingScreen: View {
     }
 }
 
-private struct MessageForwardingRoomCell: View {
+private struct MessageForwardingListRow: View {
     @Environment(\.dynamicTypeSize) var dynamicTypeSize
     
     let room: MessageForwardingRoom
+    let isSelected: Bool
     let context: MessageForwardingScreenViewModel.Context
     
     var body: some View {
-        Button {
-            context.send(viewAction: .selectRoom(roomID: room.id))
-        } label: {
-            HStack(spacing: 16.0) {
-                avatar
-                
-                VStack(alignment: .leading, spacing: 2.0) {
-                    Text(room.name)
-                        .font(.compound.bodyMD)
-                        .foregroundColor(.compound.textPrimary)
-                        .lineLimit(1)
-                    Text(room.alias ?? room.id)
-                        .font(.compound.bodySM)
-                        .foregroundColor(.compound.textSecondary)
-                        .lineLimit(1)
-                }
-            }
-            .accessibilityElement(children: .combine)
-        }
+        ListRow(label: .avatar(title: room.name,
+                               description: room.alias ?? room.id,
+                               icon: avatar),
+                kind: .selection(isSelected: isSelected) {
+                    context.send(viewAction: .selectRoom(roomID: room.id))
+                })
     }
     
     @ViewBuilder @MainActor

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

@@ -17,13 +17,18 @@
 import SwiftUI
 
 struct PollOptionView: View {
+    @Environment(\.isEnabled) private var isEnabled
+    
     let pollOption: Poll.Option
     let showVotes: Bool
     let isFinalResult: Bool
 
     var body: some View {
         HStack(alignment: .firstTextBaseline, spacing: 12) {
-            FormRowAccessory(kind: .multipleSelection(isSelected: pollOption.isSelected))
+            Image(systemSymbol: pollOption.isSelected ? .checkmarkCircleFill : .circle)
+                .font(.compound.bodyLG)
+                .foregroundColor(pollOption.isSelected && isEnabled ? .compound.iconPrimary : .compound.iconTertiary)
+                .accessibilityAddTraits(pollOption.isSelected ? .isSelected : [])
 
             VStack(spacing: 10) {
                 HStack(alignment: .lastTextBaseline, spacing: 8) {

ElementX/Sources/Screens/StartChatScreen/View/StartChatScreen.swift

@@ -88,14 +88,12 @@ struct StartChatScreen: View {
         if !context.viewState.usersSection.users.isEmpty {
             Section {
                 ForEach(context.viewState.usersSection.users, id: \.userID) { user in
-                    ListRow(kind: .custom {
-                        Button { context.send(viewAction: .selectUser(user)) } label: {
-                            UserProfileCell(user: user, membership: nil, imageProvider: context.imageProvider)
-                                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
-                                .padding(.horizontal, ListRowPadding.horizontal)
-                                .padding(.vertical, 8)
-                        }
-                    })
+                    UserProfileListRow(user: user,
+                                       membership: nil,
+                                       imageProvider: context.imageProvider,
+                                       kind: .button {
+                                           context.send(viewAction: .selectUser(user))
+                                       })
                 }
             } header: {
                 if let title = context.viewState.usersSection.title {