From 45c47c1cf861c7d2d0a82d23e5c5186ba348cb68 Mon Sep 17 00:00:00 2001 From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= Date: Sat, 21 Mar 2026 16:46:55 +0100 Subject: [PATCH] refactor(webui): css quality overhaul with scoped styles, class selectors, design tokens - add scoped to all 12 Vue component style blocks - move body/app global styles to index.html - replace all 33 ID CSS selectors with class selectors - add :deep() for parent-child table style propagation - add spacing scale and typography tokens to all themes - replace magic number percentages with spacing variables - add :focus-visible styles for buttons and select - replace hardcoded form widths with max-width constraints - use gap for flex toolbar spacing - remove dead CSS --- ui/web/index.html | 18 ++++++++ ui/web/src/App.vue | 29 +++--------- ui/web/src/assets/themes/catppuccin-latte.css | 11 +++++ ui/web/src/assets/themes/sap-horizon.css | 11 +++++ .../src/assets/themes/tokyo-night-storm.css | 11 +++++ ui/web/src/components/Container.vue | 2 +- .../actions/AddChargingStations.vue | 27 +++++++---- .../components/actions/SetSupervisionUrl.vue | 17 +++++-- .../components/actions/StartTransaction.vue | 14 ++++-- ui/web/src/components/buttons/Button.vue | 11 +++-- .../src/components/buttons/ReloadButton.vue | 6 +-- .../src/components/buttons/ToggleButton.vue | 2 +- .../components/charging-stations/CSData.vue | 24 +++++----- .../components/charging-stations/CSTable.vue | 32 ++++++------- ui/web/src/views/ChargingStationsView.vue | 45 ++++++++++--------- ui/web/src/views/NotFoundView.vue | 6 +-- 16 files changed, 168 insertions(+), 98 deletions(-) diff --git a/ui/web/index.html b/ui/web/index.html index 877bf445..034b547a 100644 --- a/ui/web/index.html +++ b/ui/web/index.html @@ -5,6 +5,24 @@ Simulator Web UI + diff --git a/ui/web/src/App.vue b/ui/web/src/App.vue index 8bf915f2..7883d52b 100644 --- a/ui/web/src/App.vue +++ b/ui/web/src/App.vue @@ -3,6 +3,7 @@ @@ -12,37 +13,19 @@ import Container from '@/components/Container.vue' - diff --git a/ui/web/src/assets/themes/catppuccin-latte.css b/ui/web/src/assets/themes/catppuccin-latte.css index c8da8ff7..44b06b80 100644 --- a/ui/web/src/assets/themes/catppuccin-latte.css +++ b/ui/web/src/assets/themes/catppuccin-latte.css @@ -32,6 +32,17 @@ --color-border-row: var(--ctp-surface0); --color-accent: var(--ctp-lavender); --color-shadow-inset: rgba(0, 0, 0, 0.1); + + /* Spacing */ + --spacing-xs: 0.125rem; + --spacing-sm: 0.25rem; + --spacing-md: 0.5rem; + --spacing-lg: 1rem; + --spacing-xl: 1.5rem; + + /* Typography */ + --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif; + --font-size-sm: 0.875rem; } body { diff --git a/ui/web/src/assets/themes/sap-horizon.css b/ui/web/src/assets/themes/sap-horizon.css index fd0c824d..4365d68a 100644 --- a/ui/web/src/assets/themes/sap-horizon.css +++ b/ui/web/src/assets/themes/sap-horizon.css @@ -37,6 +37,17 @@ --color-border-row: var(--sap-border); --color-accent: var(--sap-brand); --color-shadow-inset: rgba(34, 53, 72, 0.15); + + /* Spacing */ + --spacing-xs: 0.125rem; + --spacing-sm: 0.25rem; + --spacing-md: 0.5rem; + --spacing-lg: 1rem; + --spacing-xl: 1.5rem; + + /* Typography */ + --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif; + --font-size-sm: 0.875rem; } body { diff --git a/ui/web/src/assets/themes/tokyo-night-storm.css b/ui/web/src/assets/themes/tokyo-night-storm.css index 6095f9e3..0b223b54 100644 --- a/ui/web/src/assets/themes/tokyo-night-storm.css +++ b/ui/web/src/assets/themes/tokyo-night-storm.css @@ -33,6 +33,17 @@ --color-border-row: var(--tn-bg-hover); --color-accent: var(--tn-accent); --color-shadow-inset: rgba(0, 0, 0, 0.4); + + /* Spacing */ + --spacing-xs: 0.125rem; + --spacing-sm: 0.25rem; + --spacing-md: 0.5rem; + --spacing-lg: 1rem; + --spacing-xl: 1.5rem; + + /* Typography */ + --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif; + --font-size-sm: 0.875rem; } body { diff --git a/ui/web/src/components/Container.vue b/ui/web/src/components/Container.vue index 0bc72b01..bd6ebf46 100644 --- a/ui/web/src/components/Container.vue +++ b/ui/web/src/components/Container.vue @@ -4,7 +4,7 @@ - diff --git a/ui/web/src/components/actions/StartTransaction.vue b/ui/web/src/components/actions/StartTransaction.vue index c16401d2..ac7f9230 100644 --- a/ui/web/src/components/actions/StartTransaction.vue +++ b/ui/web/src/components/actions/StartTransaction.vue @@ -1,5 +1,5 @@ - diff --git a/ui/web/src/components/buttons/ReloadButton.vue b/ui/web/src/components/buttons/ReloadButton.vue index 385e1454..7126ffbf 100644 --- a/ui/web/src/components/buttons/ReloadButton.vue +++ b/ui/web/src/components/buttons/ReloadButton.vue @@ -12,8 +12,8 @@ defineProps<{ }>() - diff --git a/ui/web/src/components/buttons/ToggleButton.vue b/ui/web/src/components/buttons/ToggleButton.vue index 7fe7d641..694d7502 100644 --- a/ui/web/src/components/buttons/ToggleButton.vue +++ b/ui/web/src/components/buttons/ToggleButton.vue @@ -49,7 +49,7 @@ const click = (): void => { } - diff --git a/ui/web/src/views/NotFoundView.vue b/ui/web/src/views/NotFoundView.vue index 7f800e80..8880d06a 100644 --- a/ui/web/src/views/NotFoundView.vue +++ b/ui/web/src/views/NotFoundView.vue @@ -1,5 +1,5 @@ @@ -8,8 +8,8 @@ import Container from '@/components/Container.vue' -