App polish part 2 (#1118)

- Fix sheet backgrounds in dark mode.
- Fix background colours for reaction buttons.
- Reply view layout.
- Update separator colours.
- Don't show sender name/avatar in DMs.
- Fix inconsistent line heights with formatted body text.
- Use plain text for reply
- Increase tappable size of collapsed state changes button.
- Blockquote layout and text colour.
- Tap to expand the topic in room details.
- Change the topic and security font size in room details.
- Add cancel button when inviting someone to an existing room.
- Reword Add Friends to Add People in start chat screen.
- Update compound.

ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift

@@ -31,14 +31,13 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
     
     @State private var showItemActionMenu = false
 
-    private var isTextItem: Bool {
-        timelineItem is TextBasedRoomTimelineItem
-    }
+    private var isTextItem: Bool { timelineItem is TextBasedRoomTimelineItem }
+    private var isEncryptedOneToOneRoom: Bool { context.viewState.isEncryptedOneToOneRoom }
 
     var body: some View {
         ZStack(alignment: .trailingFirstTextBaseline) {
             VStack(alignment: alignment, spacing: -12) {
-                if !timelineItem.isOutgoing {
+                if !timelineItem.isOutgoing, !isEncryptedOneToOneRoom {
                     header
                         .zIndex(1)
                 }
@@ -213,7 +212,6 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
                 // The rendered reply bubble with a greedy width. The custom layout prevents
                 // the infinite width from increasing the overall width of the view.
                 TimelineReplyView(placement: .timeline, timelineItemReplyDetails: replyDetails)
-                    .foregroundColor(.compound.textPlaceholder)
                     .fixedSize(horizontal: false, vertical: true)
                     .padding(4.0)
                     .frame(maxWidth: .infinity, alignment: .leading)
@@ -235,7 +233,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
     }
     
     private var messageBubbleTopPadding: CGFloat {
-        guard timelineItem.isOutgoing else { return 0 }
+        guard timelineItem.isOutgoing || isEncryptedOneToOneRoom else { return 0 }
         return timelineGroupStyle == .single || timelineGroupStyle == .first ? 8 : 0
     }
 
@@ -298,13 +296,14 @@ struct TimelineItemBubbledStylerView_Previews: PreviewProvider {
     }
     
     static var mockTimeline: some View {
-        VStack(alignment: .leading, spacing: 0) {
-            ForEach(viewModel.state.items) { item in
-                item.padding(TimelineStyle.bubbles.rowInsets) // Insets added in the table view cells
+        ScrollView {
+            VStack(alignment: .leading, spacing: 0) {
+                ForEach(viewModel.state.items) { item in
+                    item.padding(TimelineStyle.bubbles.rowInsets) // Insets added in the table view cells
+                }
             }
         }
         .environment(\.timelineStyle, .bubbles)
-        .previewLayout(.sizeThatFits)
         .environmentObject(viewModel.context)
     }