Design tweaks. (#3645)

* Update the background colour of the VisualList component.

* Update the recovery key field to match the designs.
This commit is contained in:
Doug
2024-12-20 14:13:23 +00:00
committed by GitHub
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 {