Merge pull request #18470 from wordpress-mobile/feature/18440-prompt-card-avatar-train-color

Blogging Prompts Card: Fix avatar train color

Author: dvdchr

WordPress/Classes/ViewRelated/Blog/Blog Dashboard/Cards/Prompts/AvatarTrainView.swift

@@ -43,10 +43,14 @@ final class AvatarTrainView: UIView {
         // redraw border when user interface style changes.
         if let previousTraitCollection = previousTraitCollection,
             previousTraitCollection.userInterfaceStyle != traitCollection.userInterfaceStyle {
-            avatarStackView.subviews.forEach { configureBorder(for: $0) }
+            configureAvatarBorders()
         }
     }
 
+    override func layoutSubviews() {
+        configureAvatarBorders()
+    }
+
 }
 
 // MARK: Private Helpers
@@ -62,7 +66,6 @@ private extension AvatarTrainView {
     func makeAvatarImageView(with avatarURL: URL? = nil) -> UIImageView {
         let imageView = CircularImageView(image: placeholderImage)
         imageView.translatesAutoresizingMaskIntoConstraints = false
-        configureBorder(for: imageView)
 
         NSLayoutConstraint.activate([
             imageView.heightAnchor.constraint(equalToConstant: imageHeight),
@@ -76,9 +79,12 @@ private extension AvatarTrainView {
         return imageView
     }
 
-    func configureBorder(for view: UIView) {
-        view.layer.borderWidth = Constants.borderWidth
-        view.layer.borderColor = UIColor.listForeground.cgColor
+    func configureAvatarBorders() {
+        avatarStackView.arrangedSubviews.forEach { view in
+            view.layer.masksToBounds = true
+            view.layer.borderWidth = Constants.borderWidth
+            view.layer.borderColor = UIColor.listForeground.cgColor
+        }
     }
 
     // MARK: Constants

WordPress/Classes/ViewRelated/Blog/Blog Dashboard/Cards/Prompts/DashboardPromptsCardCell.swift

@@ -260,6 +260,14 @@ class DashboardPromptsCardCell: UICollectionViewCell, Reusable {
         super.init(coder: coder)
     }
 
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        //  refresh when the appearance style changed so the placeholder images are correctly recolored.
+        if let previousTraitCollection = previousTraitCollection,
+            previousTraitCollection.userInterfaceStyle != traitCollection.userInterfaceStyle {
+            refreshStackView()
+        }
+    }
+
     // MARK: - Public Methods
 
     func configureForExampleDisplay() {
@@ -353,7 +361,10 @@ private extension DashboardPromptsCardCell {
 
     struct Style {
         static let frameIconImage = UIImage(named: "icon-lightbulb-outline")?.resizedImage(Constants.cardIconSize, interpolationQuality: .default)
-        static let avatarPlaceholderImage = UIImage(color: .quaternarySystemFill)
+        static var avatarPlaceholderImage: UIImage {
+            // this needs to be computed so the color is correct depending on the user interface style.
+            return UIImage(color: .init(light: .quaternarySystemFill, dark: .systemGray4))
+        }
     }
 
     struct Constants {