Files

T

adebisi-fa 930af97f05 feat(ui): rebuild all tools pages on Carbon Design System web components

- @carbon/web-components v2.50.0 via the IBM CDN (version-pinned);
  @carbon/styles CSS + IBM Plex Sans for tokens/typography
- landing: Carbon header + cds-tile tool cards
- fingerprint wizard: Carbon-styled form controls, cds-progress-bar scan
  progress, cds-tag badges, cds-inline-notification replacing swal
- cropper: cds-toast replacing toastr, cds-checkbox review reasons,
  cds-tag process badge; vue-croppa pad kept in the Carbon layout
- Bootstrap 4, swal, toastr and jQuery removed from all pages
- behavior frozen: same flows, endpoints, validation and copy

2026-10-01 02:03:07 +01:00

1.7 KiB

Raw Permalink Blame History

Proposal: carbon-ui-redesign

Why

The tools pages are styled with ad-hoc Bootstrap 4 overrides and ad-hoc dialogs (swal/toastr). Adopting the Carbon Design System gives the two tools a single professional design language (IBM Plex typography, Carbon components, Carbon tokens) consistent with the wider YOUreka ecosystem.

What Changes

BREAKING (visual only): All three surfaces — landing, /fingerprint wizard, /cropper — are rebuilt on Carbon Design System web components (@carbon/web-components v2.50.0 via the IBM CDN, version-pinned) with IBM Plex Sans typography and Carbon tokens for layout/colors.
Bootstrap 4, swal, toastr and jQuery are removed from the pages; errors and confirmations surface as Carbon inline notifications and toasts.
Form fields use Carbon-styled native controls (text input, select, checkbox, textarea) so Vue state bindings are unchanged; buttons, tags, notifications, toasts, progress bar and tiles are Carbon web components.
Behavior is frozen: flows, endpoints, validation and copy stay exactly as they are. The vue-croppa crop pad is kept (no Carbon equivalent), framed in a Carbon tile/panel.

Capabilities

New Capabilities

(none)

Modified Capabilities

tools-app: adds a requirement that the tools UI is built on Carbon Design System web components with Carbon notifications.

Impact

Pages and style.css rewritten; app.js files adapted (notification/toast models replace swal/toastr calls; Vue.config.ignoredElements for cds-*).
No server-side changes; no new npm dependencies; component JS + Plex font + Carbon CSS delivered via CDN (IBM CDN for components, jsdelivr for @carbon/styles, Google Fonts for Plex).

1.7 KiB Raw Permalink Blame History