Design tweaks.

ElementX/Sources/Other/SwiftUI/Views/VisualListItem.swift

@@ -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))
     }
 }
 

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

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)
             }
         }
     }

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 {