Set a background color for avatar (#244)

* Add avatar background color to the palette

* Apply a default background color to the avatar

* Update tests

* Small update

* Generate snapshots

* Add doc

Sources/GravatarUI/DesignSystem/Palette.swift

@@ -19,37 +19,49 @@ public struct BackgroundColors {
     }
 }
 
+public struct AvatarColors {
+    public let border: UIColor
+    public let background: UIColor
+
+    public init(border: UIColor, background: UIColor) {
+        self.border = border
+        self.background = background
+    }
+}
+
 public struct Palette {
     public let name: String
     public let foreground: ForegroundColors
     public let background: BackgroundColors
-    public let avatarBorder: UIColor
+    public let avatar: AvatarColors
     public let border: UIColor
     public let placeholder: PlaceholderColors
     public let preferredUserInterfaceStyle: UIUserInterfaceStyle
+
     /// Creates an instance of `Palette`.
     ///
     /// - Parameters:
     ///   - name: The palete name.
     ///   - foreground: Colors used on foreground elements like text.
     ///   - background: Colors used for the background elements.
-    ///   - avatarBorder: Color used around the profile avatar image.
+    ///   - avatar: Colors used for the profile avatar image.
+    ///   - border: Color used for borders.
     ///   - placeholder: Colors to use as placeholders.
     ///   - preferredUserInterfaceStyle: Defines if this palette is a dark or light palette.
     ///   This helps choose the correct images for this palette. Pass `.unspecified` to choose the system's user interface style. Default is `.unspecified`.
     init(
         name: String,
         foreground: ForegroundColors,
         background: BackgroundColors,
-        avatarBorder: UIColor,
+        avatar: AvatarColors,
         border: UIColor,
         placeholder: PlaceholderColors,
         preferredUserInterfaceStyle: UIUserInterfaceStyle = .unspecified
     ) {
         self.name = name
         self.foreground = foreground
         self.background = background
-        self.avatarBorder = avatarBorder
+        self.avatar = avatar
         self.border = border
         self.placeholder = placeholder
         self.preferredUserInterfaceStyle = preferredUserInterfaceStyle
@@ -111,7 +123,13 @@ extension Palette {
                 light: light.background.primary,
                 dark: dark.background.primary
             )),
-            avatarBorder: .porpoiseGray,
+            avatar: AvatarColors(
+                border: .porpoiseGray,
+                background: UIColor(
+                    light: light.avatar.background,
+                    dark: dark.avatar.background
+                )
+            ),
             border: .init(
                 light: light.border,
                 dark: dark.border
@@ -135,7 +153,10 @@ extension Palette {
                 secondary: .dugongGray
             ),
             background: .init(primary: .white),
-            avatarBorder: .porpoiseGray,
+            avatar: AvatarColors(
+                border: .porpoiseGray,
+                background: .smokeWhite
+            ),
             border: .porpoiseGray,
             placeholder: PlaceholderColors(
                 backgroundColor: .smokeWhite,
@@ -154,7 +175,10 @@ extension Palette {
                 secondary: .snowflakeWhite60
             ),
             background: .init(primary: .gravatarBlack),
-            avatarBorder: .porpoiseGray,
+            avatar: AvatarColors(
+                border: .porpoiseGray,
+                background: .boatAnchorGray
+            ),
             border: .bovineGray,
             placeholder: PlaceholderColors(
                 backgroundColor: .boatAnchorGray,

Sources/GravatarUI/ProfileView/BaseProfileView.swift

@@ -23,7 +23,7 @@ open class BaseProfileView: UIView, UIContentView {
     /// Placeholder color policy to use in the placeholder state (which basically means when all fields are empty).
     public var placeholderColorPolicy: PlaceholderColorPolicy = .currentPalette {
         didSet {
-            placeholderDisplayer?.refresh(with: placeholderColors)
+            placeholderDisplayer?.refresh(with: placeholderColors, paletteType: paletteType)
         }
     }
 
@@ -250,7 +250,7 @@ open class BaseProfileView: UIView, UIContentView {
         ) { [weak self] result in
             switch result {
             case .success:
-                self?.avatarImageView.layer.borderColor = self?.paletteType.palette.avatarBorder.cgColor
+                self?.avatarImageView.layer.borderColor = self?.paletteType.palette.avatar.border.cgColor
                 self?.avatarImageView.layer.borderWidth = 1
             default:
                 self?.avatarImageView.layer.borderColor = UIColor.clear.cgColor
@@ -260,8 +260,9 @@ open class BaseProfileView: UIView, UIContentView {
     }
 
     func refresh(with paletteType: PaletteType) {
+        avatarImageView.layer.borderColor = paletteType.palette.avatar.border.cgColor
+        avatarImageView.backgroundColor = paletteType.palette.avatar.background
         avatarImageView.overrideUserInterfaceStyle = paletteType.palette.preferredUserInterfaceStyle
-        avatarImageView.layer.borderColor = paletteType.palette.avatarBorder.cgColor
         backgroundColor = paletteType.palette.background.primary
         Configure(aboutMeLabel).asAboutMe().palette(paletteType)
         Configure(displayNameLabel).asDisplayName().palette(paletteType)
@@ -278,7 +279,7 @@ open class BaseProfileView: UIView, UIContentView {
         accountButtonsStackView.arrangedSubviews.compactMap { $0 as? RemoteSVGButton }.forEach { view in
             view.refresh(paletteType: paletteType)
         }
-        placeholderDisplayer?.refresh(with: placeholderColors)
+        placeholderDisplayer?.refresh(with: placeholderColors, paletteType: paletteType)
     }
 
     func updateAccountButtons(with model: AccountListModel?) {

Sources/GravatarUI/ProfileView/Placeholder/PlaceholderDisplayers/BackgroundColorPlaceholderDisplayer.swift

@@ -6,7 +6,7 @@ class BackgroundColorPlaceholderDisplayer<T: UIView>: PlaceholderDisplaying {
     var placeholderColor: UIColor
     let baseView: T
     let isTemporary: Bool
-    let originalBackgroundColor: UIColor
+    var originalBackgroundColor: UIColor
 
     init(baseView: T, color: UIColor, originalBackgroundColor: UIColor, isTemporary: Bool = false) {
         self.placeholderColor = color

Sources/GravatarUI/ProfileView/Placeholder/ProfileViewPlaceholderDisplaying.swift

@@ -7,7 +7,7 @@ public protocol ProfileViewPlaceholderDisplaying {
     func showPlaceholder(on view: BaseProfileView)
     func hidePlaceholder(on view: BaseProfileView)
     func setup(using view: BaseProfileView)
-    func refresh(with placeholderColors: PlaceholderColors)
+    func refresh(with placeholderColors: PlaceholderColors, paletteType: PaletteType)
 }
 
 /// ProfileViewPlaceholderDisplayer can convert each element of `BaseProfileView` into a placeholder and revert back.
@@ -20,7 +20,9 @@ class ProfileViewPlaceholderDisplayer: ProfileViewPlaceholderDisplaying {
         let color = view.placeholderColors.backgroundColor
         elements = [
             BackgroundColorPlaceholderDisplayer<UIImageView>(
-                baseView: view.avatarImageView, color: color, originalBackgroundColor: .clear
+                baseView: view.avatarImageView,
+                color: color,
+                originalBackgroundColor: view.paletteType.palette.avatar.background
             ),
             LabelPlaceholderDisplayer(
                 baseView: view.aboutMeLabel,
@@ -75,10 +77,13 @@ class ProfileViewPlaceholderDisplayer: ProfileViewPlaceholderDisplaying {
         elements?.forEach { $0.hidePlaceholder() }
     }
 
-    func refresh(with placeholderColors: PlaceholderColors) {
+    func refresh(with placeholderColors: PlaceholderColors, paletteType: PaletteType) {
         guard let elements else { return }
         for var element in elements {
             element.placeholderColor = placeholderColors.backgroundColor
+            if let element = element as? BackgroundColorPlaceholderDisplayer<UIImageView> {
+                element.originalBackgroundColor = paletteType.palette.avatar.background
+            }
             if isShowing {
                 element.set(viewColor: placeholderColors.backgroundColor)
             }