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>

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)
                 }