Restyle Settings pages and add shared UI components#1872
Open
kmcginnes wants to merge 1 commit into
Open
Conversation
f0c7f25 to
866a133
Compare
Replaces SettingsSection with a SettingsPage layout (page header with icon, title, description) and redesigns the General and About pages plus the sidebar with grouped sections, lucide icons, and updated spacing and color tokens. Adds shared components: - AlertDialog: radix-based confirmation modal with media/header/footer slots and a primary-danger Button variant. - Group: bordered item list with variant support (default, danger, success, warning) flowing via context. - LabelledSetting: label/description row that associates with its control via htmlFor and reflects the disabled state. Page and section titles render as h1/h2 for proper heading semantics. Also keeps "Refresh Schema" on one line with a non-breaking space.
866a133 to
a1456e1
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Restyles the Settings pages and introduces the shared UI components they build on. This is the first of two stacked branches — the Styles import/export feature stacks on top in a follow-up PR — so this branch is intentionally scoped to presentation and reusable components, with no behavioral feature work.
Core changes:
SettingsPagelayout replacesSettingsSection. Provides a page header (icon, title, description) and consistent spacing/width for the page body. General, About, and the settings sidebar are reworked onto it with grouped sections, lucide icons, and updated spacing/color tokens.AlertDialog— radix-based confirmation modal with media/header/footer slots, plus aprimary-dangerButton variant.Group— bordered, headed item list with variant support (default, danger, success, warning) flowing via context.LabelledSetting— label/description row that associates with its control viahtmlForand reflects the disabled state.Accessibility: page and section titles render as
h1/h2, and toggle/input rows are now properly label-associated.Tangential: one unrelated one-liner keeps "Refresh Schema" on a single line via a non-breaking space.
How to read
htmlForassociationValidation
pnpm checkspasses (types, lint, format).pnpm testpasses (1895 tests).Related Issues
Check List
pnpm checkspasses with no errors.pnpm testpasses with no failures.