Design tweaks. (#3645)

* Update the background colour of the VisualList component. * Update the recovery key field to match the designs.
2026-11-02 12:07:55 +00:00 · 2024-12-20 14:13:23 +00:00
parent b8106f36ba
commit 885a5b9f36
16 changed files with 61 additions and 53 deletions
@@ -25,16 +25,10 @@ enum ListPosition {
 }

 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()
@@ -43,7 +37,7 @@ struct VisualListItem<Icon: View>: View {
        .padding(.horizontal, 16)
        .padding(.vertical, 12)
        .frame(maxWidth: .infinity, alignment: .leading)
-        .background(backgroundColor, in: RoundedCornerShape(radius: 14, corners: position.roundedCorners))
+        .background(.compound.bgSubtleSecondary, in: RoundedCornerShape(radius: 14, corners: position.roundedCorners))
    }
 }

@@ -22,7 +22,7 @@ struct EncryptionResetScreen: View {
            .accessibilityIdentifier(A11yIdentifiers.encryptionResetScreen.continueReset)
        }
        .background()
-        .backgroundStyle(.compound.bgSubtleSecondary)
+        .backgroundStyle(.compound.bgCanvasDefault)
        .interactiveDismissDisabled()
        .toolbar { toolbar }
        .toolbar(.visible, for: .navigationBar)
@@ -40,7 +40,7 @@ struct EncryptionResetScreen: View {
    
    private var header: some View {
        VStack(spacing: 8) {
-            BigIcon(icon: \.error, style: .alert)
+            BigIcon(icon: \.error, style: .alertSolid)
                .padding(.bottom, 8)
            
            Text(L10n.screenEncryptionResetTitle)
@@ -76,7 +76,6 @@ struct EncryptionResetScreen: View {
                .foregroundColor(positive ? .compound.iconAccentPrimary : .compound.iconSecondary)
                .alignmentGuide(.top) { _ in 2 }
        }
-        .backgroundStyle(.compound.bgCanvasDefault)
    }
    
    @ToolbarContentBuilder
@@ -63,14 +63,12 @@ struct SecureBackupKeyBackupScreen: View {
                    CompoundIcon(\.close, size: .small, relativeTo: .body)
                        .foregroundColor(.compound.iconCriticalPrimary)
                }
-                .backgroundStyle(.compound.bgActionSecondaryHovered)
                
                VisualListItem(title: L10n.screenKeyBackupDisableDescriptionPoint2(InfoPlistReader.main.productionAppName),
                               position: .bottom) {
                    CompoundIcon(\.close, size: .small, relativeTo: .body)
                        .foregroundColor(.compound.iconCriticalPrimary)
                }
-                .backgroundStyle(.compound.bgActionSecondaryHovered)
            }
        }
    }
