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/HomeScreen/View/HomeScreen.swift

@@ -34,6 +34,7 @@ struct HomeScreen: View {
                     Section("Rooms") {
                         ForEach(context.viewState.unencryptedRooms) { room in
                             RoomCell(room: room, context: context)
+                                .listRowBackground(Color.clear)
                         }
                         
                         let other = context.viewState.encryptedRooms
@@ -44,6 +45,7 @@ struct HomeScreen: View {
                                     RoomCell(room: room, context: context)
                                 }
                             }
+                            .listRowBackground(Color.clear)
                         }
                     }
                     
@@ -60,6 +62,7 @@ struct HomeScreen: View {
                                     RoomCell(room: room, context: context)
                                 }
                             }
+                            .listRowBackground(Color.clear)
                         }
                     }
                 }
@@ -69,6 +72,7 @@ struct HomeScreen: View {
             
             Spacer()
         }
+        .background(Color.element.background)
         .ignoresSafeArea(.all, edges: .bottom)
         .navigationBarTitleDisplayMode(.inline)
         .toolbar {
@@ -127,7 +131,8 @@ struct RoomCell: View {
                         .frame(width: 40, height: 40)
                         .mask(Circle())
                 } else {
-                    Image(systemName: "person.3")
+                    PlaceholderAvatarImage(text: room.displayName ?? room.id)
+                        .clipShape(Circle())
                         .frame(width: 40, height: 40)
                 }
                 
@@ -168,6 +173,11 @@ struct RoomCell: View {
 
 struct HomeScreen_Previews: PreviewProvider {
     static var previews: some View {
+        body.preferredColorScheme(.light)
+        body.preferredColorScheme(.dark)
+    }
+
+    static var body: some View {
         let viewModel = HomeScreenViewModel(attributedStringBuilder: AttributedStringBuilder())
         
         let eventBrief = EventBrief(eventId: "id",