Tweak the design of various Forms to match Figma (#573)

Add formBackground and formRowBackground colours and adopt them.

* Include topic in UI tests.

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

@@ -22,6 +22,7 @@ struct SettingsScreen: View {
 
     @ScaledMetric private var avatarSize = AvatarSize.user(on: .settings).value
     @ScaledMetric private var menuIconSize = 30.0
+    
     private let listRowInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)
     
     @ObservedObject var context: SettingsScreenViewModel.Context
@@ -29,25 +30,23 @@ struct SettingsScreen: View {
     var body: some View {
         Form {
             userSection
-                .listRowBackground(rowBackgroundColor)
+                .listRowBackground(Color.element.formRowBackground)
             
             if context.viewState.showSessionVerificationSection {
                 sessionVerificationSection
-                    .listRowBackground(rowBackgroundColor)
+                    .listRowBackground(Color.element.formRowBackground)
             }
             
             simplifiedSection
-                .listRowBackground(rowBackgroundColor)
+                .listRowBackground(Color.element.formRowBackground)
             
             signOutSection
-                .listRowBackground(rowBackgroundColor)
-        }
-        .introspectTableView { tableView in
-            tableView.backgroundColor = .clear
+                .listRowBackground(Color.element.formRowBackground)
         }
+        .scrollContentBackground(.hidden)
+        .background(Color.element.formBackground.ignoresSafeArea())
         .navigationTitle(ElementL10n.settings)
         .navigationBarTitleDisplayMode(.inline)
-        .background(backgroundColor.ignoresSafeArea())
         .toolbar {
             ToolbarItem(placement: .confirmationAction) {
                 doneButton
@@ -59,14 +58,6 @@ struct SettingsScreen: View {
         Text(ElementL10n.settingsVersion + ": " + InfoPlistReader.main.bundleShortVersionString + " (" + InfoPlistReader.main.bundleVersion + ")")
     }
 
-    private var backgroundColor: Color {
-        .element.system
-    }
-
-    private var rowBackgroundColor: Color {
-        colorScheme == .light ? .element.background : .element.system
-    }
-
     private var userSection: some View {
         Section {
             HStack(spacing: 13) {
@@ -189,7 +180,7 @@ struct SettingsScreen_Previews: PreviewProvider {
         
         NavigationView {
             SettingsScreen(context: viewModel.context)
-                .previewInterfaceOrientation(.portrait)
+                .tint(.element.accent)
         }
     }
 }