trackslash
VAULT-24 P2

Improve the design of the Settings page

0
All issues

Description

The Settings page (VaultSettingsView) works, but it looks bare and unstructured next to the redesigned Backups pages. Give it a general design pass. Above all, make it easy to tell the sections and rows apart.

What's there now:

  • Three sections: Clipboard Duration on its own with no heading, the three Universal Clipboard toggles, and a lone red Danger Zone row.
  • They run together as one list, and most of the screen below them is empty.

Things to look at:

  • Separation:
    • Give every group a heading.
    • Space the sections clearly apart.
    • Keep row heights and icon tiles consistent, so each section reads as its own card rather than part of one long list.
  • Icons: use a deliberate palette and symbol set, so the icons help tell rows apart.
  • Copy: tighten the wording of every row and footer.
  • Header: consider whether a header fits here, like the Backups pages have (VAULT-19).
  • About: Settings and About are separate items in the sidebar. Consider whether About and Help belong inside Settings.

Related tickets that change this page:

  • Sheets:
    • Universal Clipboard moves into its own sheet (VAULT-30).
    • The Danger Zone becomes a bottom sheet (VAULT-29).
  • Security section: app lock (VAULT-21), app lock password (VAULT-22), auto-lock delay (VAULT-33), erase after failed attempts (VAULT-34), and hiding the vault while the screen is recorded (VAULT-32).
  • Duress vault: per MANIFESTO.md C9, don't add a Settings entry for it (VAULT-23).
  • Clipboard: the clipboard default changes (VAULT-31).
  • Items and codes: defaults for new items (VAULT-35), showing the next code (VAULT-36), and what tapping a code does (VAULT-37).

Lay the page out so these fit without another redesign.

Tests:

  • Today VaultSettingsViewSnapshotTests has one light-mode layout.
  • Add a dark-mode snapshot using .environment(\.colorScheme, …) (see VAULT-14), and a large Dynamic Type snapshot.
  • Take before and after screenshots in the simulator.

Linked issues

3
Relates to VAULT-21 P2 Add an app lock that asks for device authentication Done
Relates to VAULT-29 P2 Redesign the Danger Zone as a bottom sheet like the New Item picker Done
Relates to VAULT-30 P2 Move the Universal Clipboard toggles into their own bottom sheet Done

Sub-issues

0

GitHub

0

No branches or pull requests linked.

Comments

1
Bradley

Fixed in https://github.com/badbundle/vault-app/pull/608 (merged as 88702785).

Page layout:

  • Every Settings section now has a heading and a short footer.
  • Sections are spaced further apart, and every row is the same height.
  • Each section's icons share one colour (clipboard blue, Universal Clipboard indigo, Danger Zone red), from a new SettingsIconColor.
  • Sections are self-contained, so the Security and Codes sections can slot in, with the Danger Zone always last.

Wording:

  • "Clipboard Duration" is now "Clear Clipboard", with options spelled out: "Never", "30 seconds", "1 minute". VoiceOver used to read "1m" as meters.
  • The Danger Zone is now a heading over a red "Delete All Data" row.

Left as they were:

  • I left out a hero header. A prototype only repeated the navigation title and pushed the settings down.
  • About stays its own sidebar item.
  • Universal Clipboard and the Danger Zone sheet are interim until VAULT-30 and VAULT-29.

Tests: new dark-mode and large-text snapshots, and unit tests for the option names.