A thorough review of src/index.html and src/styles/main.css identified several structural and visual inconsistencies across buttons in all 5 wizard stages, header navigation, modals, and toolbars:
Key Inconsistencies & Root Causes Identified
Global Default CSS Clashes:
button.primary currently defines margin-top: 14px; in its base rule (main.css:135). When .primary buttons are placed inside horizontal flex rows alongside .secondary or .danger buttons (e.g., in .modal-actions, .chartread-actions, multi-pass averaging #btnFinishAndAverage, and preset dialogs), the .primary button inherits an unexpected 14px top offset, breaking vertical alignment.
button.danger defines padding: 10px 20px; font-size: 1rem; without an explicit height: 36px (main.css:476), causing it to render at a taller height and different baseline than adjacent .primary and .secondary buttons.
button.secondary has padding: 0 16px; height: 36px; font-size: default; while inline small buttons override this with arbitrary style="font-size: 0.75rem; padding: 2px 8px;".
Inline Style Fragmentation (style="..."):
Over 10 buttons across src/index.html use hardcoded inline styles for font size, padding, and margins instead of standardized reusable CSS utility classes (e.g., #btnToggleAllHelp, #btn-import-dataset, #btnOpenExisting, #btnToggleLabelEdit, #btnSavePresetModal, #btnOpenPresetsDialog).
.btn-icon (width: 34px; height: 34px) is 2px shorter than standard form inputs and select elements (36px), creating noticeable stair-stepping in the printer control row (#btnRefreshPrinters next to #printerSelect).
Missing Uniform Button Sizing Hierarchy:
ICCery lacks standardized button tier classes (.btn-sm, .btn-md, .btn-lg, .btn-icon), resulting in custom ad-hoc styling for toolbars, inline browse buttons, and modal footers.
Specific Targets to Address
Target 1: Global Design Tokens & Base Button Classes (src/styles/main.css)
Remove margin-top: 14px from the base button.primary rule; move external margins strictly to .stage-actions or form container layouts.
Standardize #openSettingsBtn, #openAboutBtn, #btnSavePresetModal, and #btnOpenPresetsDialog icon buttons to consistent .btn-icon / .btn-sm sizing and hover states.
Align #presetSelect height with standard 36px form input height.
Target 3: Stage 1 — Target Generation
Standardize header actions (#btnToggleAllHelp, #btn-import-dataset, #btnOpenExisting) to .btn-sm without inline styles.
Standardize file/profile browse buttons (#btnBrowse, #btnBrowsePrecondProfile) to standard 36px height matching their adjacent text inputs.
Wrap primary action #btnGenerate in a consistent .stage-actions container.
Target 4: Stage 2 — Print Layout & Direct Raw Printing
Standardize #btnToggleLabelEdit to .btn-sm.
Align #printerSelect, #btnRefreshPrinters (.btn-icon), and #btnPrinterProperties (.btn) to matching 36px height in .printer-controls-row.
Standardize orientation toggle buttons (.btn-toggle) to 36px height.
Align .print-actions-row (#btnPrintAll and #btnAdvanceToStage3).
Standardize #btnDetectInstruments height to 36px matching #chartreadInstrumentSelect.
Normalize all action buttons in .chartread-actions (#btnStartRead, #btnCalibrate, #btnDoneRead, #btnAccept, #btnRetry, #btnUndo, #btnSkip, #btnCancel) so they share identical 36px height, font-size, and vertical baseline alignment.
Normalize .modal-actions across #settingsDialog, #aboutDialog, #savePresetDialog, and #managePresetsDialog with unified right-aligned layout and consistent button heights.
### Comprehensive UI Button Layout & Styling Audit
A thorough review of `src/index.html` and `src/styles/main.css` identified several structural and visual inconsistencies across buttons in all 5 wizard stages, header navigation, modals, and toolbars:
---
### Key Inconsistencies & Root Causes Identified
1. **Global Default CSS Clashes**:
- `button.primary` currently defines `margin-top: 14px;` in its base rule (`main.css:135`). When `.primary` buttons are placed inside horizontal flex rows alongside `.secondary` or `.danger` buttons (e.g., in `.modal-actions`, `.chartread-actions`, multi-pass averaging `#btnFinishAndAverage`, and preset dialogs), the `.primary` button inherits an unexpected 14px top offset, breaking vertical alignment.
- `button.danger` defines `padding: 10px 20px; font-size: 1rem;` without an explicit `height: 36px` (`main.css:476`), causing it to render at a taller height and different baseline than adjacent `.primary` and `.secondary` buttons.
- `button.secondary` has `padding: 0 16px; height: 36px; font-size: default;` while inline small buttons override this with arbitrary `style="font-size: 0.75rem; padding: 2px 8px;"`.
2. **Inline Style Fragmentation (`style="..."`)**:
- Over 10 buttons across `src/index.html` use hardcoded inline styles for font size, padding, and margins instead of standardized reusable CSS utility classes (e.g., `#btnToggleAllHelp`, `#btn-import-dataset`, `#btnOpenExisting`, `#btnToggleLabelEdit`, `#btnSavePresetModal`, `#btnOpenPresetsDialog`).
- `.btn-icon` (`width: 34px; height: 34px`) is 2px shorter than standard form inputs and select elements (`36px`), creating noticeable stair-stepping in the printer control row (`#btnRefreshPrinters` next to `#printerSelect`).
3. **Missing Uniform Button Sizing Hierarchy**:
- ICCery lacks standardized button tier classes (`.btn-sm`, `.btn-md`, `.btn-lg`, `.btn-icon`), resulting in custom ad-hoc styling for toolbars, inline browse buttons, and modal footers.
---
### Specific Targets to Address
#### Target 1: Global Design Tokens & Base Button Classes (`src/styles/main.css`)
* [ ] Remove `margin-top: 14px` from the base `button.primary` rule; move external margins strictly to `.stage-actions` or form container layouts.
* [ ] Standardize base button metrics (`box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-weight: 500; cursor: pointer; transition: all 0.15s ease;`).
* [ ] Define explicit, consistent height & typography tiers:
* **Standard / Medium (`.btn` / `.btn-md` / default)**: `height: 36px; padding: 0 16px; font-size: 0.875rem (14px); border-radius: 6px;`
* **Small / Compact (`.btn-sm`)**: `height: 28px; padding: 0 10px; font-size: 0.78rem (12.5px); border-radius: 4px;`
* **Large / Stage Action (`.btn-lg`)**: `height: 40px; padding: 0 20px; font-size: 0.95rem (15px); font-weight: 600; border-radius: 6px;`
* **Square Icon (`.btn-icon`)**: `width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 6px;`
* [ ] Normalize color variants:
* `.primary` (`background: var(--accent-color); color: #fff; border: none;`)
* `.secondary` (`background: #2b2b36; color: #eee; border: 1px solid var(--border-color);`)
* `.danger` (`background: #c62828; color: #fff; border: none; height: 36px;`)
* `.ghost` / `.icon-btn` (`background: transparent; border: none; color: #ccc;`)
#### Target 2: Header, Sidebar & Stepper (`src/index.html`)
* [ ] Standardize `#openSettingsBtn`, `#openAboutBtn`, `#btnSavePresetModal`, and `#btnOpenPresetsDialog` icon buttons to consistent `.btn-icon` / `.btn-sm` sizing and hover states.
* [ ] Align `#presetSelect` height with standard 36px form input height.
#### Target 3: Stage 1 — Target Generation
* [ ] Standardize header actions (`#btnToggleAllHelp`, `#btn-import-dataset`, `#btnOpenExisting`) to `.btn-sm` without inline styles.
* [ ] Standardize file/profile browse buttons (`#btnBrowse`, `#btnBrowsePrecondProfile`) to standard 36px height matching their adjacent text inputs.
* [ ] Wrap primary action `#btnGenerate` in a consistent `.stage-actions` container.
#### Target 4: Stage 2 — Print Layout & Direct Raw Printing
* [ ] Standardize `#btnToggleLabelEdit` to `.btn-sm`.
* [ ] Align `#printerSelect`, `#btnRefreshPrinters` (`.btn-icon`), and `#btnPrinterProperties` (`.btn`) to matching 36px height in `.printer-controls-row`.
* [ ] Standardize orientation toggle buttons (`.btn-toggle`) to 36px height.
* [ ] Align `.print-actions-row` (`#btnPrintAll` and `#btnAdvanceToStage3`).
#### Target 5: Stage 3 — Target Measurement (`chartread`)
* [ ] Standardize `#btnDetectInstruments` height to 36px matching `#chartreadInstrumentSelect`.
* [ ] Normalize all action buttons in `.chartread-actions` (`#btnStartRead`, `#btnCalibrate`, `#btnDoneRead`, `#btnAccept`, `#btnRetry`, `#btnUndo`, `#btnSkip`, `#btnCancel`) so they share identical 36px height, font-size, and vertical baseline alignment.
* [ ] Normalize multi-pass averaging footer buttons (`#btnMeasureAnotherSheet`, `#btnFinishAndAverage`).
#### Target 6: Stage 4 & 5 — Profiling & Verification
* [ ] Normalize `#btnCreateProfile`, `#btnGoToVerify`, and `#btnVerify` stage actions with consistent `.btn-lg` styling.
#### Target 7: Dialogs & Modals (Settings, About, Presets)
* [ ] Normalize `.modal-actions` across `#settingsDialog`, `#aboutDialog`, `#savePresetDialog`, and `#managePresetsDialog` with unified right-aligned layout and consistent button heights.
gronod
changed title from enhancement : UI buttons vary in sizes and style to enhancement: Standardize UI Button Sizing, Hierarchy, and Alignment across all Views (#177)2026-09-02 01:01:54 +01:00
Implemented in enh/177-button-standardization and merged to development. The button sizing hierarchy from src/styles/main.css is now enforced across all stages:
Removed remaining inline style overrides from src/index.html.
Standardised icon buttons on .btn-icon-sq (36×36 px).
Added CSS custom properties for button heights/radii.
Verified vertical alignment in printer controls, chartread actions, modals, and stage action rows.
Implemented in `enh/177-button-standardization` and merged to `development`. The button sizing hierarchy from `src/styles/main.css` is now enforced across all stages:
- Removed remaining inline `style` overrides from `src/index.html`.
- Standardised icon buttons on `.btn-icon-sq` (36×36 px).
- Added CSS custom properties for button heights/radii.
- Verified vertical alignment in printer controls, chartread actions, modals, and stage action rows.
Closes #177.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Comprehensive UI Button Layout & Styling Audit
A thorough review of
src/index.htmlandsrc/styles/main.cssidentified several structural and visual inconsistencies across buttons in all 5 wizard stages, header navigation, modals, and toolbars:Key Inconsistencies & Root Causes Identified
Global Default CSS Clashes:
button.primarycurrently definesmargin-top: 14px;in its base rule (main.css:135). When.primarybuttons are placed inside horizontal flex rows alongside.secondaryor.dangerbuttons (e.g., in.modal-actions,.chartread-actions, multi-pass averaging#btnFinishAndAverage, and preset dialogs), the.primarybutton inherits an unexpected 14px top offset, breaking vertical alignment.button.dangerdefinespadding: 10px 20px; font-size: 1rem;without an explicitheight: 36px(main.css:476), causing it to render at a taller height and different baseline than adjacent.primaryand.secondarybuttons.button.secondaryhaspadding: 0 16px; height: 36px; font-size: default;while inline small buttons override this with arbitrarystyle="font-size: 0.75rem; padding: 2px 8px;".Inline Style Fragmentation (
style="..."):src/index.htmluse hardcoded inline styles for font size, padding, and margins instead of standardized reusable CSS utility classes (e.g.,#btnToggleAllHelp,#btn-import-dataset,#btnOpenExisting,#btnToggleLabelEdit,#btnSavePresetModal,#btnOpenPresetsDialog)..btn-icon(width: 34px; height: 34px) is 2px shorter than standard form inputs and select elements (36px), creating noticeable stair-stepping in the printer control row (#btnRefreshPrintersnext to#printerSelect).Missing Uniform Button Sizing Hierarchy:
.btn-sm,.btn-md,.btn-lg,.btn-icon), resulting in custom ad-hoc styling for toolbars, inline browse buttons, and modal footers.Specific Targets to Address
Target 1: Global Design Tokens & Base Button Classes (
src/styles/main.css)margin-top: 14pxfrom the basebutton.primaryrule; move external margins strictly to.stage-actionsor form container layouts.box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-weight: 500; cursor: pointer; transition: all 0.15s ease;)..btn/.btn-md/ default):height: 36px; padding: 0 16px; font-size: 0.875rem (14px); border-radius: 6px;.btn-sm):height: 28px; padding: 0 10px; font-size: 0.78rem (12.5px); border-radius: 4px;.btn-lg):height: 40px; padding: 0 20px; font-size: 0.95rem (15px); font-weight: 600; border-radius: 6px;.btn-icon):width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 6px;.primary(background: var(--accent-color); color: #fff; border: none;).secondary(background: #2b2b36; color: #eee; border: 1px solid var(--border-color);).danger(background: #c62828; color: #fff; border: none; height: 36px;).ghost/.icon-btn(background: transparent; border: none; color: #ccc;)Target 2: Header, Sidebar & Stepper (
src/index.html)#openSettingsBtn,#openAboutBtn,#btnSavePresetModal, and#btnOpenPresetsDialogicon buttons to consistent.btn-icon/.btn-smsizing and hover states.#presetSelectheight with standard 36px form input height.Target 3: Stage 1 — Target Generation
#btnToggleAllHelp,#btn-import-dataset,#btnOpenExisting) to.btn-smwithout inline styles.#btnBrowse,#btnBrowsePrecondProfile) to standard 36px height matching their adjacent text inputs.#btnGeneratein a consistent.stage-actionscontainer.Target 4: Stage 2 — Print Layout & Direct Raw Printing
#btnToggleLabelEditto.btn-sm.#printerSelect,#btnRefreshPrinters(.btn-icon), and#btnPrinterProperties(.btn) to matching 36px height in.printer-controls-row..btn-toggle) to 36px height..print-actions-row(#btnPrintAlland#btnAdvanceToStage3).Target 5: Stage 3 — Target Measurement (
chartread)#btnDetectInstrumentsheight to 36px matching#chartreadInstrumentSelect..chartread-actions(#btnStartRead,#btnCalibrate,#btnDoneRead,#btnAccept,#btnRetry,#btnUndo,#btnSkip,#btnCancel) so they share identical 36px height, font-size, and vertical baseline alignment.#btnMeasureAnotherSheet,#btnFinishAndAverage).Target 6: Stage 4 & 5 — Profiling & Verification
#btnCreateProfile,#btnGoToVerify, and#btnVerifystage actions with consistent.btn-lgstyling.Target 7: Dialogs & Modals (Settings, About, Presets)
.modal-actionsacross#settingsDialog,#aboutDialog,#savePresetDialog, and#managePresetsDialogwith unified right-aligned layout and consistent button heights.enhancement : UI buttons vary in sizes and styleto enhancement: Standardize UI Button Sizing, Hierarchy, and Alignment across all Views (#177)Implemented in
enh/177-button-standardizationand merged todevelopment. The button sizing hierarchy fromsrc/styles/main.cssis now enforced across all stages:styleoverrides fromsrc/index.html..btn-icon-sq(36×36 px).Closes #177.