@@ -134,14 +134,15 @@ struct SecureBackupRecoveryKeyScreen: View {
                .font(.compound.bodySMSemibold)
                .padding(.leading, 16)
            
-            Group {
+            ZStack {
+                RecoveryKeyView(recoveryKey: "", isInvisibleForLayout: true) { }
+                
                if context.viewState.recoveryKey == nil {
                    if !context.viewState.isGeneratingKey {
                        Button(generateButtonTitle) {
                            context.send(viewAction: .generateKey)
                        }
                        .font(.compound.bodyLGSemibold)
-                        .padding(.vertical, 11)
                        .accessibilityIdentifier(A11yIdentifiers.secureBackupRecoveryKeyScreen.generateRecoveryKey)
                    } else {
                        HStack(spacing: 8) {
@@ -150,23 +151,10 @@ struct SecureBackupRecoveryKeyScreen: View {
                        }
                        .font(.compound.bodyLGSemibold)
                        .foregroundStyle(.compound.textPrimary)
-                        .padding(.vertical, 11)
                    }
                } else {
-                    HStack(spacing: 8) {
-                        Text(context.viewState.recoveryKey ?? "")
-                            .foregroundColor(.compound.textPrimary)
-                            .font(.compound.bodyLG)
-                            .frame(maxWidth: .infinity, alignment: .leading)
-                        
-                        Button {
-                            context.send(viewAction: .copyKey)
-                        } label: {
-                            CompoundIcon(\.copy)
-                        }
-                        .tint(.compound.iconSecondary)
-                        .accessibilityLabel(L10n.actionCopy)
-                        .accessibilityIdentifier(A11yIdentifiers.secureBackupRecoveryKeyScreen.copyRecoveryKey)
+                    RecoveryKeyView(recoveryKey: context.viewState.recoveryKey ?? "") {
+                        context.send(viewAction: .copyKey)
                    }
                }
            }
@@ -219,6 +207,35 @@ struct SecureBackupRecoveryKeyScreen: View {
    }
 }

+private struct RecoveryKeyView: View {
+    /// The recovery key to show. This can be blank if `isInvisibleForLayout` is `true.`
+    let recoveryKey: String
+    /// Hides the view, laying it out with the expected key size so that the superview can have a consistent size.
+    var isInvisibleForLayout = false
+    /// The action performed when tapping the copy button.
+    let copyAction: () -> Void
+    
+    private let placeholderRecoveryKey = Array(repeating: "XXXX", count: 12).joined(separator: " ")
+    
+    var body: some View {
+        HStack(spacing: 8) {
+            Text(isInvisibleForLayout ? placeholderRecoveryKey : recoveryKey)
+                .foregroundColor(.compound.textSecondary)
+                .font(.compound.bodyLG.monospaced())
+                .frame(maxWidth: .infinity, alignment: .leading)
+            
+            Button(action: copyAction) {
+                CompoundIcon(\.copy)
+            }
+            .tint(.compound.iconSecondary)
+            .accessibilityLabel(L10n.actionCopy)
+            .accessibilityIdentifier(A11yIdentifiers.secureBackupRecoveryKeyScreen.copyRecoveryKey)
+        }
+        .opacity(isInvisibleForLayout ? 0 : 1)
+        .accessibilityHidden(isInvisibleForLayout)
+    }
+}
+
 // MARK: - Previews

 struct SecureBackupRecoveryKeyScreen_Previews: PreviewProvider, TestablePreview {
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8530b94b6ad2bb808589d221dd963d398a853c218641813235430f51f5d05b3c
-size 155840
+oid sha256:ceb31e3e45349e5e7d4796d99d62ec324a16a663c13ec09f3f217a738d8aaac2
+size 147780
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:652fe68e0477a949d5d7284de23705a87479741e55ba0ed89a40281d23c31e20
-size 212237
+oid sha256:de7a1bddbb0c3e226457bf9f4c1eda6bfa0e1c428625badfc09225a9abe14b03
+size 204847
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:67dc40a01ee89d875ae4723b8809384d5907399d536a26a520489227c3557c83
-size 108502
+oid sha256:12917fe37ef2957ed75d54a9bdd5131257f0937dd78d3291e0993cc65b6ca90c
+size 106823
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:33e757ca5012297a0f1a049f0bad15171f2043ee9224dbc148389607a15be8dd
-size 163996
+oid sha256:5c00629fffd2da494ae7180ce025c4a8e3d42265417f69c3ec79ef8e409d9dac
+size 164958
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:02851bc8304737c8eee1ea76ddee133ec47feb49e0471b8e6c1213696851e6e4
-size 140058
+oid sha256:73b9a17b12e9029aef1b0ea3817ce3380d37954a3065b068a1776d486e16c5f1
+size 138949
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b694da58f6895e51248e8368a2baf1f7b9c4eef3119533ea2eca3c13407412d5
-size 171446
+oid sha256:9b883a050c3aaae6313a99ba1acb96dd20294c68583d6e21d2198970d4c4c7a2
+size 170292
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f93b129a941aa558325a7124f9a72ca4c6a722d67b6325cdb38f6b0c64a6af6b
-size 76045
+oid sha256:cd3df93f9b66cf216fc4a7f067b499933b1cbb7f5cab82b60aa614961bba4bd4
+size 76467
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9d8b72b3b29a6d7ae5302fbff84c09e5364fc28f683fbc1d917a20a213accc06
-size 77564
+oid sha256:289bdd480a2a0b47cf13c64493602f077ea3470e94d27c8ae3f2ecc5a011538f
+size 77992
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bb8bc4cd519ee62becb550537da7bf15566b178330101c21c839d9d93bbd34ed
-size 95875
+oid sha256:e690856b90ee77b2ca30b76089be4310a1b0b63c5e1dcc4399dde39e941cdc79
+size 95877
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ccd9db4b98e04771c641c09e7d8c2bedcffd1eace9f2cb50628ac77051f81cd9
-size 101454
+oid sha256:c9efd9921c63063f27d8a8c3110d03f0b5e41369a373df216209e390fc889c08
+size 101889
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ce1816cf9eef04e5435a8a74c35d61fc8c8b5d4493c4577bad8bc267a0b00ea1
-size 106794
+oid sha256:27195dcb52a71727343a642966a3ca28e64f8b76b40db9bebcafacee93f1c37e
+size 106772
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8db80a8ad96649272dac60a2a95aade580a6b5b09cbb79c49e81d210d41b4f0c
-size 121490
+oid sha256:36b4473d0cf4c33c80c8290cb389361078fe64ab89d40fd5d5817ecd95d6a338
+size 121446