5720: Remove useless color, fix some issue with AvatarImage border

DesignKit/Source/ColorValues.swift

@@ -47,10 +47,4 @@ public struct ColorValues: Colors {
     public let background: UIColor
     
     public let namesAndAvatars: [UIColor]
-    
-    // MARK: - Others colors
-    
-    public let white: UIColor
-    
-    public let purple: UIColor
 }

DesignKit/Source/Colors.swift

@@ -67,12 +67,4 @@ public protocol Colors {
     /// - Names in chat timeline
     /// - Avatars default states that include first name letter
     var namesAndAvatars: [ColorType] { get }
-    
-    // MARK: - Others colors
-    
-    /// White
-    var white: ColorType { get }
-    
-    /// Purple
-    var purple: ColorType { get }
 }

DesignKit/Source/ColorsSwiftUI.swift

@@ -49,12 +49,6 @@ public struct ColorSwiftUI: Colors {
     
     public let namesAndAvatars: [Color]
     
-    // MARK: - Others colors
-    
-    public let white: Color
-    
-    public let purple: Color
-    
     init(values: ColorValues) {
         accent = Color(values.accent)
         alert = Color(values.alert)
@@ -69,7 +63,5 @@ public struct ColorSwiftUI: Colors {
         navigation = Color(values.navigation)
         background = Color(values.background)
         namesAndAvatars = values.namesAndAvatars.map({ Color($0) })
-        white = Color(values.white)
-        purple = Color(values.purple)
     }
 }

DesignKit/Source/ColorsUIkit.swift

@@ -47,12 +47,6 @@ import UIKit
     public let background: UIColor
 
     public let namesAndAvatars: [UIColor]
-
-    // MARK: - Others colors
-    
-    public let white: UIColor
-    
-    public let purple: UIColor
     
     init(values: ColorValues) {
         accent = values.accent
@@ -68,8 +62,6 @@ import UIKit
         navigation = values.navigation
         background = values.background
         namesAndAvatars = values.namesAndAvatars
-        white = values.white
-        purple = values.purple
     }
 }
 

DesignKit/Variants/Colors/Dark/DarkColors.swift

@@ -42,9 +42,7 @@ public class DarkColors {
             UIColor(rgb:0x2DC2C5),
             UIColor(rgb:0x5C56F5),
             UIColor(rgb:0x74D12C)
-        ],
-        white: UIColor(rgb: 0xFFFFFF),
-        purple: UIColor(rgb: 0x5C56F5)
+        ]
     )
     
     public static var uiKit = ColorsUIKit(values: values)

DesignKit/Variants/Colors/Light/LightColors.swift

@@ -43,9 +43,7 @@ public class LightColors {
             UIColor(rgb:0x2DC2C5),
             UIColor(rgb:0x5C56F5),
             UIColor(rgb:0x74D12C)
-        ],
-        white: UIColor(rgb: 0xFFFFFF),
-        purple: UIColor(rgb: 0x5C56F5)
+        ]
     )
     
     public static var uiKit = ColorsUIKit(values: values)

RiotSwiftUI/Modules/Common/Avatar/View/AvatarImage.swift

