Update blockquote styling to latest designs

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

@@ -71,11 +71,3 @@ struct TimelineBubbleLayout: Layout {
         }
     }
 }
-
-extension View {
-    func timelineQuoteBubbleFormatting() -> some View {
-        foregroundColor(.compound.textPlaceholder)
-            .fixedSize(horizontal: false, vertical: true)
-            .padding(4.0)
-    }
-}

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

@@ -131,7 +131,9 @@ 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(timelineItemReplyDetails: replyDetails)
-                    .timelineQuoteBubbleFormatting()
+                    .foregroundColor(.compound.textPlaceholder)
+                    .fixedSize(horizontal: false, vertical: true)
+                    .padding(4.0)
                     .frame(maxWidth: .infinity, alignment: .leading)
                     .background(Color.element.background)
                     .cornerRadius(8)
@@ -139,7 +141,8 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
                 
                 // Add a fixed width reply bubble that is used for layout calculations but won't be rendered.
                 TimelineReplyView(timelineItemReplyDetails: replyDetails)
-                    .timelineQuoteBubbleFormatting()
+                    .fixedSize(horizontal: false, vertical: true)
+                    .padding(4.0)
                     .layoutPriority(TimelineBubbleLayout.Priority.hiddenQuote)
                     .hidden()
             }

ElementX/Sources/Screens/RoomScreen/View/Timeline/FormattedBodyText.swift

@@ -43,10 +43,17 @@ struct FormattedBodyText: View {
                     // The rendered blockquote with a greedy width. The custom layout prevents the
                     // infinite width from increasing the overall width of the view.
                     Text(component.attributedString.mergingAttributes(blockquoteAttributes))
-                        .timelineQuoteBubbleFormatting()
+                        .foregroundColor(.compound.textPlaceholder)
+                        .fixedSize(horizontal: false, vertical: true)
                         .frame(maxWidth: .infinity, alignment: .leading)
-                        .background(Color.element.background)
+                        .padding(.leading, 12.0)
-                        .cornerRadius(8)
+                        .overlay(alignment: .leading) {
+                            // User an overlay here so that the rectangle's infinite height doesn't take priority
+                            Rectangle()
+                                .frame(width: 2.0)
+                                .padding(.leading, 6.0)
+                                .foregroundColor(.compound.textPlaceholder)
+                        }
                         .layoutPriority(TimelineBubbleLayout.Priority.visibleQuote)
                 } else {
                     Text(component.attributedString)
@@ -62,7 +69,8 @@ struct FormattedBodyText: View {
             ForEach(attributedComponents, id: \.self) { component in
                 if component.isBlockquote {
                     Text(component.attributedString.mergingAttributes(blockquoteAttributes))
-                        .timelineQuoteBubbleFormatting()
+                        .fixedSize(horizontal: false, vertical: true)
+                        .padding(.leading, 12.0)
                         .layoutPriority(TimelineBubbleLayout.Priority.hiddenQuote)
                         .hidden()
                 }