From 15d01f375628d3c1ead05d48a09c6509c508a848 Mon Sep 17 00:00:00 2001 From: Luca <102960244+Luca-Timo@users.noreply.github.com> Date: Mon, 11 May 2026 11:07:55 +0200 Subject: [PATCH] fix(features-tab): icon tiles + preview pills follow CI accent --- .../admin/CustomerDashboardBrandingCard.tsx | 2 +- .../settings/components/FeatureCard.tsx | 7 +++-- .../settings/components/SidebarPreview.tsx | 7 +++-- .../features/settings/tabs/FeaturesTab.tsx | 2 +- frontend/src/index.css | 29 +++++++++++++++++++ 5 files changed, 41 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/admin/CustomerDashboardBrandingCard.tsx b/frontend/src/components/admin/CustomerDashboardBrandingCard.tsx index 27a8c92d..63d79b81 100644 --- a/frontend/src/components/admin/CustomerDashboardBrandingCard.tsx +++ b/frontend/src/components/admin/CustomerDashboardBrandingCard.tsx @@ -120,7 +120,7 @@ export const CustomerDashboardBrandingCard: React.FC = () => { return (
-
+
diff --git a/frontend/src/features/settings/components/FeatureCard.tsx b/frontend/src/features/settings/components/FeatureCard.tsx index 196a20ce..c956b08d 100644 --- a/frontend/src/features/settings/components/FeatureCard.tsx +++ b/frontend/src/features/settings/components/FeatureCard.tsx @@ -46,12 +46,15 @@ export const FeatureCard: React.FC = ({ )} >
- {/* Icon tile */} + {/* Icon tile — enabled state uses the admin's CI accent (via + .bg-accent-soft / .text-accent-dark from index.css) so the + tile colour follows the configured brand palette. Previously + hard-coded to Tailwind's primary-50 green. */}
diff --git a/frontend/src/features/settings/components/SidebarPreview.tsx b/frontend/src/features/settings/components/SidebarPreview.tsx index b012e724..16487e0b 100644 --- a/frontend/src/features/settings/components/SidebarPreview.tsx +++ b/frontend/src/features/settings/components/SidebarPreview.tsx @@ -60,8 +60,11 @@ export const SidebarPreview: React.FC = ({ staged }) => { key={item.key} className={clsx( 'inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md text-xs font-medium border', + // Feature-driven pills pick up the admin's CI accent via + // .bg-accent-soft / .border-accent-soft / .text-accent-dark + // — previously hard-coded to Tailwind primary-50 green. item.featureDriven - ? 'border-primary-200 bg-primary-50 text-primary-800 dark:border-primary-800 dark:bg-primary-900/30 dark:text-primary-200' + ? 'border-accent-soft bg-accent-soft text-accent-dark' : 'border-neutral-200 bg-neutral-50 text-neutral-700 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300', )} > @@ -73,7 +76,7 @@ export const SidebarPreview: React.FC = ({ staged }) => {

{t( 'settings.features.preview.legend', - 'Green tinted items are controlled by toggles above.', + 'Accent-tinted items are controlled by toggles above.', )}

diff --git a/frontend/src/features/settings/tabs/FeaturesTab.tsx b/frontend/src/features/settings/tabs/FeaturesTab.tsx index 62ac2e7e..03983d7d 100644 --- a/frontend/src/features/settings/tabs/FeaturesTab.tsx +++ b/frontend/src/features/settings/tabs/FeaturesTab.tsx @@ -69,7 +69,7 @@ export const FeaturesTab: React.FC = () => { {/* Header */}
-
+
diff --git a/frontend/src/index.css b/frontend/src/index.css index 51d209eb..d18f03ee 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -300,6 +300,35 @@ color: var(--color-accent); } + .text-accent-dark { + color: var(--color-accent-dark); + } + + /* + * Low-opacity accent fills used as "icon tile" / "tinted chip" + * backgrounds (Features tab feature icons, Sidebar Preview pills, + * Customer dashboard branding card header). Picks up the admin's CI + * accent automatically — previously these places used Tailwind's + * hardcoded `primary-50` palette which stayed green regardless of + * branding settings. + * + * color-mix is supported on every browser we ship (Chromium 111+, + * Safari 16.2+, Firefox 113+ — see baseline). Older browsers fall + * back to the var(--color-accent-dark) below. + */ + .bg-accent-soft { + background-color: var(--color-accent-dark); + background-color: color-mix(in srgb, var(--color-accent-dark) 12%, transparent); + } + .dark .bg-accent-soft { + background-color: var(--color-accent-dark); + background-color: color-mix(in srgb, var(--color-accent-dark) 28%, transparent); + } + .border-accent-soft { + border-color: var(--color-accent-dark); + border-color: color-mix(in srgb, var(--color-accent-dark) 30%, transparent); + } + /* * Selected-tile state for picker grids (Gallery Layout, Filter Bar Style, * Header Style, Hero Divider, Theme Presets). Used in place of the dim