@@ -27,14 +27,7 @@ struct AvatarImage: View {
     var mxContentUri: String?
     var matrixItemId: String
     var displayName: String?
-    var size: AvatarSize?
-    
-    var sizeValue: CGFloat? {
-        guard let size = size else {
-            return nil
-        }
-        return CGFloat(size.rawValue)
-    }
+    var size: AvatarSize
     
     var body: some View {
         Group {
@@ -49,7 +42,7 @@ struct AvatarImage: View {
                     .resizable()
             }
         }
-        .frame(width: sizeValue, height: sizeValue)
+        .frame(maxWidth: CGFloat(size.rawValue), maxHeight: CGFloat(size.rawValue))
         .clipShape(Circle())
         .onAppear {
             viewModel.inject(dependencies: dependencies)
@@ -66,7 +59,7 @@ struct AvatarImage: View {
 
 @available(iOS 14.0, *)
 extension AvatarImage {
-    init(avatarData: AvatarInputProtocol, size: AvatarSize?) {
+    init(avatarData: AvatarInputProtocol, size: AvatarSize) {
         self.init(
             mxContentUri: avatarData.mxContentUri,
             matrixItemId: avatarData.matrixItemId,
@@ -76,6 +69,19 @@ extension AvatarImage {
     }
 }
 
+@available(iOS 14.0, *)
+extension AvatarImage {
+    func border(color: Color) -> some View {
+        modifier(BorderModifier(color: color, borderWidth: 3, shape: Circle()))
+    }
+    
+    /// Use display name color as border color by default
+    func border() -> some View {
+        let borderColor = theme.userColor(for: matrixItemId)
+        return self.border(color: borderColor)
+    }
+}
+
 @available(iOS 14.0, *)
 struct AvatarImage_Previews: PreviewProvider {
     static let mxContentUri = "fakeUri"

RiotSwiftUI/Modules/Common/Avatar/ViewModel/AvatarViewModel.swift

@@ -40,7 +40,7 @@ class AvatarViewModel: InjectableObject, ObservableObject {
         matrixItemId: String,
         displayName: String?,
         colorCount: Int,
-        avatarSize: AvatarSize?) {
+        avatarSize: AvatarSize) {
         
         let placeholderViewModel = PlaceholderAvatarViewModel(displayName: displayName,
                                                               matrixItemId: matrixItemId,
@@ -52,7 +52,7 @@ class AvatarViewModel: InjectableObject, ObservableObject {
             return
         }
         
-            avatarService.avatarImage(mxContentUri: mxContentUri, avatarSize: avatarSize ?? .large)
+            avatarService.avatarImage(mxContentUri: mxContentUri, avatarSize: avatarSize)
             .sink { completion in
                 guard case let .failure(error) = completion else { return }
                 UILog.error("[AvatarService] Failed to retrieve avatar: \(error)")

RiotSwiftUI/Modules/Common/Theme/ThemeUsersColorsExtension.swift

@@ -20,10 +20,10 @@ import SwiftUI
 @available(iOS 14.0, *)
 extension ThemeSwiftUI {
     
-    /// Get the stable display name color based on userId.
+    /// Get the stable display user color based on userId.
     /// - Parameter userId: The user id used to hash.
     /// - Returns: The SwiftUI color for the associated userId.
-    func displayUserColor(for userId: String) -> Color {
+    func userColor(for userId: String) -> Color {
         let senderNameColorIndex = Int(userId.vc_hashCode % Int32(colors.namesAndAvatars.count))
         return colors.namesAndAvatars[senderNameColorIndex]
     }

RiotSwiftUI/Modules/Room/LocationSharing/View/LocationSharingMarkerView.swift

@@ -36,9 +36,9 @@ struct LocationSharingMarkerView<Content: View>: View {
                 .rotation(Angle(degrees: 45))
                 .fill(backgroundColor)
                 .frame(width: 7, height: 7)
-                .offset(x: 0, y: 22)
+                .offset(x: 0, y: 21)
             markerImage
-                .frame(width: 42, height: 42)
+                .frame(width: 40, height: 40)
         }
     }
 }
@@ -53,12 +53,12 @@ struct LocationSharingUserMarkerView_Previews: PreviewProvider {
                                      displayName: "Alice")
         VStack(alignment: .center, spacing: 15) {
             LocationSharingMarkerView(backgroundColor: .green) {
-                AvatarImage(avatarData: avatarData, size: nil)
-                    .shapedBorder(color: Color.green, borderWidth: 3, shape: Circle())
+                AvatarImage(avatarData: avatarData, size: .medium)
+                    .border()
             }
             LocationSharingMarkerView(backgroundColor: .green) {
-                AvatarImage(avatarData: avatarData, size: nil)
-                    .shapedBorder(color: Color.green, borderWidth: 3, shape: Circle())
+                AvatarImage(avatarData: avatarData, size: .medium)
+                    .border()
             }
         }
     }

RiotSwiftUI/Modules/Room/LocationSharing/View/LocationSharingOptionButton.swift

@@ -49,18 +49,20 @@ struct LocationSharingOptionButton_Previews: PreviewProvider {
             LocationSharingOptionButton(text: VectorL10n.locationSharingStaticShareTitle) {
                 
             } buttonIcon: {
-                AvatarImage(avatarData: AvatarInput(mxContentUri: nil, matrixItemId: "Alice", displayName: "Alice"), size: nil)
-                    .shapedBorder(color: Color.green, borderWidth: 3, shape: Circle())
+                AvatarImage(avatarData: AvatarInput(mxContentUri: nil, matrixItemId: "Alice", displayName: "Alice"), size: .medium)
+                    .border()
             }
             LocationSharingOptionButton(text: VectorL10n.locationSharingLiveShareTitle) {
                 
             } buttonIcon: {
                 Image(uiImage: Asset.Images.locationLiveIcon.image)
+                    .resizable()
             }
             LocationSharingOptionButton(text: VectorL10n.locationSharingPinDropShareTitle) {
                 
             } buttonIcon: {
                 Image(uiImage: Asset.Images.locationPinIcon.image)
+                    .resizable()
             }
         }
     }

RiotSwiftUI/Modules/Room/LocationSharing/View/LocationSharingView.swift

@@ -91,8 +91,8 @@ struct LocationSharingView: View {
                 LocationSharingOptionButton(text: VectorL10n.locationSharingStaticShareTitle) {
                     context.send(viewAction: .share)
                 } buttonIcon: {
-                    AvatarImage(avatarData: context.viewState.userAvatarData, size: nil)
-                        .shapedBorder(color: theme.displayUserColor(for: context.viewState.userAvatarData.matrixItemId), borderWidth: 3, shape: Circle())
+                    AvatarImage(avatarData: context.viewState.userAvatarData, size: .medium)
+                        .border()
                 }
                 .disabled(!context.viewState.shareButtonEnabled)
                 // Hide for now until live location sharing is finished
@@ -101,6 +101,7 @@ struct LocationSharingView: View {
                         // TODO: - Start live location sharing
                     } buttonIcon: {
                         Image(uiImage: Asset.Images.locationLiveIcon.image)
+                            .resizable()
                     }
                     .disabled(!context.viewState.shareButtonEnabled)
                 }
@@ -109,6 +110,7 @@ struct LocationSharingView: View {
                     // TODO: - Pin drop sharing action
                 } buttonIcon: {
                     Image(uiImage: Asset.Images.locationPinIcon.image)
+                        .resizable()
                 }
                 .disabled(!context.viewState.shareButtonEnabled)
             }
@@ -131,6 +133,9 @@ struct LocationSharingView: View {
 struct LocationSharingView_Previews: PreviewProvider {
     static let stateRenderer = MockLocationSharingScreenState.stateRenderer
     static var previews: some View {
-        stateRenderer.screenGroup()
+        Group {
+            stateRenderer.screenGroup().theme(.light).preferredColorScheme(.light)
+            stateRenderer.screenGroup().theme(.dark).preferredColorScheme(.dark)
+        }
     }
 }

RiotSwiftUI/Modules/Room/LocationSharing/View/UserLocationAnnotatonView.swift

@@ -49,9 +49,9 @@ class UserLocationAnnotatonView: MGLUserLocationAnnotationView {
     
     private func addUserMarkerView(with avatarData: AvatarInputProtocol) {
         
-        guard let avatarImageView = UIHostingController(rootView: LocationSharingMarkerView(backgroundColor: theme.displayUserColor(for: avatarData.matrixItemId)) {
-            AvatarImage(avatarData: avatarData, size: nil)
-                .shapedBorder(color: theme.displayUserColor(for: avatarData.matrixItemId), borderWidth: 3, shape: Circle())
+        guard let avatarImageView = UIHostingController(rootView: LocationSharingMarkerView(backgroundColor: theme.userColor(for: avatarData.matrixItemId)) {
+            AvatarImage(avatarData: avatarData, size: .medium)
+                .border()
         }).view else {
             return
         }

RiotSwiftUI/Modules/Template/TemplateAdvancedRoomsExample/TemplateRoomChat/View/TemplateRoomChatBubbleView.swift

@@ -35,7 +35,7 @@ struct TemplateRoomChatBubbleView: View {
                 .accessibility(identifier: "bubbleImage")
             VStack(alignment: .leading){
                 Text(bubble.sender.displayName ?? "")
-                    .foregroundColor(theme.displayUserColor(for: bubble.sender.id))
+                    .foregroundColor(theme.userColor(for: bubble.sender.id))
                     .font(theme.fonts.bodySB)
                 ForEach(bubble.items) { item in
                     TemplateRoomChatBubbleContentView(bubbleItem: item)