chore: update settings scene UI

Mastodon/Diffiable/Settings/SettingsSection.swift

@@ -21,9 +21,9 @@ enum SettingsSection: Hashable {
     
     var title: String {
         switch self {
-        case .appearance:           return L10n.Scene.Settings.Section.Appearance.title
+        case .appearance:           return L10n.Scene.Settings.Section.LookAndFeel.title
         case .appearancePreference: return ""
-        case .preference:           return L10n.Scene.Settings.Section.Preference.title
+        case .preference:           return ""
         case .notifications:        return L10n.Scene.Settings.Section.Notifications.title
         case .boringZone:           return L10n.Scene.Settings.Section.BoringZone.title
         case .spicyZone:            return L10n.Scene.Settings.Section.SpicyZone.title

Mastodon/Scene/Settings/Cell/SettingsAppearanceTableViewCell.swift

@@ -38,7 +38,7 @@ class SettingsAppearanceTableViewCell: UITableViewCell {
     }()
     
     let systemAppearanceView = AppearanceView(
-        image: Asset.Settings.darkAuto.image,
+        image: Asset.Settings.automatic.image,
         title: L10n.Scene.Settings.Section.Appearance.automatic
     )
     let darkAppearanceView = AppearanceView(
@@ -100,9 +100,9 @@ extension SettingsAppearanceTableViewCell {
         contentView.addSubview(stackView)
         NSLayoutConstraint.activate([
             stackView.topAnchor.constraint(equalTo: contentView.topAnchor),
-            stackView.leadingAnchor.constraint(equalTo: contentView.readableContentGuide.leadingAnchor),
+            stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
             stackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
-            stackView.trailingAnchor.constraint(equalTo: contentView.readableContentGuide.trailingAnchor),
+            stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
         ])
         
         stackView.addArrangedSubview(systemAppearanceView)

Mastodon/Scene/Settings/SettingsViewController.swift

@@ -99,14 +99,8 @@ class SettingsViewController: UIViewController, NeedsDependency {
     }()
     
     private(set) lazy var tableView: UITableView = {
-        let style: UITableView.Style = {
-            switch UIDevice.current.userInterfaceIdiom {
-            case .phone:        return .grouped
-            default:            return .insetGrouped
-            }
-        }()
         // init with a frame to fix a conflict ('UIView-Encapsulated-Layout-Width' UIStackView:0x7f8c2b6c0590.width == 0)
-        let tableView = UITableView(frame: CGRect(x: 0, y: 0, width: 320, height: 320), style: style)
+        let tableView = UITableView(frame: CGRect(x: 0, y: 0, width: 320, height: 320), style: .insetGrouped)
         tableView.translatesAutoresizingMaskIntoConstraints = false
         tableView.delegate = self
         tableView.rowHeight = UITableView.automaticDimension
@@ -330,6 +324,8 @@ extension SettingsViewController: UITableViewDelegate {
         switch sectionIdentifier {
         case .appearancePreference:
             return UIView()
+        case .preference:
+            return UIView()
         case .notifications:
             header = SettingsSectionHeader(
                 frame: CGRect(x: 0, y: 0, width: 375, height: 66),

Mastodon/Scene/Settings/View/AppearanceView.swift

@@ -8,14 +8,16 @@
 import UIKit
 import MastodonAsset
 import MastodonLocalization
+import MastodonUI
 
 class AppearanceView: UIView {
     
+    let imageViewShadowBackgroundContainer = ShadowBackgroundContainer()
     lazy var imageView: UIImageView = {
         let view = UIImageView()
         view.contentMode = .scaleAspectFill
         view.layer.masksToBounds = true
-        view.layer.cornerRadius = 8
+        view.layer.cornerRadius = 4
         view.layer.cornerCurve = .continuous
         // accessibility
         view.accessibilityIgnoresInvertColors = true
@@ -29,6 +31,17 @@ class AppearanceView: UIView {
         label.textAlignment = .center
         return label
     }()
+    
+    lazy var checkmarkButton: UIButton = {
+        let button = UIButton()
+        button.isUserInteractionEnabled = false
+        button.setImage(UIImage(systemName: "circle"), for: .normal)
+        button.setImage(UIImage(systemName: "checkmark.circle.fill"), for: .selected)
+        button.imageView?.preferredSymbolConfiguration = UIImage.SymbolConfiguration(textStyle: .body)
+        button.imageView?.tintColor = Asset.Colors.Label.primary.color
+        button.imageView?.contentMode = .scaleAspectFill
+        return button
+    }()
 
     lazy var stackView: UIStackView = {
         let view = UIStackView()
@@ -70,8 +83,19 @@ class AppearanceView: UIView {
 extension AppearanceView {
 
     private func setupUI() {
-        stackView.addArrangedSubview(imageView)
+        imageView.translatesAutoresizingMaskIntoConstraints = false
+        imageViewShadowBackgroundContainer.addSubview(imageView)
+        NSLayoutConstraint.activate([
+            imageView.topAnchor.constraint(equalTo: imageViewShadowBackgroundContainer.topAnchor),
+            imageView.leadingAnchor.constraint(equalTo: imageViewShadowBackgroundContainer.leadingAnchor),
+            imageView.trailingAnchor.constraint(equalTo: imageViewShadowBackgroundContainer.trailingAnchor),
+            imageView.bottomAnchor.constraint(equalTo: imageViewShadowBackgroundContainer.bottomAnchor),
+        ])
+        imageViewShadowBackgroundContainer.cornerRadius = 4
+        
+        stackView.addArrangedSubview(imageViewShadowBackgroundContainer)
         stackView.addArrangedSubview(titleLabel)
+        stackView.addArrangedSubview(checkmarkButton)
 
         addSubview(stackView)
         translatesAutoresizingMaskIntoConstraints = false
@@ -81,20 +105,18 @@ extension AppearanceView {
             stackView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
             stackView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
             stackView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
-            imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: 120.0 / 90.0),
+            imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor, multiplier: 121.0 / 100.0),        // height / width
         ])
     }
     
     private func configureForSelection() {
         if selected {
-            imageView.layer.borderWidth = 3
-            imageView.layer.borderColor = Asset.Colors.Label.primary.color.cgColor
             accessibilityTraits.insert(.selected)
         } else {
-            imageView.layer.borderWidth = 1
-            imageView.layer.borderColor = Asset.Colors.Label.primaryReverse.color.cgColor
             accessibilityTraits.remove(.selected)
         }
+        
+        checkmarkButton.isSelected = selected
     }
     
     override func layoutSubviews() {

MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/automatic.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "automatic.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "automatic@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "automatic@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/black.auto.imageset/Contents.json

@@ -1,12 +0,0 @@
-{
-  "images" : [
-    {
-      "filename" : "Mixed_Black_Light.png",
-      "idiom" : "universal"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  }
-}

MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/black.imageset/Contents.json

@@ -1,12 +0,0 @@
-{
-  "images" : [
-    {
-      "filename" : "Home Black.png",
-      "idiom" : "universal"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  }
-}

MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/dark.auto.imageset/Contents.json

@@ -1,12 +0,0 @@
-{
-  "images" : [
-    {
-      "filename" : "Mixed_Dark_Light.png",
-      "idiom" : "universal"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  }
-}

MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/dark.imageset/Contents.json

@@ -1,8 +1,19 @@
 {
   "images" : [
     {
-      "filename" : "Home Dark.png",
-      "idiom" : "universal"
+      "filename" : "dark.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "dark@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "dark@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
     }
   ],
   "info" : {

MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Settings/light.imageset/Contents.json

@@ -1,8 +1,19 @@
 {
   "images" : [
     {
-      "filename" : "Home Light.png",
-      "idiom" : "universal"
+      "filename" : "light.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "light@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "light@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
     }
   ],
   "info" : {

MastodonSDK/Sources/MastodonAsset/Generated/Assets.swift

@@ -155,9 +155,7 @@ public enum Asset {
     }
   }
   public enum Settings {
-    public static let blackAuto = ImageAsset(name: "Settings/black.auto")
-    public static let black = ImageAsset(name: "Settings/black")
-    public static let darkAuto = ImageAsset(name: "Settings/dark.auto")
+    public static let automatic = ImageAsset(name: "Settings/automatic")
     public static let dark = ImageAsset(name: "Settings/dark")
     public static let light = ImageAsset(name: "Settings/light")
   }