From aa8d40bc4e66e737c8e20e88715fdffc420a521f Mon Sep 17 00:00:00 2001 From: lukas Date: Sun, 13 Sep 2026 20:35:00 +0200 Subject: [PATCH] Fix icon colors being overridden, and expand the palette MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The .empty svg rule (styling the OrdersIcon/BasketIcon) was a plain descendant selector, so it also matched — and, with higher specificity than inherited color, overrode — the backdrop's own food-icon svgs nested inside the same .empty box. Scope it to a direct child (> svg) so it only targets the actual empty-state icon. Also expands the backdrop palette from 3 to 6 colors (adds basil, berry, and cocoa) for more variety across the icons. Co-Authored-By: Claude Sonnet 5 --- src/components/ordering/MenuBackdrop.tsx | 9 ++++++++- src/components/orders/OrdersListView.module.scss | 4 +++- src/routes/basket.module.scss | 4 +++- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/ordering/MenuBackdrop.tsx b/src/components/ordering/MenuBackdrop.tsx index 379a83f..cfd96a1 100644 --- a/src/components/ordering/MenuBackdrop.tsx +++ b/src/components/ordering/MenuBackdrop.tsx @@ -46,7 +46,14 @@ const FriesIcon = () => ( ) const ICONS = [PizzaIcon, BurgerIcon, FriesIcon] -const ICON_COLORS = ['#e2725b', '#d9a441', '#e8c468'] +const ICON_COLORS = [ + '#e2725b', // tomato + '#d9a441', // crust + '#e8c468', // cheese + '#7a9d6e', // basil + '#a5678f', // berry + '#8a5a44', // cocoa +] // Fixed, hand-placed positions rather than random ones — random values would // differ between the server-rendered and first client-rendered HTML and diff --git a/src/components/orders/OrdersListView.module.scss b/src/components/orders/OrdersListView.module.scss index 37f5a5d..d21b6b9 100644 --- a/src/components/orders/OrdersListView.module.scss +++ b/src/components/orders/OrdersListView.module.scss @@ -39,7 +39,9 @@ animation: empty-state-enter 0.32s cubic-bezier(0.2, 0, 0, 1) both; } - svg { + // Direct child only — a plain descendant selector would also catch the + // backdrop's own icons (see MenuBackdrop), overriding their per-icon color. + > svg { width: 2.5rem; height: 2.5rem; margin-bottom: $space-2; diff --git a/src/routes/basket.module.scss b/src/routes/basket.module.scss index dd35430..0822f76 100644 --- a/src/routes/basket.module.scss +++ b/src/routes/basket.module.scss @@ -33,7 +33,9 @@ background: $color-surface; overflow: hidden; - svg { + // Direct child only — a plain descendant selector would also catch the + // backdrop's own icons (see MenuBackdrop), overriding their per-icon color. + > svg { width: 2.5rem; height: 2.5rem; margin-bottom: $space-2;