mirror of
https://github.com/Novaloop-AG/element-x-ios.git
synced 2026-11-03 16:10:20 +00:00
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:
@@ -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))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+2
-3
@@ -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
|
||||
|
||||
-2
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+34
-17
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user