diff --git a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineBubbleLayout.swift b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineBubbleLayout.swift index c891bb48e..8e118c6f4 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineBubbleLayout.swift +++ b/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) - } -} diff --git a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift index 20c96fae8..88f9b7cc6 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift +++ b/ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift @@ -131,7 +131,9 @@ struct TimelineItemBubbledStylerView: 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: 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() } diff --git a/ElementX/Sources/Screens/RoomScreen/View/Timeline/FormattedBodyText.swift b/ElementX/Sources/Screens/RoomScreen/View/Timeline/FormattedBodyText.swift index 36dd40ee9..62d90a590 100644 --- a/ElementX/Sources/Screens/RoomScreen/View/Timeline/FormattedBodyText.swift +++ b/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) - .cornerRadius(8) + .padding(.leading, 12.0) + .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() }