Design: Forms, Login and Members screen. (#608)

* Rename Settings styles to Form styles.

* Removed redundant FormPickerRow.

* Use the button style everywhere and fix icon shapes.

ElementX/Sources/Other/SwiftUI/Form Styles/FormButtonStyles.swift

@@ -0,0 +1,122 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+/// A view to be added on the trailing edge of a form row.
+enum FormRowAccessory: View {
+    case navigationLink
+    
+    var body: some View {
+        switch self {
+        case .navigationLink:
+            return Image(systemName: "chevron.forward")
+                .font(.element.subheadlineBold)
+                .foregroundColor(.element.quaternaryContent)
+        }
+    }
+}
+
+/// Default button styling for form rows.
+///
+/// The primitive style is needed to set the list row insets to `0`. The inner style is then needed
+/// to change the background colour depending on whether the button is currently pressed or not.
+struct FormButtonStyle: PrimitiveButtonStyle {
+    /// An accessory to be added on the trailing side of the row.
+    var accessory: FormRowAccessory?
+    
+    func makeBody(configuration: Configuration) -> some View {
+        Button(action: configuration.trigger) {
+            configuration.label
+                .frame(maxHeight: .infinity) // Make sure the label fills the cell vertically.
+        }
+        .buttonStyle(Style(accessory: accessory))
+        .listRowInsets(EdgeInsets()) // Remove insets so the background fills the cell.
+    }
+    
+    /// Inner style used to set the pressed background colour.
+    struct Style: ButtonStyle {
+        var accessory: FormRowAccessory?
+        
+        func makeBody(configuration: Configuration) -> some View {
+            HStack {
+                configuration.label
+                    .labelStyle(FormRowLabelStyle())
+                    .foregroundColor(.element.primaryContent)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                
+                accessory
+            }
+            .contentShape(Rectangle())
+            .padding(FormRow.insets) // Re-apply the normal insets using padding.
+            .background(configuration.isPressed ? Color.element.quinaryContent : .clear)
+        }
+    }
+}
+
+/// Small squared action button style for settings screens
+struct FormActionButtonStyle: ButtonStyle {
+    let title: String
+    
+    @ScaledMetric private var menuIconSize = 54.0
+    
+    func makeBody(configuration: Configuration) -> some View {
+        VStack {
+            configuration.label
+                .buttonStyle(.plain)
+                .foregroundColor(.element.primaryContent)
+                .frame(width: menuIconSize, height: menuIconSize)
+                .background {
+                    RoundedRectangle(cornerRadius: 16)
+                        .fill(configuration.isPressed ? Color.element.quinaryContent : .element.formRowBackground)
+                }
+            
+            Text(title)
+                .foregroundColor(.element.secondaryContent)
+                .font(.element.subheadline)
+        }
+    }
+}
+
+struct FormButtonStyles_Previews: PreviewProvider {
+    static var previews: some View {
+        Form {
+            Section {
+                Button { } label: {
+                    Label("Hello world", systemImage: "globe")
+                }
+                .buttonStyle(FormButtonStyle())
+                
+                Button { } label: {
+                    Label("Show something", systemImage: "rectangle.portrait")
+                }
+                .buttonStyle(FormButtonStyle(accessory: .navigationLink))
+                
+                ShareLink(item: "test")
+                    .buttonStyle(FormButtonStyle())
+            }
+            .formSectionStyle()
+            
+            Section {
+                Button { } label: {
+                    Text("Hello world")
+                }
+                .buttonStyle(FormButtonStyle())
+            }
+            .formSectionStyle()
+        }
+    }
+}

ElementX/Sources/Other/SwiftUI/Form Styles/FormRow.swift

@@ -0,0 +1,22 @@
+//
+// Copyright 2023 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+enum FormRow {
+    /// Element specific insets that are used for all our Form rows.
+    static let insets = EdgeInsets(top: 7, leading: 16, bottom: 7, trailing: 16)
+}

