Avatars and Usernames color change (#1610)

* avatars and username color change

* force a replacement for the notification placeholders

* updated also the plain style

* Update project.yml

Co-authored-by: Doug <6060466+pixlwave@users.noreply.github.com>

* changelog

* UI tests updated

---------

Co-authored-by: Doug <6060466+pixlwave@users.noreply.github.com>

DesignKit/Package.swift

@@ -12,7 +12,7 @@ let package = Package(
         .library(name: "DesignKit", targets: ["DesignKit"])
     ],
     dependencies: [
-        .package(url: "https://github.com/vector-im/compound-ios", revision: "50bb7cf313bd1ad17201fc7e4c1184737a0f44c2"),
+        .package(url: "https://github.com/vector-im/compound-ios", revision: "71b0c887880de639c854600a9ada6b5bcc93c719"),
         .package(url: "https://github.com/vector-im/element-design-tokens", exact: "0.0.3"),
         .package(url: "https://github.com/siteline/SwiftUI-Introspect", from: "0.9.0")
     ],

DesignKit/Sources/Colors/ElementColors.swift

@@ -30,14 +30,7 @@ public struct ElementColors {
     
     @available(swift, deprecated: 5.0, message: "Use textActionAccent/iconAccentTertiary from Compound.")
     public var brand: Color { colors.accent }
-    
-    public var contentAndAvatars: [Color] { colors.contentAndAvatars }
-    
-    public func avatarBackground(for contentId: String) -> Color {
-        let colorIndex = Int(contentId.hashCode % Int32(contentAndAvatars.count))
-        return contentAndAvatars[colorIndex % contentAndAvatars.count]
-    }
-    
+        
     // MARK: - Temp
     
     /// The background colour of a row in a Form or grouped List.
@@ -45,17 +38,3 @@ public struct ElementColors {
     /// This colour will be removed once Compound form styles are used everywhere.
     public var formRowBackground = Color.compound.bgCanvasDefaultLevel1
 }
-
-private extension String {
-    /// Calculates a numeric hash same as Element Web
-    /// See original function here https://github.com/matrix-org/matrix-react-sdk/blob/321dd49db4fbe360fc2ff109ac117305c955b061/src/utils/FormattingUtils.js#L47
-    var hashCode: Int32 {
-        var hash: Int32 = 0
-
-        for character in self {
-            let shiftedHash = hash << 5
-            hash = shiftedHash.subtractingReportingOverflow(hash).partialValue + Int32(character.unicodeScalars[character.unicodeScalars.startIndex].value)
-        }
-        return abs(hash)
-    }
-}

ElementX.xcodeproj/project.pbxproj

@@ -5607,7 +5607,7 @@
 			repositoryURL = "https://github.com/vector-im/compound-ios";
 			requirement = {
 				kind = revision;
-				revision = 50bb7cf313bd1ad17201fc7e4c1184737a0f44c2;
+				revision = 71b0c887880de639c854600a9ada6b5bcc93c719;
 			};
 		};
 		9A472EE0218FE7DCF5283429 /* XCRemoteSwiftPackageReference "SwiftUI-Introspect" */ = {

ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -13,7 +13,7 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/vector-im/compound-ios",
       "state" : {
-        "revision" : "50bb7cf313bd1ad17201fc7e4c1184737a0f44c2"
+        "revision" : "71b0c887880de639c854600a9ada6b5bcc93c719"
       }
     },
     {

ElementX/Sources/Other/EffectsScene/EffectsScene.swift

@@ -18,6 +18,13 @@ import SceneKit
 import SwiftUI
 
 class EffectsScene: SCNScene {
+    static let colors: [Color] = [
+        .blue,
+        .red,
+        .yellow,
+        .green
+    ]
+    
     private enum Constants {
         static let confettiSceneName = "ConfettiScene.scn"
         static let particlesNodeName = "particles"
@@ -26,7 +33,7 @@ class EffectsScene: SCNScene {
     static func confetti() -> EffectsScene? {
         guard let scene = EffectsScene(named: Constants.confettiSceneName) else { return nil }
         
-        let colors: [[Float]] = Color.element.contentAndAvatars.compactMap(\.floatComponents)
+        let colors: [[Float]] = colors.compactMap(\.floatComponents)
         
         if let particles = scene.rootNode.childNode(withName: Constants.particlesNodeName, recursively: false)?.particleSystems?.first {
             // The particles need a non-zero color variation for the handler to affect the color

ElementX/Sources/Other/Extensions/UNNotificationContent.swift

@@ -184,7 +184,8 @@ extension UNMutableNotificationContent {
     }
 
     private func getPlaceholderAvatarImageData(name: String, id: String) async -> Data? {
-        let fileName = "notification_placeholder_\(name)_\(id).png"
+        // The version value is used in case the design of the placeholder is updated to force a replacement
+        let fileName = "notification_placeholderV2_\(name)_\(id).png"
         if let data = try? Data(contentsOf: URL.temporaryDirectory.appendingPathComponent(fileName)) {
             MXLog.info("Found existing notification icon placeholder")
             return data

ElementX/Sources/Other/SwiftUI/Views/PlaceholderAvatarImage.swift

@@ -33,9 +33,8 @@ struct PlaceholderAvatarImage: View {
                 // This text's frame doesn't look right when redacted
                 if redactionReasons != .placeholder {
                     Text(textForImage)
-                        .padding(geometry.size.width <= 30 ? 0 : 4)
-                        .foregroundColor(.white)
-                        .font(.system(size: 200).weight(.semibold))
+                        .foregroundColor(avatarColor?.foreground ?? .white)
+                        .font(.system(size: geometry.size.width * 0.5625, weight: .semibold))
                         .minimumScaleFactor(0.001)
                         .frame(alignment: .center)
                 }
@@ -55,11 +54,15 @@ struct PlaceholderAvatarImage: View {
             return Color(.systemGray4) // matches the default text redaction
         }
 
+        return avatarColor?.background ?? .compound.iconPrimary
+    }
+    
+    private var avatarColor: AvatarColor? {
         guard let contentID else {
-            return .compound.iconPrimary
+            return nil
         }
-
-        return .element.avatarBackground(for: contentID)
+        
+        return Color.compound.avatarColor(for: contentID)
     }
 }
 

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

@@ -82,7 +82,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
                     .accessibilityHidden(true)
                 Text(timelineItem.sender.displayName ?? timelineItem.sender.id)
                     .font(.compound.bodySMSemibold)
-                    .foregroundColor(.compound.textPrimary)
+                    .foregroundColor(.compound.avatarColor(for: timelineItem.sender.id).foreground)
                     .lineLimit(1)
                     .padding(.vertical, senderNameVerticalPadding)
             }

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

@@ -94,7 +94,7 @@ struct TimelineItemPlainStylerView<Content: View>: View {
                     TimelineSenderAvatarView(timelineItem: timelineItem)
                     Text(timelineItem.sender.displayName ?? timelineItem.sender.id)
                         .font(.subheadline)
-                        .foregroundColor(.compound.textPrimary)
+                        .foregroundColor(.compound.avatarColor(for: timelineItem.sender.id).foreground)
                         .fontWeight(.semibold)
                         .lineLimit(1)
                 }