[SWUI-82] Check if all icons in the SDK are configurable (#3)

* Remove iOS 13 version checks as its the minimum supported version

* Streamlined images to be using those from Images.swift

* Align UI with changes to Image refactoring

* Create custom modifier for common customizable image

* Revert change to remove padding as it introduced regressions.

* Rename custom Image modifier

* Implemented image customiyation for AttachmentPickerView

* Updated Snapshot tests

* Fix missing Spacer in AttachmentPickerView

* updated snapshot tests

Co-authored-by: martinmitrevski <[email protected]>

Author: DaemonLoki

DemoAppSwiftUI/CustomComposerAttachmentView.swift

@@ -120,35 +120,36 @@ class CustomMessageTypeResolver: MessageTypeResolving {
 struct CustomAttachmentSourcePickerView: View {
 
     @Injected(\.colors) var colors
+    @Injected(\.images) var images
 
     var selected: AttachmentPickerState
     var onTap: (AttachmentPickerState) -> Void
 
     var body: some View {
         HStack(alignment: .center, spacing: 24) {
             AttachmentPickerButton(
-                iconName: "photo",
+                icon: images.attachmentPickerPhotos,
                 pickerType: .photos,
                 isSelected: selected == .photos,
                 onTap: onTap
             )
 
             AttachmentPickerButton(
-                iconName: "folder",
+                icon: images.attachmentPickerFolder,
                 pickerType: .files,
                 isSelected: selected == .files,
                 onTap: onTap
             )
 
             AttachmentPickerButton(
-                iconName: "camera",
+                icon: images.attachmentPickerCamera,
                 pickerType: .camera,
                 isSelected: selected == .camera,
                 onTap: onTap
             )
 
             AttachmentPickerButton(
-                iconName: "person.crop.circle",
+                icon: UIImage(systemName: "person.crop.circle")!,
                 pickerType: .custom,
                 isSelected: selected == .custom,
                 onTap: onTap

Sources/StreamChatSwiftUI/ChatChannel/ChatChannelViewModel.swift

@@ -12,6 +12,7 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
 
     @Injected(\.chatClient) private var chatClient
     @Injected(\.utils) private var utils
+    @Injected(\.images) private var images
 
     private var channelDataSource: ChannelDataSource
     private var cancellables = Set<AnyCancellable>()
@@ -181,7 +182,7 @@ open class ChatChannelViewModel: ObservableObject, MessagesDataSource {
 
     public func showReactionOverlay() {
         guard let view: UIView = topVC()?.view else {
-            currentSnapshot = UIImage(systemName: "photo")
+            currentSnapshot = images.snapshot
             return
         }
         UIGraphicsBeginImageContext(view.frame.size)

Sources/StreamChatSwiftUI/ChatChannel/Composer/AttachmentPickerView.swift

@@ -78,28 +78,30 @@ public struct AttachmentPickerView<Factory: ViewFactory>: View {
 /// View for picking the source of the attachment (photo, files or camera).
 struct AttachmentSourcePickerView: View {
     @Injected(\.colors) private var colors
+    @Injected(\.images) private var images
 
     var selected: AttachmentPickerState
     var onTap: (AttachmentPickerState) -> Void
 
     var body: some View {
+        
         HStack(alignment: .center, spacing: 24) {
             AttachmentPickerButton(
-                iconName: "photo",
+                icon: images.attachmentPickerPhotos,
                 pickerType: .photos,
                 isSelected: selected == .photos,
                 onTap: onTap
             )
 
             AttachmentPickerButton(
-                iconName: "folder",
+                icon: images.attachmentPickerFolder,
                 pickerType: .files,
                 isSelected: selected == .files,
                 onTap: onTap
             )
 
             AttachmentPickerButton(
-                iconName: "camera",
+                icon: images.attachmentPickerCamera,
                 pickerType: .camera,
                 isSelected: selected == .camera,
                 onTap: onTap
@@ -117,18 +119,18 @@ struct AttachmentSourcePickerView: View {
 public struct AttachmentPickerButton: View {
     @Injected(\.colors) private var colors
 
-    var iconName: String
+    var icon: UIImage
     var pickerType: AttachmentPickerState
     var isSelected: Bool
     var onTap: (AttachmentPickerState) -> Void
 
     public init(
-        iconName: String,
+        icon: UIImage,
         pickerType: AttachmentPickerState,
         isSelected: Bool,
         onTap: @escaping (AttachmentPickerState) -> Void
     ) {
-        self.iconName = iconName
+        self.icon = icon
         self.pickerType = pickerType
         self.isSelected = isSelected
         self.onTap = onTap
@@ -138,7 +140,9 @@ public struct AttachmentPickerButton: View {
         Button {
             onTap(pickerType)
         } label: {
-            Image(systemName: iconName)
+            Image(uiImage: icon)
+                .customizable()
+                .frame(width: 22)
                 .foregroundColor(
                     isSelected ? Color(colors.highlightedAccentBackground)
                         : Color(colors.textLowEmphasis)

Sources/StreamChatSwiftUI/ChatChannel/Composer/ComposerHelperViews.swift

@@ -7,11 +7,15 @@ import SwiftUI
 
 /// View used to indicate that an asset is a video.
 struct VideoIndicatorView: View {
+    
+    @Injected(\.images) private var images
+    
     var body: some View {
         BottomLeftView {
-            Image(systemName: "video.fill")
-                .renderingMode(.template)
-                .font(.system(size: 17, weight: .bold))
+            Image(uiImage: images.videoIndicator)
+                .customizable()
+                .frame(width: 22)
+                .padding(2)
                 .applyDefaultIconOverlayStyle()
         }
     }

Sources/StreamChatSwiftUI/ChatChannel/Composer/PhotoAttachmentPickerView.swift

@@ -79,9 +79,7 @@ public struct PhotoAttachmentCell: View {
                     .aspectRatio(1, contentMode: .fill)
 
                 Image(uiImage: images.imagePlaceholder)
-                    .renderingMode(.template)
-                    .resizable()
-                    .aspectRatio(contentMode: .fit)
+                    .customizable()
                     .frame(height: 56)
                     .foregroundColor(Color(colors.background2))
             }
@@ -91,8 +89,9 @@ public struct PhotoAttachmentCell: View {
             ZStack {
                 if imageSelected(asset.localIdentifier) {
                     TopRightView {
-                        Image(systemName: "checkmark.circle.fill")
+                        Image(uiImage: images.checkmarkFilled)
                             .renderingMode(.template)
+                            .scaledToFit()
                             .applyDefaultIconOverlayStyle()
                     }
                 }

Sources/StreamChatSwiftUI/ChatChannel/Gallery/GalleryView.swift

@@ -10,6 +10,7 @@ struct GalleryView: View {
 
     @Injected(\.colors) private var colors
     @Injected(\.fonts) private var fonts
+    @Injected(\.images) private var images
 
     var message: ChatMessage
     @Binding var isShown: Bool
@@ -72,11 +73,14 @@ struct GalleryView: View {
                         .font(fonts.bodyBold)
 
                     Spacer()
-
+                    
                     Button {
                         gridShown = true
                     } label: {
-                        Image(systemName: "square.grid.3x3.fill")
+                        Image(uiImage: images.gallery)
+                            .renderingMode(.template)
+                            .resizable()
+                            .frame(width: 16, height: 16, alignment: .center)
                     }
                     .standardPadding()
                 }

Sources/StreamChatSwiftUI/ChatChannel/Gallery/ShareButtonView.swift

@@ -8,6 +8,7 @@ import SwiftUI
 struct ShareButtonView: View {
     @Injected(\.colors) var colors
     @Injected(\.fonts) var fonts
+    @Injected(\.images) var images
 
     var content: [Any]
     @State var isSharePresented = false
@@ -16,8 +17,9 @@ struct ShareButtonView: View {
         Button(action: {
             self.isSharePresented = true
         }, label: {
-            Image(systemName: "square.and.arrow.up")
-                .font(fonts.bodyBold)
+            Image(uiImage: images.share)
+                .customizable()
+                .frame(width: 18, height: 22)
         })
             .foregroundColor(Color(colors.text))
             .sheet(isPresented: $isSharePresented) {

Sources/StreamChatSwiftUI/ChatChannel/MessageList/DeletedMessageView.swift

@@ -7,6 +7,7 @@ import SwiftUI
 
 /// View displayed when a message is deleted.
 public struct DeletedMessageView: View {
+    @Injected(\.images) private var images
     @Injected(\.fonts) private var fonts
     @Injected(\.colors) private var colors
     @Injected(\.utils) private var utils
@@ -28,14 +29,17 @@ public struct DeletedMessageView: View {
                 .standardPadding()
                 .foregroundColor(Color(colors.textLowEmphasis))
                 .messageBubble(for: message, isFirst: isFirst)
+            
             HStack {
                 Spacer()
-                Image(systemName: "eye")
-                    .resizable()
-                    .aspectRatio(contentMode: .fit)
+                
+                Image(uiImage: images.eye)
+                    .customizable()
                     .frame(maxWidth: 12)
+            
                 Text(L10n.Message.onlyVisibleToYou)
                     .font(fonts.footnote)
+                
                 Text(dateFormatter.string(from: message.createdAt))
                     .font(fonts.footnote)
             }

Sources/StreamChatSwiftUI/ChatChannel/MessageList/FileAttachmentPreview.swift

@@ -9,6 +9,7 @@ public struct FileAttachmentPreview: View {
     @Environment(\.presentationMode) var presentationMode
 
     @Injected(\.fonts) private var fonts
+    @Injected(\.images) private var images
 
     var url: URL
 
@@ -48,7 +49,7 @@ public struct FileAttachmentPreview: View {
                     Button {
                         presentationMode.wrappedValue.dismiss()
                     } label: {
-                        Image(systemName: "xmark")
+                        Image(uiImage: images.close)
                     }
                 }
             }

Sources/StreamChatSwiftUI/ChatChannel/MessageList/MessageAvatarView.swift

@@ -7,8 +7,10 @@ import StreamChat
 import SwiftUI
 
 public struct MessageAvatarView: View {
+
     @Injected(\.utils) private var utils
     @Injected(\.colors) private var colors
+    @Injected(\.images) private var images
 
     private var imageCDN: ImageCDN {
         utils.imageCDN
@@ -52,7 +54,7 @@ public struct MessageAvatarView: View {
                         : nil
                 )
         } else {
-            Image(systemName: "person.circle")
+            Image(uiImage: images.personPlaceholder)
                 .renderingMode(.template)
                 .resizable()
                 .foregroundColor(Color(colors.textLowEmphasis))