Room screen: timeline message bubbles (#91)

* #34 Create `TimelineItemStylerView`

* #34 Add styler view into different type of cells

* #34 Use placeholder avatar image on room list

* #34 Add `isOutgoing` param to event based timeline item

* #34 Compute `isOutgoing` for timeline items

* #34 Update sender info view in timeline

* #34 Update mock timeline items

* #34 Rename `EventBasedTimelineView` to `EventBasedTimelineSenderView`

* #34 Change padding on timeline cells

* #34 Create `TimelineItemStylerView` to move content into a bubble if needed

* #34 Use styler view in all of the timeline item views

* #34 Make timestamp more readable on images

* #34 Little layout tweaks

* #34 Add changelog

* #34 Fix code smells

* #34 Set text colors on timeline items

* #34 Fix background color of the timeline

* #34 Fix PR remarks

* #34 Set background colors explicitly on remaining screens

* #34 Reduce min bubble width and make it a scaled metric

* #34 Refactor `PlaceholderAvatarImage` to accept a text only

* #34 Fix code smell

* #34 Fix further comments

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

@@ -21,6 +21,7 @@ struct Settings: View {
     // MARK: Private
 
     @State private var showingLogoutConfirmation = false
+    @Environment(\.colorScheme) private var colorScheme
     
     // MARK: Public
     
@@ -41,9 +42,11 @@ struct Settings: View {
                     Button("Crash the app",
                            role: .destructive) { context.send(viewAction: .crash)
                     }
+
                            .accessibilityIdentifier("crashButton")
                 }
             }
+            .listRowBackground(rowBackgroundColor)
 
             Section {
                 Button { showingLogoutConfirmation = true } label: {
@@ -62,23 +65,40 @@ struct Settings: View {
             } footer: {
                 versionText
             }
+            .listRowBackground(rowBackgroundColor)
+        }
+        .introspectTableView { tableView in
+            tableView.backgroundColor = .clear
         }
         .navigationTitle(ElementL10n.settings)
+        .background(backgroundColor, ignoresSafeAreaEdges: .all)
     }
 
     var versionText: some View {
         Text(ElementL10n.settingsVersion + ": " + ElementInfoPlist.cfBundleShortVersionString + " (" + ElementInfoPlist.cfBundleVersion + ")")
     }
+
+    private var backgroundColor: Color {
+        colorScheme == .light ? .element.system : .element.background
+    }
+
+    private var rowBackgroundColor: Color {
+        colorScheme == .light ? .element.background : .element.system
+    }
 }
 
 // MARK: - Previews
 
 struct Settings_Previews: PreviewProvider {
     static var previews: some View {
-        Group {
-            let viewModel = SettingsViewModel()
-            Settings(context: viewModel.context)
-                .previewInterfaceOrientation(.portrait)
-        }
+        body.preferredColorScheme(.light)
+        body.preferredColorScheme(.dark)
+    }
+
+    @ViewBuilder
+    static var body: some View {
+        let viewModel = SettingsViewModel()
+        Settings(context: viewModel.context)
+            .previewInterfaceOrientation(.portrait)
     }
 }