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.
This commit is contained in:
Doug
2024-10-29 17:39:55 +00:00
committed by GitHub
parent c11e49f962
commit 368226fd57
33 changed files with 107 additions and 102 deletions
@@ -39,37 +39,37 @@ struct SecureBackupKeyBackupScreen: View {
}
private var disableBackupSection: some View {
VStack(spacing: 16) {
BigIcon(icon: \.keyOffSolid)
Text(L10n.screenKeyBackupDisableTitle)
.foregroundColor(.compound.textPrimary)
.font(.compound.headingMDBold)
.multilineTextAlignment(.center)
Text(L10n.screenKeyBackupDisableDescription)
.foregroundColor(.compound.textSecondary)
.font(.compound.bodyMD)
.multilineTextAlignment(.center)
VStack(alignment: .leading, spacing: 10) {
Label {
Text(L10n.screenKeyBackupDisableDescriptionPoint1)
.foregroundColor(.compound.textSecondary)
.font(.compound.bodyMD)
} icon: {
CompoundIcon(\.close)
.foregroundColor(.compound.iconCriticalPrimary)
}
VStack(spacing: 24) {
VStack(spacing: 16) {
BigIcon(icon: \.error, style: .alertSolid)
Label {
Text(L10n.screenKeyBackupDisableDescriptionPoint2(InfoPlistReader.main.bundleDisplayName))
VStack(spacing: 8) {
Text(L10n.screenKeyBackupDisableTitle)
.foregroundColor(.compound.textPrimary)
.font(.compound.headingMDBold)
.multilineTextAlignment(.center)
Text(L10n.screenKeyBackupDisableDescription)
.foregroundColor(.compound.textSecondary)
.font(.compound.bodyMD)
} icon: {
CompoundIcon(\.close)
.multilineTextAlignment(.center)
}
}
VStack(alignment: .leading, spacing: 4) {
VisualListItem(title: L10n.screenKeyBackupDisableDescriptionPoint1,
position: .top) {
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)
}
}
}