fix: SearchCard UI update, change follow button border width, add card border when DarkMode, add shadow

Mastodon/Generated/Assets.swift

@@ -51,6 +51,9 @@ internal enum Asset {
       internal static let tertiarySystemBackground = ColorAsset(name: "Colors/Background/tertiary.system.background")
       internal static let tertiarySystemGroupedBackground = ColorAsset(name: "Colors/Background/tertiary.system.grouped.background")
     }
+    internal enum Border {
+      internal static let searchCard = ColorAsset(name: "Colors/Border/searchCard")
+    }
     internal enum Button {
       internal static let actionToolbar = ColorAsset(name: "Colors/Button/action.toolbar")
       internal static let disabled = ColorAsset(name: "Colors/Button/disabled")
@@ -66,6 +69,9 @@ internal enum Asset {
       internal static let primary = ColorAsset(name: "Colors/Label/primary")
       internal static let secondary = ColorAsset(name: "Colors/Label/secondary")
     }
+    internal enum Shadow {
+      internal static let searchCard = ColorAsset(name: "Colors/Shadow/SearchCard")
+    }
     internal enum Slider {
       internal static let bar = ColorAsset(name: "Colors/Slider/bar")
     }

Mastodon/Resources/Assets.xcassets/Colors/Border/Contents.json

@@ -0,0 +1,9 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "provides-namespace" : true
+  }
+}

Mastodon/Resources/Assets.xcassets/Colors/Border/searchCard.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "0.000",
+          "blue" : "1.000",
+          "green" : "1.000",
+          "red" : "1.000"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "0.300",
+          "blue" : "213",
+          "green" : "213",
+          "red" : "213"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Mastodon/Resources/Assets.xcassets/Colors/Shadow/Contents.json

@@ -0,0 +1,9 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "provides-namespace" : true
+  }
+}

Mastodon/Resources/Assets.xcassets/Colors/Shadow/SearchCard.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0",
+          "green" : "0",
+          "red" : "0"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "0.000",
+          "blue" : "1.000",
+          "green" : "1.000",
+          "red" : "1.000"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Mastodon/Scene/Search/CollectionViewCell/SearchRecommendAccountsCollectionViewCell.swift

@@ -12,18 +12,23 @@ import UIKit
 class SearchRecommendAccountsCollectionViewCell: UICollectionViewCell {
     let avatarImageView: UIImageView = {
         let imageView = UIImageView()
-        imageView.layer.cornerRadius = 8
+        imageView.layer.cornerRadius = 8.4
         imageView.clipsToBounds = true
         return imageView
     }()
     
     let headerImageView: UIImageView = {
         let imageView = UIImageView()
-        imageView.layer.cornerRadius = 8
+        imageView.contentMode = .scaleAspectFill
+        imageView.layer.cornerRadius = 10
         imageView.clipsToBounds = true
+        imageView.layer.borderWidth = 2
+        imageView.layer.borderColor = Asset.Colors.Border.searchCard.color.cgColor
         return imageView
     }()
     
+    let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .regular))
+    
     let displayNameLabel: UILabel = {
         let label = UILabel()
         label.textColor = .white
@@ -46,7 +51,7 @@ class SearchRecommendAccountsCollectionViewCell: UICollectionViewCell {
         button.setTitle(L10n.Scene.Search.Recommend.Accounts.follow, for: .normal)
         button.titleLabel?.font = .systemFont(ofSize: 14, weight: .semibold)
         button.layer.cornerRadius = 12
-        button.layer.borderWidth = 3
+        button.layer.borderWidth = 2
         button.layer.borderColor = UIColor.white.cgColor
         return button
     }()
@@ -55,6 +60,7 @@ class SearchRecommendAccountsCollectionViewCell: UICollectionViewCell {
         super.prepareForReuse()
         headerImageView.af.cancelImageRequest()
         avatarImageView.af.cancelImageRequest()
+        visualEffectView.removeFromSuperview()
     }
     
     override init(frame: CGRect) {
@@ -69,11 +75,17 @@ class SearchRecommendAccountsCollectionViewCell: UICollectionViewCell {
 }
 
 extension SearchRecommendAccountsCollectionViewCell {
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+        headerImageView.layer.borderColor = Asset.Colors.Border.searchCard.color.cgColor
+        applyShadow(color: Asset.Colors.Shadow.searchCard.color, alpha: 0.1, x: 0, y: 3, blur: 12, spread: 0)
+    }
+    
     private func configure() {
         headerImageView.backgroundColor = Asset.Colors.brandBlue.color
-        layer.cornerRadius = 8
+        layer.cornerRadius = 10
-        clipsToBounds = true
+        clipsToBounds = false
-        
+        applyShadow(color: Asset.Colors.Shadow.searchCard.color, alpha: 0.1, x: 0, y: 3, blur: 12, spread: 0)
         contentView.addSubview(headerImageView)
         headerImageView.pin(top: 16, left: 0, bottom: 0, right: 0)
         
@@ -115,8 +127,11 @@ extension SearchRecommendAccountsCollectionViewCell {
         headerImageView.af.setImage(
             withURL: URL(string: account.header)!,
             placeholderImage: UIImage.placeholder(color: .systemFill),
-            imageTransition: .crossDissolve(0.2)
+            imageTransition: .crossDissolve(0.2)) { [weak self] _ in
-        )
+            guard let self = self else { return }
+            self.headerImageView.addSubview(self.visualEffectView)
+            self.visualEffectView.pin(top: 0, left: 0, bottom: 0, right: 0)
+        }
     }
 }
 

Mastodon/Scene/Search/CollectionViewCell/SearchRecommendTagsCollectionViewCell.swift

@@ -15,7 +15,7 @@ class SearchRecommendTagsCollectionViewCell: UICollectionViewCell {
         imageView.translatesAutoresizingMaskIntoConstraints = false
         return imageView
     }()
-    
+     
     let hashtagTitleLabel: UILabel = {
         let label = UILabel()
         label.textColor = .white
@@ -58,10 +58,20 @@ class SearchRecommendTagsCollectionViewCell: UICollectionViewCell {
 }
 
 extension SearchRecommendTagsCollectionViewCell {
+    
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+        layer.borderColor = Asset.Colors.Border.searchCard.color.cgColor
+        applyShadow(color: Asset.Colors.Shadow.searchCard.color, alpha: 0.1, x: 0, y: 3, blur: 12, spread: 0)
+    }
+    
     private func configure() {
         backgroundColor = Asset.Colors.brandBlue.color
-        layer.cornerRadius = 8
+        layer.cornerRadius = 10
-        clipsToBounds = true
+        clipsToBounds = false
+        layer.borderWidth = 2
+        layer.borderColor = Asset.Colors.Border.searchCard.color.cgColor
+        applyShadow(color: Asset.Colors.Shadow.searchCard.color, alpha: 0.1, x: 0, y: 3, blur: 12, spread: 0)
         
         contentView.addSubview(backgroundImageView)
         backgroundImageView.constrain(toSuperviewEdges: nil)