Update API access methods functionality UI to conform with designs

3 files changed, 63 insertions, 28 deletions

diff --git a/ios/MullvadVPN/Extensions/UIBackgroundConfiguration+Extensions.swift b/ios/MullvadVPN/Extensions/UIBackgroundConfiguration+Extensions.swift
index c799388434..69f51d5452 100644
--- a/ios/MullvadVPN/Extensions/UIBackgroundConfiguration+Extensions.swift
+++ b/ios/MullvadVPN/Extensions/UIBackgroundConfiguration+Extensions.swift
@@ -11,7 +11,7 @@ import UIKit
 extension UIBackgroundConfiguration {
     /// Type of cell selection used in Mullvad UI.
     enum CellSelectionType {
-        /// Dimmed blue .
+        /// Dimmed blue.
         case dimmed
         /// Bright green.
         case green
@@ -39,18 +39,14 @@ extension UIBackgroundConfiguration {
     ///   - state: a cell state.
     ///   - selectionType: a desired selecton type.
     /// - Returns: new background configuration.
-    func adapted(for state: UICellConfigurationState, selectionType: CellSelectionType) -> UIBackgroundConfiguration {
+    func adapted(
+        for state: UICellConfigurationState,
+        selectionType: CellSelectionType
+    ) -> UIBackgroundConfiguration {
         var config = self
         config.backgroundColor = state.mullvadCellBackgroundColor(selectionType: selectionType)
         return config
     }
-
-    /// Apply an error outline around the cell indicating an error.
-    mutating func applyValidationErrorStyle() {
-        cornerRadius = 10
-        strokeWidth = 1
-        strokeColor = UIColor.Cell.validationErrorBorderColor
-    }
 }
 
 extension UICellConfigurationState {
@@ -63,6 +59,8 @@ extension UICellConfigurationState {
         case .dimmed:
             if isSelected || isHighlighted {
                 UIColor.Cell.selectedAltBackgroundColor
+            } else if isDisabled {
+                UIColor.Cell.disabledBackgroundColor
             } else {
                 UIColor.Cell.backgroundColor
             }
@@ -70,6 +68,8 @@ extension UICellConfigurationState {
         case .green:
             if isSelected || isHighlighted {
                 UIColor.Cell.selectedBackgroundColor
+            } else if isDisabled {
+                UIColor.Cell.disabledBackgroundColor
             } else {
                 UIColor.Cell.backgroundColor
             }
diff --git a/ios/MullvadVPN/Extensions/UIListContentConfiguration+Extensions.swift b/ios/MullvadVPN/Extensions/UIListContentConfiguration+Extensions.swift
index ad3da9a9ca..3eefba09fb 100644
--- a/ios/MullvadVPN/Extensions/UIListContentConfiguration+Extensions.swift
+++ b/ios/MullvadVPN/Extensions/UIListContentConfiguration+Extensions.swift
@@ -10,51 +10,70 @@ import UIKit
 
 extension UIListContentConfiguration {
     /// Returns cell configured with default text attribute used in Mullvad UI.
-    static func mullvadCell(tableStyle: UITableView.Style) -> UIListContentConfiguration {
+    static func mullvadCell(tableStyle: UITableView.Style, isEnabled: Bool = true) -> UIListContentConfiguration {
         var configuration = cell()
-        configuration.textProperties.font = UIFont.systemFont(ofSize: 17)
-        configuration.textProperties.color = UIColor.Cell.titleTextColor
-        configuration.directionalLayoutMargins = tableStyle.directionalLayoutMarginsForCell
+        configuration.textProperties.font = .systemFont(ofSize: 17)
+        configuration.textProperties.color = .Cell.titleTextColor.withAlphaComponent(isEnabled ? 1 : 0.8)
+        configuration.axesPreservingSuperviewLayoutMargins = .vertical
+
+        applyMargins(to: &configuration, tableStyle: tableStyle)
+
         return configuration
     }
 
     /// Returns value cell configured with default text attribute used in Mullvad UI.
-    static func mullvadValueCell(tableStyle: UITableView.Style) -> UIListContentConfiguration {
+    static func mullvadValueCell(tableStyle: UITableView.Style, isEnabled: Bool = true) -> UIListContentConfiguration {
         var configuration = valueCell()
-        configuration.textProperties.font = UIFont.systemFont(ofSize: 17)
-        configuration.textProperties.color = UIColor.Cell.titleTextColor
-        configuration.secondaryTextProperties.color = UIColor.Cell.detailTextColor
-        configuration.secondaryTextProperties.font = UIFont.systemFont(ofSize: 17)
-        configuration.directionalLayoutMargins = tableStyle.directionalLayoutMarginsForCell
+        configuration.textProperties.font = .systemFont(ofSize: 17)
+        configuration.textProperties.color = .Cell.titleTextColor.withAlphaComponent(isEnabled ? 1 : 0.8)
+        configuration.secondaryTextProperties.color = .Cell.detailTextColor.withAlphaComponent(0.8)
+        configuration.secondaryTextProperties.font = .systemFont(ofSize: 17)
+
+        applyMargins(to: &configuration, tableStyle: tableStyle)
+
         return configuration
     }
 
     /// Returns grouped header configured with default text attribute used in Mullvad UI.
-    static func mullvadGroupedHeader() -> UIListContentConfiguration {
+    static func mullvadGroupedHeader(tableStyle: UITableView.Style) -> UIListContentConfiguration {
         var configuration = groupedHeader()
-        configuration.textProperties.color = UIColor.TableSection.headerTextColor
-        configuration.textProperties.font = UIFont.systemFont(ofSize: 17)
+        configuration.textProperties.color = .TableSection.headerTextColor
+        configuration.textProperties.font = .systemFont(ofSize: 13)
+
+        applyMargins(to: &configuration, tableStyle: tableStyle)
+
         return configuration
     }
 
     /// Returns grouped footer configured with default text attribute used in Mullvad UI.
-    static func mullvadGroupedFooter() -> UIListContentConfiguration {
+    static func mullvadGroupedFooter(tableStyle: UITableView.Style) -> UIListContentConfiguration {
         var configuration = groupedFooter()
-        configuration.textProperties.color = UIColor.TableSection.footerTextColor
-        configuration.textProperties.font = UIFont.systemFont(ofSize: 14)
+        configuration.textProperties.color = .TableSection.footerTextColor
+        configuration.textProperties.font = .systemFont(ofSize: 13)
+
+        applyMargins(to: &configuration, tableStyle: tableStyle)
+
         return configuration
     }
+
+    private static func applyMargins(
+        to configuration: inout UIListContentConfiguration,
+        tableStyle: UITableView.Style
+    ) {
+        configuration.axesPreservingSuperviewLayoutMargins = .vertical
+        configuration.directionalLayoutMargins = tableStyle.directionalLayoutMarginsForCell
+    }
 }
 
 extension UITableView.Style {
     var directionalLayoutMarginsForCell: NSDirectionalEdgeInsets {
         switch self {
         case .plain, .grouped:
-            UIMetrics.SettingsCell.layoutMargins
+            UIMetrics.SettingsCell.apiAccessLayoutMargins
         case .insetGrouped:
-            UIMetrics.SettingsCell.insetLayoutMargins
+            UIMetrics.SettingsCell.apiAccessInsetLayoutMargins
         @unknown default:
-            UIMetrics.SettingsCell.layoutMargins
+            UIMetrics.SettingsCell.apiAccessLayoutMargins
         }
     }
 }
diff --git a/ios/MullvadVPN/Extensions/UITableViewCell+Disable.swift b/ios/MullvadVPN/Extensions/UITableViewCell+Disable.swift
new file mode 100644
index 0000000000..6b739e7300
--- /dev/null
+++ b/ios/MullvadVPN/Extensions/UITableViewCell+Disable.swift
@@ -0,0 +1,16 @@
+//
+//  UITableViewCell+Disable.swift
+//  MullvadVPN
+//
+//  Created by Jon Petersson on 2024-01-05.
+//  Copyright © 2024 Mullvad VPN AB. All rights reserved.
+//
+
+import UIKit
+
+extension UITableViewCell {
+    func setDisabled(_ disabled: Bool) {
+        isUserInteractionEnabled = !disabled
+        contentView.alpha = disabled ? 0.8 : 1
+    }
+}