ElementX/Sources/Other/SwiftUI/Form Styles/FormRowLabelStyle.swift

@@ -16,7 +16,7 @@
 
 import SwiftUI
 
-struct SettingsRowLabelStyle: LabelStyle {
+struct FormRowLabelStyle: LabelStyle {
     @ScaledMetric private var menuIconSize = 30.0
     
     var alignment: VerticalAlignment = .firstTextBaseline
@@ -26,12 +26,31 @@ struct SettingsRowLabelStyle: LabelStyle {
             configuration.icon
                 .foregroundColor(.element.secondaryContent)
                 .padding(4)
+                .frame(width: menuIconSize, height: menuIconSize)
                 .background(Color.element.formBackground)
                 .clipShape(RoundedRectangle(cornerRadius: 8))
-                .frame(width: menuIconSize, height: menuIconSize)
             configuration.title
                 .font(.element.body)
                 .foregroundColor(.element.primaryContent)
         }
     }
 }
+
+struct FormRowLabelStyle_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack(alignment: .leading) {
+            Label("Person", systemImage: "person")
+                .labelStyle(FormRowLabelStyle())
+            
+            Label("Help", systemImage: "questionmark.circle")
+                .labelStyle(FormRowLabelStyle())
+            
+            Label("Camera", systemImage: "camera")
+                .labelStyle(FormRowLabelStyle())
+            
+            Label("Help", systemImage: "questionmark")
+                .labelStyle(FormRowLabelStyle())
+        }
+        .padding()
+    }
+}

ElementX/Sources/Other/SwiftUI/Form Styles/FormSection.swift

@@ -16,7 +16,7 @@
 
 import SwiftUI
 
-/// Style for section header
+/// Style for form section headers
 struct FormSectionHeaderStyle: ViewModifier {
     func body(content: Content) -> some View {
         content
@@ -25,9 +25,23 @@ struct FormSectionHeaderStyle: ViewModifier {
     }
 }
 
+/// Standard style for form sections
+struct FormSectionStyle: ViewModifier {
+    func body(content: Content) -> some View {
+        content
+            .listRowSeparator(.hidden)
+            .listRowInsets(FormRow.insets)
+            .listRowBackground(Color.element.formRowBackground)
+    }
+}
+
 extension View {
     /// Applies the `FormSectionHeaderStyle` modifier to the view
     func formSectionHeader() -> some View {
         modifier(FormSectionHeaderStyle())
     }
+    
+    func formSectionStyle() -> some View {
+        modifier(FormSectionStyle())
+    }
 }

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

@@ -1,41 +0,0 @@
-//
-// Copyright 2023 New Vector Ltd
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-//
-
-import SwiftUI
-
-/// Small squared action button style for settings screens
-struct SettingsActionButtonStyle: ButtonStyle {
-    let title: String
-    
-    @ScaledMetric private var menuIconSize = 54.0
-    
-    func makeBody(configuration: Configuration) -> some View {
-        VStack {
-            configuration.label
-                .buttonStyle(.plain)
-                .foregroundColor(.element.primaryContent)
-                .frame(width: menuIconSize, height: menuIconSize)
-                .background {
-                    RoundedRectangle(cornerRadius: 16)
-                        .fill(Color.element.formRowBackground.opacity(configuration.isPressed ? 0.5 : 1))
-                }
-            
-            Text(title)
-                .foregroundColor(.element.secondaryContent)
-                .font(.element.subheadline)
-        }
-    }
-}

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

@@ -1,53 +0,0 @@
-//
-// Copyright 2023 New Vector Ltd
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-//
-
-import SwiftUI
-
-/// Default row that can be reused for settings screens
-struct SettingsDefaultRow: View {
-    // MARK: Public
-    
-    let title: String
-    let image: Image
-    let action: () -> Void
-    
-    // MARK: Private
-    
-    private let listRowInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)
-
-    // MARK: Views
-    
-    var body: some View {
-        Button(action: action) {
-            HStack(spacing: 16) {
-                Label(title: {
-                    Text(title)
-                }, icon: {
-                    image
-                })
-                .labelStyle(SettingsRowLabelStyle())
-                
-                Spacer()
-                
-                Image(systemName: "chevron.forward")
-                    .foregroundColor(.element.tertiaryContent)
-            }
-        }
-        .listRowInsets(listRowInsets)
-        .listRowSeparator(.hidden)
-        .foregroundColor(.element.primaryContent)
-    }
-}

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

