From bdc8994eec4aa1a83efc6bb4562523e23b774d96 Mon Sep 17 00:00:00 2001 From: Doug Date: Fri, 20 Dec 2024 11:39:18 +0000 Subject: [PATCH 1/2] Update the background colour of the VisualList component. --- ElementX/Sources/Other/SwiftUI/Views/VisualListItem.swift | 8 +------- .../View/EncryptionResetScreen.swift | 5 ++--- .../View/SecureBackupKeyBackupScreen.swift | 2 -- .../test_encryptionResetScreen-iPad-en-GB.1.png | 4 ++-- .../test_encryptionResetScreen-iPad-pseudo.1.png | 4 ++-- .../test_encryptionResetScreen-iPhone-16-en-GB.1.png | 4 ++-- .../test_encryptionResetScreen-iPhone-16-pseudo.1.png | 4 ++-- 7 files changed, 11 insertions(+), 20 deletions(-) diff --git a/ElementX/Sources/Other/SwiftUI/Views/VisualListItem.swift b/ElementX/Sources/Other/SwiftUI/Views/VisualListItem.swift index e84e00519b..5ca9612d51 100644 --- a/ElementX/Sources/Other/SwiftUI/Views/VisualListItem.swift +++ b/ElementX/Sources/Other/SwiftUI/Views/VisualListItem.swift @@ -25,16 +25,10 @@ enum ListPosition { } struct VisualListItem: 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: 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)) } } diff --git a/ElementX/Sources/Screens/EncryptionReset/EncryptionResetScreen/View/EncryptionResetScreen.swift b/ElementX/Sources/Screens/EncryptionReset/EncryptionResetScreen/View/EncryptionResetScreen.swift index e79f243b1e..4e92e01ce8 100644 --- a/ElementX/Sources/Screens/EncryptionReset/EncryptionResetScreen/View/EncryptionResetScreen.swift +++ b/ElementX/Sources/Screens/EncryptionReset/EncryptionResetScreen/View/EncryptionResetScreen.swift @@ -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 diff --git a/ElementX/Sources/Screens/SecureBackup/SecureBackupKeyBackupScreen/View/SecureBackupKeyBackupScreen.swift b/ElementX/Sources/Screens/SecureBackup/SecureBackupKeyBackupScreen/View/SecureBackupKeyBackupScreen.swift index 4a0de09b95..da111a4217 100644 --- a/ElementX/Sources/Screens/SecureBackup/SecureBackupKeyBackupScreen/View/SecureBackupKeyBackupScreen.swift +++ b/ElementX/Sources/Screens/SecureBackup/SecureBackupKeyBackupScreen/View/SecureBackupKeyBackupScreen.swift @@ -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) } } } diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPad-en-GB.1.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPad-en-GB.1.png index 1a8dee1aee..279a74f492 100644 --- a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPad-en-GB.1.png +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPad-en-GB.1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8530b94b6ad2bb808589d221dd963d398a853c218641813235430f51f5d05b3c -size 155840 +oid sha256:ceb31e3e45349e5e7d4796d99d62ec324a16a663c13ec09f3f217a738d8aaac2 +size 147780 diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPad-pseudo.1.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPad-pseudo.1.png index 9d7d7792db..776da5edf5 100644 --- a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPad-pseudo.1.png +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPad-pseudo.1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:652fe68e0477a949d5d7284de23705a87479741e55ba0ed89a40281d23c31e20 -size 212237 +oid sha256:de7a1bddbb0c3e226457bf9f4c1eda6bfa0e1c428625badfc09225a9abe14b03 +size 204847 diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPhone-16-en-GB.1.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPhone-16-en-GB.1.png index fad264c445..b1bf7ced02 100644 --- a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPhone-16-en-GB.1.png +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPhone-16-en-GB.1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:67dc40a01ee89d875ae4723b8809384d5907399d536a26a520489227c3557c83 -size 108502 +oid sha256:12917fe37ef2957ed75d54a9bdd5131257f0937dd78d3291e0993cc65b6ca90c +size 106823 diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPhone-16-pseudo.1.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPhone-16-pseudo.1.png index 570740b222..c1c34fad28 100644 --- a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPhone-16-pseudo.1.png +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_encryptionResetScreen-iPhone-16-pseudo.1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:33e757ca5012297a0f1a049f0bad15171f2043ee9224dbc148389607a15be8dd -size 163996 +oid sha256:5c00629fffd2da494ae7180ce025c4a8e3d42265417f69c3ec79ef8e409d9dac +size 164958 From c7b877f3c0511dc9b01b7cff45cfa7467f5af520 Mon Sep 17 00:00:00 2001 From: Doug Date: Fri, 20 Dec 2024 12:26:59 +0000 Subject: [PATCH 2/2] Update the recovery key field to match the designs. --- .../View/SecureBackupRecoveryKeyScreen.swift | 51 ++++++++++++------- ...kupRecoveryKeyScreen-iPad-en-GB.Set-up.png | 4 +- ...upRecoveryKeyScreen-iPad-pseudo.Set-up.png | 4 +- ...ryKeyScreen-iPhone-16-en-GB.Generating.png | 4 +- ...ryKeyScreen-iPhone-16-en-GB.Not-set-up.png | 4 +- ...coveryKeyScreen-iPhone-16-en-GB.Set-up.png | 4 +- ...yKeyScreen-iPhone-16-pseudo.Generating.png | 4 +- ...yKeyScreen-iPhone-16-pseudo.Not-set-up.png | 4 +- ...overyKeyScreen-iPhone-16-pseudo.Set-up.png | 4 +- 9 files changed, 50 insertions(+), 33 deletions(-) diff --git a/ElementX/Sources/Screens/SecureBackup/SecureBackupRecoveryKeyScreen/View/SecureBackupRecoveryKeyScreen.swift b/ElementX/Sources/Screens/SecureBackup/SecureBackupRecoveryKeyScreen/View/SecureBackupRecoveryKeyScreen.swift index 51314243eb..b0cc674060 100644 --- a/ElementX/Sources/Screens/SecureBackup/SecureBackupRecoveryKeyScreen/View/SecureBackupRecoveryKeyScreen.swift +++ b/ElementX/Sources/Screens/SecureBackup/SecureBackupRecoveryKeyScreen/View/SecureBackupRecoveryKeyScreen.swift @@ -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 { diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPad-en-GB.Set-up.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPad-en-GB.Set-up.png index 02ab29e321..1376526ab0 100644 --- a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPad-en-GB.Set-up.png +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPad-en-GB.Set-up.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:02851bc8304737c8eee1ea76ddee133ec47feb49e0471b8e6c1213696851e6e4 -size 140058 +oid sha256:73b9a17b12e9029aef1b0ea3817ce3380d37954a3065b068a1776d486e16c5f1 +size 138949 diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPad-pseudo.Set-up.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPad-pseudo.Set-up.png index 83bba7ef50..3d6b4d1076 100644 --- a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPad-pseudo.Set-up.png +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPad-pseudo.Set-up.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b694da58f6895e51248e8368a2baf1f7b9c4eef3119533ea2eca3c13407412d5 -size 171446 +oid sha256:9b883a050c3aaae6313a99ba1acb96dd20294c68583d6e21d2198970d4c4c7a2 +size 170292 diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-en-GB.Generating.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-en-GB.Generating.png index 84ff377f9f..0f3bb1c9ff 100644 --- a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-en-GB.Generating.png +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-en-GB.Generating.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f93b129a941aa558325a7124f9a72ca4c6a722d67b6325cdb38f6b0c64a6af6b -size 76045 +oid sha256:cd3df93f9b66cf216fc4a7f067b499933b1cbb7f5cab82b60aa614961bba4bd4 +size 76467 diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-en-GB.Not-set-up.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-en-GB.Not-set-up.png index f725a97cdc..4003f9bbd9 100644 --- a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-en-GB.Not-set-up.png +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-en-GB.Not-set-up.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9d8b72b3b29a6d7ae5302fbff84c09e5364fc28f683fbc1d917a20a213accc06 -size 77564 +oid sha256:289bdd480a2a0b47cf13c64493602f077ea3470e94d27c8ae3f2ecc5a011538f +size 77992 diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-en-GB.Set-up.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-en-GB.Set-up.png index 49cd7a983f..6044a4d683 100644 --- a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-en-GB.Set-up.png +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-en-GB.Set-up.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bb8bc4cd519ee62becb550537da7bf15566b178330101c21c839d9d93bbd34ed -size 95875 +oid sha256:e690856b90ee77b2ca30b76089be4310a1b0b63c5e1dcc4399dde39e941cdc79 +size 95877 diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-pseudo.Generating.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-pseudo.Generating.png index 017d38c6e5..369bb5f13a 100644 --- a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-pseudo.Generating.png +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-pseudo.Generating.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ccd9db4b98e04771c641c09e7d8c2bedcffd1eace9f2cb50628ac77051f81cd9 -size 101454 +oid sha256:c9efd9921c63063f27d8a8c3110d03f0b5e41369a373df216209e390fc889c08 +size 101889 diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-pseudo.Not-set-up.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-pseudo.Not-set-up.png index 8899758d0f..43454f3198 100644 --- a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-pseudo.Not-set-up.png +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-pseudo.Not-set-up.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ce1816cf9eef04e5435a8a74c35d61fc8c8b5d4493c4577bad8bc267a0b00ea1 -size 106794 +oid sha256:27195dcb52a71727343a642966a3ca28e64f8b76b40db9bebcafacee93f1c37e +size 106772 diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-pseudo.Set-up.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-pseudo.Set-up.png index 7c5fb0f79c..cb61239bda 100644 --- a/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-pseudo.Set-up.png +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/test_secureBackupRecoveryKeyScreen-iPhone-16-pseudo.Set-up.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8db80a8ad96649272dac60a2a95aade580a6b5b09cbb79c49e81d210d41b4f0c -size 121490 +oid sha256:36b4473d0cf4c33c80c8290cb389361078fe64ab89d40fd5d5817ecd95d6a338 +size 121446