Tweak the flow for disabling key storage. (#3464)

* Refactor RoundedLabelItem into the Compound VisualListItem component. * Update the design of SecureBackupKeyBackupScreen. * Add a hint to the key storage toggle when disabled.
2026-11-03 16:10:20 +00:00 · 2024-10-29 17:39:55 +00:00
parent c11e49f962
commit 368226fd57
33 changed files with 107 additions and 102 deletions
@@ -0,0 +1,94 @@
+//
+// Copyright 2021-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import SwiftUI
+
+/// Represents the position of a checkmark item in a list.
+enum ListPosition {
+    case top, middle, bottom
+
+    /// The corners that should be rounded for this position.
+    var roundedCorners: UIRectCorner {
+        switch self {
+        case .top:
+            return [.topLeft, .topRight]
+        case .middle:
+            return []
+        case .bottom:
+            return [.bottomLeft, .bottomRight]
+        }
+    }
+}
+
+struct VisualListItem<Icon: View>: View {
+    @Environment(\.backgroundStyle) private var backgroundStyle
+    
+    let title: String
+    let position: ListPosition
+    let iconContent: () -> Icon
+    
+    private var backgroundColor: AnyShapeStyle {
+        backgroundStyle ?? AnyShapeStyle(.compound.bgSubtleSecondary)
+    }
+    
+    var body: some View {
+        Label { Text(title) } icon: {
+            iconContent()
+        }
+        .labelStyle(VisualListItemLabelStyle())
+        .padding(.horizontal, 16)
+        .padding(.vertical, 12)
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .background(backgroundColor, in: RoundedCornerShape(radius: 14, corners: position.roundedCorners))
+    }
+}
+
+private struct VisualListItemLabelStyle: LabelStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        HStack(alignment: .top, spacing: 12) {
+            configuration.icon
+            configuration.title
+        }
+        .font(.compound.bodyMD)
+        .foregroundColor(.compound.textPrimary)
+    }
+}
+
+// MARK: - Previews
+
+struct VisualListItem_Previews: PreviewProvider, TestablePreview {
+    static let strings = AnalyticsPromptScreenStrings(termsURL: ServiceLocator.shared.settings.analyticsConfiguration.termsURL)
+
+    @ViewBuilder
+    static var testImage1: some View {
+        Image(systemName: "circle")
+    }
+
+    @ViewBuilder
+    static var testImage2: some View {
+        Image(systemName: "square")
+    }
+    
+    static var previews: some View {
+        VStack(alignment: .leading, spacing: 4) {
+            VisualListItem(title: strings.point1, position: .top) {
+                testImage1
+            }
+            VisualListItem(title: strings.point2, position: .middle) {
+                testImage2
+            }
+            VisualListItem(title: "This is a short string.", position: .middle) {
+                testImage1
+            }
+            VisualListItem(title: "This is a very long string that will be used to test the layout over multiple lines of text to ensure everything is correct.",
+                           position: .bottom) {
+                testImage2
+            }
+        }
+        .padding()
+    }
+}