Media message text UI improvement

Session/Conversations/Message Cells/Content Views/MediaTextOverlayView.swift

@@ -1,19 +1,22 @@
+import UIKit
 
 /// Shown over a media message if it has a message body.
 final class MediaTextOverlayView : UIView {
     private let viewItem: ConversationViewItem
     private let albumViewWidth: CGFloat
     private let delegate: MessageCellDelegate
+    private let textColor: UIColor
     var readMoreButton: UIButton?
     
     // MARK: Settings
     private static let maxHeight: CGFloat = 88;
     
     // MARK: Lifecycle
-    init(viewItem: ConversationViewItem, albumViewWidth: CGFloat, delegate: MessageCellDelegate) {
+    init(viewItem: ConversationViewItem, albumViewWidth: CGFloat, textColor: UIColor, delegate: MessageCellDelegate) {
         self.viewItem = viewItem
         self.albumViewWidth = albumViewWidth
         self.delegate = delegate
+        self.textColor = textColor
         super.init(frame: CGRect.zero)
         setUpViewHierarchy()
     }
@@ -28,29 +31,21 @@ final class MediaTextOverlayView : UIView {
     
     private func setUpViewHierarchy() {
         guard let message = viewItem.interaction as? TSMessage, let body = message.body, body.count > 0 else { return }
-        // Shadow
-        let shadowView = GradientView(from: .clear, to: UIColor.black.withAlphaComponent(0.7))
-        addSubview(shadowView)
-        shadowView.pin(to: self)
-        // Line
-        let lineView = UIView()
-        lineView.backgroundColor = Colors.accent
-        lineView.set(.width, to: Values.accentLineThickness)
         // Body label
         let bodyLabel = UILabel()
         bodyLabel.numberOfLines = 0
         bodyLabel.lineBreakMode = .byTruncatingTail
         bodyLabel.text = given(body) { MentionUtilities.highlightMentions(in: $0, threadID: viewItem.interaction.uniqueThreadId) }
-        bodyLabel.textColor = .white
-        bodyLabel.font = .systemFont(ofSize: Values.smallFontSize)
+        bodyLabel.textColor = self.textColor
+        bodyLabel.font = .systemFont(ofSize: Values.mediumFontSize)
         // Content stack view
-        let contentStackView = UIStackView(arrangedSubviews: [ lineView, bodyLabel ])
+        let contentStackView = UIStackView(arrangedSubviews: [ bodyLabel ])
         contentStackView.axis = .horizontal
         contentStackView.spacing = Values.smallSpacing
         addSubview(contentStackView)
-        let inset = Values.mediumSpacing
+        let inset: CGFloat = 12
         contentStackView.pin(.left, to: .left, of: self, withInset: inset)
-        contentStackView.pin(.top, to: .top, of: self, withInset: 3 * inset)
+        contentStackView.pin(.top, to: .top, of: self)
         contentStackView.pin(.right, to: .right, of: self, withInset: -inset)
         // Max height
         bodyLabel.heightAnchor.constraint(lessThanOrEqualToConstant: MediaTextOverlayView.maxHeight).isActive = true

Session/Conversations/Message Cells/VisibleMessageCell.swift

@@ -354,6 +354,11 @@ final class VisibleMessageCell : MessageCell, LinkPreviewViewDelegate {
                 showMediaPlaceholder()
             } else {
                 guard let cache = delegate?.getMediaCache() else { preconditionFailure() }
+                // Stack view
+                let stackView = UIStackView(arrangedSubviews: [])
+                stackView.axis = .vertical
+                stackView.spacing = Values.smallSpacing
+                // Album view
                 let maxMessageWidth = VisibleMessageCell.getMaxWidth(for: viewItem)
                 let albumView = MediaAlbumView(mediaCache: cache, items: viewItem.mediaAlbumItems!, isOutgoing: isOutgoing, maxMessageWidth: maxMessageWidth)
                 self.albumView = albumView
@@ -361,17 +366,20 @@ final class VisibleMessageCell : MessageCell, LinkPreviewViewDelegate {
                 let size = getSize(for: viewItem)
                 albumView.set(.width, to: size.width)
                 albumView.set(.height, to: size.height)
-                albumView.pin(to: snContentView)
                 albumView.loadMedia()
                 albumView.layer.mask = bubbleViewMaskLayer
+                stackView.addArrangedSubview(albumView)
+                // Body text view
                 if let message = viewItem.interaction as? TSMessage, let body = message.body, body.count > 0,
                     let delegate = delegate { // delegate should always be set at this point
-                    let overlayView = MediaTextOverlayView(viewItem: viewItem, albumViewWidth: size.width, delegate: delegate)
+                    let overlayView = MediaTextOverlayView(viewItem: viewItem, albumViewWidth: size.width, textColor: bodyLabelTextColor, delegate: delegate)
                     self.mediaTextOverlayView = overlayView
-                    snContentView.addSubview(overlayView)
-                    overlayView.pin([ UIView.HorizontalEdge.left, UIView.VerticalEdge.bottom, UIView.HorizontalEdge.right ], to: snContentView)
+                    stackView.addArrangedSubview(overlayView)
                 }
                 unloadContent = { albumView.unloadMedia() }
+                // Constraints
+                snContentView.addSubview(stackView)
+                stackView.pin(to: snContentView)
             }
         case .audio:
             if viewItem.interaction is TSIncomingMessage,