@@ -1,53 +0,0 @@
-//
-// Copyright 2023 New Vector Ltd
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-//
-
-import SwiftUI
-
-/// Picker row that can be reused for settings screens
-struct SettingsPickerRow<SelectionValue: Hashable, Content: View>: View {
-    // MARK: Public
-    
-    let title: String
-    let image: Image
-    @Binding var selection: SelectionValue
-    let content: () -> Content
-    
-    // MARK: Private
-    
-    @ScaledMetric private var menuIconSize = 30.0
-    private let listRowInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)
-
-    // MARK: Views
-    
-    var body: some View {
-        Picker(selection: $selection, content: content) {
-            HStack(spacing: 16) {
-                image
-                    .foregroundColor(.element.systemGray)
-                    .padding(4)
-                    .background(Color.element.systemGray6)
-                    .clipShape(RoundedRectangle(cornerRadius: 8))
-                    .frame(width: menuIconSize, height: menuIconSize)
-                
-                Text(title)
-                    .font(.element.body)
-                    .foregroundColor(.element.primaryContent)
-            }
-        }
-        .listRowInsets(listRowInsets)
-        .listRowSeparator(.hidden)
-    }
-}

ElementX/Sources/Screens/Authentication/LoginScreen/LoginCoordinator.swift

@@ -92,12 +92,12 @@ final class LoginCoordinator: CoordinatorProtocol {
     static let loadingIndicatorIdentifier = "LoginCoordinatorLoading"
     
     private func startLoading(isInteractionBlocking: Bool) {
-        ServiceLocator.shared.userIndicatorController.submitIndicator(UserIndicator(id: Self.loadingIndicatorIdentifier,
-                                                                                    type: .modal,
-                                                                                    title: ElementL10n.loading,
-                                                                                    persistent: true))
-        
-        if !isInteractionBlocking {
+        if isInteractionBlocking {
+            ServiceLocator.shared.userIndicatorController.submitIndicator(UserIndicator(id: Self.loadingIndicatorIdentifier,
+                                                                                        type: .modal,
+                                                                                        title: ElementL10n.loading,
+                                                                                        persistent: true))
+        } else {
             viewModel.update(isLoading: true)
         }
     }

ElementX/Sources/Screens/Authentication/LoginScreen/View/LoginScreen.swift

@@ -75,7 +75,10 @@ struct LoginScreen: View {
                 .padding(.horizontal, 16)
                 .padding(.bottom, 8)
             
-            TextField(ElementL10n.loginSigninUsernameHint, text: $context.username)
+            TextField(ElementL10n.loginSigninUsernameHint,
+                      text: $context.username,
+                      // Prompt colour fixes a flicker that occurs before the text field style introspects the field.
+                      prompt: Text(ElementL10n.loginSigninUsernameHint).foregroundColor(.element.tertiaryContent))
                 .focused($isUsernameFocused)
                 .textFieldStyle(.elementInput(accessibilityIdentifier: A11yIdentifiers.loginScreen.emailUsername))
                 .disableAutocorrection(true)
@@ -86,7 +89,10 @@ struct LoginScreen: View {
                 .onSubmit { isPasswordFocused = true }
                 .padding(.bottom, 20)
             
-            SecureField(ElementL10n.loginSignupPasswordHint, text: $context.password)
+            SecureField(ElementL10n.loginSignupPasswordHint,
+                        text: $context.password,
+                        // Prompt colour fixes a flicker that occurs before the text field style introspects the field.
+                        prompt: Text(ElementL10n.loginSignupPasswordHint).foregroundColor(.element.tertiaryContent))
                 .focused($isPasswordFocused)
                 .textFieldStyle(.elementInput(accessibilityIdentifier: A11yIdentifiers.loginScreen.password))
                 .textContentType(.password)
@@ -133,6 +139,8 @@ struct LoginScreen: View {
     private func submit() {
         guard context.viewState.canSubmit else { return }
         context.send(viewAction: .next)
+        isUsernameFocused = false
+        isPasswordFocused = false
     }
 }
 

ElementX/Sources/Screens/BugReport/View/BugReportScreen.swift

@@ -96,11 +96,15 @@ struct BugReportScreen: View {
     private var sendLogsToggle: some View {
         VStack(spacing: 8) {
             Toggle(ElementL10n.bugReportScreenIncludeLogs, isOn: $context.sendingLogsEnabled)
+                .foregroundColor(.element.primaryContent)
                 .tint(Color.element.brand)
                 .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.sendLogs)
                 .padding(.horizontal, 16)
-                .padding(.vertical, 11)
-                .background(RoundedRectangle(cornerRadius: 14).fill(Color.element.formRowBackground))
+                .padding(.vertical, 6.5)
+                .background {
+                    RoundedRectangle(cornerRadius: 14)
+                        .fill(Color.element.formRowBackground)
+                }
             
             Text(ElementL10n.bugReportScreenLogsDescription)
                 .font(.element.caption1)
@@ -117,13 +121,13 @@ struct BugReportScreen: View {
                          photoLibrary: .shared()) {
                 HStack(spacing: 16) {
                     Label(context.viewState.screenshot == nil ? ElementL10n.bugReportScreenAttachScreenshot : ElementL10n.bugReportScreenEditScreenshot, systemImage: "camera")
-                        .labelStyle(SettingsRowLabelStyle())
+                        .labelStyle(FormRowLabelStyle())
                     Spacer()
                 }
             }
-            .padding(.horizontal, 16)
-            .padding(.vertical, 11)
-            .background(RoundedRectangle(cornerRadius: 14).fill(Color.element.formRowBackground))
+            .buttonStyle(FormButtonStyle())
+            .background(Color.element.formRowBackground)
+            .cornerRadius(14)
             .accessibilityIdentifier(A11yIdentifiers.bugReportScreen.attachScreenshot)
             if let screenshot = context.viewState.screenshot {
                 ZStack(alignment: .topTrailing) {
@@ -173,11 +177,14 @@ struct BugReport_Previews: PreviewProvider {
                                               isModallyPresented: false)
     
     static var previews: some View {
-        Group {
+        NavigationStack {
             BugReportScreen(context: BugReportViewModel(bugReportService: MockBugReportService(),
                                                         screenshot: nil,
                                                         isModallyPresented: false).context)
                 .previewDisplayName("Without Screenshot")
+        }
+        
+        NavigationStack {
             BugReportScreen(context: BugReportViewModel(bugReportService: MockBugReportService(),
                                                         screenshot: Asset.Images.appLogo.image,
                                                         isModallyPresented: false).context)

ElementX/Sources/Screens/DeveloperOptionsScreen/View/DeveloperOptionsScreenScreen.swift

@@ -29,8 +29,9 @@ struct DeveloperOptionsScreenScreen: View {
                     Text("🥳")
                         .frame(maxWidth: .infinity)
                 }
+                .buttonStyle(FormButtonStyle())
             }
-            .listRowBackground(Color.element.formRowBackground)
+            .formSectionStyle()
         }
         .overlay(effectsView)
         .scrollContentBackground(.hidden)
@@ -43,6 +44,8 @@ struct DeveloperOptionsScreenScreen: View {
     private var effectsView: some View {
         if showConfetti {
             EffectsView(effect: .confetti)
+                .ignoresSafeArea()
+                .allowsHitTesting(false)
                 .task { await removeConfettiAfterDelay() }
         }
     }

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

@@ -41,7 +41,7 @@ struct HomeScreen: View {
                     }
                 }
                 .shimmer()
-                .disabled(context.viewState.roomListMode == .skeletons)
+                .disabled(true)
             } else {
                 LazyVStack(spacing: 0) {
                     ForEach(context.viewState.visibleRooms) { room in
@@ -79,6 +79,7 @@ struct HomeScreen: View {
             }
         }
         .scrollDismissesKeyboard(.immediately)
+        .scrollDisabled(context.viewState.roomListMode == .skeletons)
         .animation(.elementDefault, value: context.viewState.showSessionVerificationBanner)
         .animation(.elementDefault, value: context.viewState.roomListMode)
         .alert(item: $context.alertInfo) { $0.alert }

ElementX/Sources/Screens/RoomDetails/View/RoomDetailsScreen.swift

@@ -17,25 +17,18 @@
 import SwiftUI
 
 struct RoomDetailsScreen: View {
-    private let listRowInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)
-
     @ObservedObject var context: RoomDetailsViewModel.Context
     
     var body: some View {
         Form {
             headerSection
             
-            if let topic = context.viewState.topic {
-                topicSection(with: topic)
-                    .listRowBackground(Color.element.formRowBackground)
-            }
+            topicSection
             
             aboutSection
-                .listRowBackground(Color.element.formRowBackground)
             
             if context.viewState.isEncrypted {
                 securitySection
-                    .listRowBackground(Color.element.formRowBackground)
             }
         }
         .scrollContentBackground(.hidden)
@@ -71,12 +64,12 @@ struct RoomDetailsScreen: View {
                     Button { context.send(viewAction: .copyRoomLink) } label: {
                         Image(systemName: "link")
                     }
-                    .buttonStyle(SettingsActionButtonStyle(title: ElementL10n.roomDetailsCopyLink))
+                    .buttonStyle(FormActionButtonStyle(title: ElementL10n.roomDetailsCopyLink))
                     
                     ShareLink(item: permalink) {
                         Image(systemName: "square.and.arrow.up")
                     }
-                    .buttonStyle(SettingsActionButtonStyle(title: ElementL10n.inviteUsersToRoomActionInvite.capitalized))
+                    .buttonStyle(FormActionButtonStyle(title: ElementL10n.inviteUsersToRoomActionInvite.capitalized))
                 }
                 .padding(.top, 32)
             }
@@ -85,14 +78,18 @@ struct RoomDetailsScreen: View {
         .listRowBackground(Color.clear)
     }
     
-    private func topicSection(with topic: String) -> some View {
-        Section {
-            Text(topic)
-                .foregroundColor(.element.secondaryContent)
-                .font(.element.footnote)
-        } header: {
-            Text(ElementL10n.roomSettingsTopic)
-                .formSectionHeader()
+    @ViewBuilder
+    private var topicSection: some View {
+        if let topic = context.viewState.topic {
+            Section {
+                Text(topic)
+                    .foregroundColor(.element.secondaryContent)
+                    .font(.element.footnote)
+            } header: {
+                Text(ElementL10n.roomSettingsTopic)
+                    .formSectionHeader()
+            }
+            .formSectionStyle()
         }
     }
 
@@ -101,24 +98,19 @@ struct RoomDetailsScreen: View {
             Button {
                 context.send(viewAction: .processTapPeople)
             } label: {
-                HStack {
-                    Label(ElementL10n.bottomActionPeople, systemImage: "person")
-                        .labelStyle(SettingsRowLabelStyle())
-                    
-                    Spacer()
-                    
+                LabeledContent {
                     if context.viewState.isLoadingMembers {
                         ProgressView()
                     } else {
                         Text(String(context.viewState.members.count))
-                            .foregroundColor(.element.secondaryContent)
+                            .foregroundColor(.element.tertiaryContent)
                             .font(.element.body)
-                        Image(systemName: "chevron.forward")
-                            .foregroundColor(.element.quaternaryContent)
                     }
+                } label: {
+                    Label(ElementL10n.bottomActionPeople, systemImage: "person")
                 }
             }
-            .listRowInsets(listRowInsets)
+            .buttonStyle(FormButtonStyle(accessory: context.viewState.isLoadingMembers ? nil : .navigationLink))
             .foregroundColor(.element.primaryContent)
             .accessibilityIdentifier(A11yIdentifiers.roomDetailsScreen.people)
             .disabled(context.viewState.isLoadingMembers)
@@ -126,33 +118,34 @@ struct RoomDetailsScreen: View {
             Text(ElementL10n.roomDetailsAboutSectionTitle)
                 .formSectionHeader()
         }
+        .formSectionStyle()
     }
     
     private var securitySection: some View {
         Section {
             HStack(alignment: .top) {
-                Label(title: {
+                Label {
                     VStack(alignment: .leading, spacing: 2) {
                         Text(ElementL10n.encryptionEnabled)
                         Text(ElementL10n.encryptionEnabledTileDescription)
                             .foregroundColor(.element.secondaryContent)
                             .font(.element.footnote)
                     }
-                }, icon: {
+                } icon: {
                     Image(systemName: "lock.shield")
-                })
-                .labelStyle(SettingsRowLabelStyle(alignment: .top))
+                }
+                .labelStyle(FormRowLabelStyle(alignment: .top))
                 
                 Spacer()
                 
                 Image(systemName: "checkmark")
                     .foregroundColor(.element.quaternaryContent)
             }
-            .padding(.horizontal, -3)
         } header: {
             Text(ElementL10n.roomProfileSectionSecurity)
                 .formSectionHeader()
         }
+        .formSectionStyle()
     }
 }
 

ElementX/Sources/Screens/RoomMembers/View/RoomMemberDetailsScreen.swift

@@ -39,8 +39,9 @@ struct RoomMemberDetailsScreen: View {
             }
         }
         .searchable(text: $context.searchQuery, placement: .navigationBarDrawer(displayMode: .always))
-        .alert(item: $context.alertInfo) { $0.alert }
+        .background(Color.element.background.ignoresSafeArea())
         .navigationTitle(ElementL10n.bottomActionPeople)
+        .alert(item: $context.alertInfo) { $0.alert }
     }
 }
 

ElementX/Sources/Screens/Settings/View/SettingsScreen.swift

@@ -21,30 +21,23 @@ struct SettingsScreen: View {
 
     @ScaledMetric private var avatarSize = AvatarSize.user(on: .settings).value
     
-    private let listRowInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)
-    
     @ObservedObject var context: SettingsScreenViewModel.Context
     
     var body: some View {
         Form {
             userSection
-                .listRowBackground(Color.element.formRowBackground)
             
             if context.viewState.showSessionVerificationSection {
                 sessionVerificationSection
-                    .listRowBackground(Color.element.formRowBackground)
             }
             
             simplifiedSection
-                .listRowBackground(Color.element.formRowBackground)
             
             if context.viewState.showDeveloperOptions {
                 developerOptionsSection
-                    .listRowBackground(Color.element.formRowBackground)
             }
             
             signOutSection
-                .listRowBackground(Color.element.formRowBackground)
         }
         .scrollContentBackground(.hidden)
         .background(Color.element.formBackground.ignoresSafeArea())
@@ -69,6 +62,7 @@ struct SettingsScreen: View {
                                     contentID: context.viewState.userID,
                                     avatarSize: .user(on: .settings),
                                     imageProvider: context.imageProvider)
+                    .accessibilityHidden(true)
                 
                 VStack(alignment: .leading, spacing: 4) {
                     Text(context.viewState.userDisplayName ?? "")
@@ -78,62 +72,66 @@ struct SettingsScreen: View {
                         .font(.element.subheadline)
                         .foregroundColor(.element.primaryContent)
                 }
+                .accessibilityElement(children: .combine)
             }
-            .listRowInsets(listRowInsets)
         }
+        .formSectionStyle()
     }
     
     private var sessionVerificationSection: some View {
         Section {
-            SettingsDefaultRow(title: ElementL10n.settingsSessionVerification,
-                               image: Image(systemName: "checkmark.shield")) {
-                context.send(viewAction: .sessionVerification)
+            Button { context.send(viewAction: .sessionVerification) } label: {
+                Label(ElementL10n.settingsSessionVerification, systemImage: "checkmark.shield")
             }
+            .buttonStyle(FormButtonStyle())
         }
+        .formSectionStyle()
     }
     
     private var developerOptionsSection: some View {
         Section {
-            SettingsDefaultRow(title: ElementL10n.settingsDeveloperOptions,
-                               image: Image(systemName: "hammer.circle")) {
-                context.send(viewAction: .developerOptions)
+            Button { context.send(viewAction: .developerOptions) } label: {
+                Label(ElementL10n.settingsDeveloperOptions, systemImage: "hammer.circle")
             }
+            .buttonStyle(FormButtonStyle(accessory: .navigationLink))
             .accessibilityIdentifier("sessionVerificationButton")
         }
+        .formSectionStyle()
     }
     
     private var simplifiedSection: some View {
         Section {
-            SettingsPickerRow(title: ElementL10n.settingsTimelineStyle,
-                              image: Image(systemName: "rectangle.grid.1x2"),
-                              selection: $context.timelineStyle) {
+            Picker(selection: $context.timelineStyle) {
                 ForEach(TimelineStyle.allCases, id: \.self) { style in
                     Text(style.name)
                         .tag(style)
                 }
+            } label: {
+                Label(ElementL10n.settingsTimelineStyle, systemImage: "rectangle.grid.1x2")
+                    .labelStyle(FormRowLabelStyle())
             }
             .accessibilityIdentifier("timelineStylePicker")
             .onChange(of: context.timelineStyle) { _ in
                 context.send(viewAction: .changedTimelineStyle)
             }
             
-            SettingsDefaultRow(title: ElementL10n.sendBugReport,
-                               image: Image(systemName: "questionmark.circle")) {
-                context.send(viewAction: .reportBug)
+            Button { context.send(viewAction: .reportBug) } label: {
+                Label(ElementL10n.sendBugReport, systemImage: "questionmark.circle")
             }
+            .buttonStyle(FormButtonStyle(accessory: .navigationLink))
             .accessibilityIdentifier("reportBugButton")
         }
+        .formSectionStyle()
     }
     
     private var signOutSection: some View {
         Section {
-            SettingsDefaultRow(title: ElementL10n.actionSignOut,
-                               image: Image(systemName: "rectangle.portrait.and.arrow.right")) {
-                showingLogoutConfirmation = true
+            Button { showingLogoutConfirmation = true } label: {
+                Label(ElementL10n.actionSignOut, systemImage: "rectangle.portrait.and.arrow.right")
             }
+            .buttonStyle(FormButtonStyle())
             .accessibilityIdentifier("logoutButton")
-            .alert(ElementL10n.actionSignOut,
-                   isPresented: $showingLogoutConfirmation) {
+            .alert(ElementL10n.actionSignOut, isPresented: $showingLogoutConfirmation) {
                 Button(ElementL10n.actionSignOut,
                        role: .destructive,
                        action: logout)
@@ -155,6 +153,7 @@ struct SettingsScreen: View {
             }
             .padding(.top, 24)
         }
+        .formSectionStyle()
     }
 
     private var doneButton: some View {

changelog.d/583.bugfix

@@ -0,0 +1 @@
+Fix the background colour of the room members screen in dark mode.

changelog.d/602.bugfix

@@ -0,0 +1 @@
+Make sure forms have pressed states, remove incorrect disclosure indicators, stop login screen placeholders from flickering and don't block the loging screen when parsing a username.

changelog.d/602.change

@@ -0,0 +1 @@
+Rename SettingsRow… to Form…Style and use these everywhere (sparingly on the Bug Report Screen which isn't a real form).