From 37c158165307f50d8ef0e22caefc2d7d26ddc8c1 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Fri, 10 Apr 2026 14:13:02 +0200
Subject: [PATCH] Update sidebar background color to `canvas-50` for improved
 visual consistency across components

---
 web/components/page-base.tsx              | 2 +-
 web/components/profiles/profiles-home.tsx | 2 +-
 web/styles/globals.css                    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/components/page-base.tsx b/web/components/page-base.tsx
index a597c1df..e6717fde 100644
--- a/web/components/page-base.tsx
+++ b/web/components/page-base.tsx
@@ -93,7 +93,7 @@ export function PageBase(props: {
         ) : (
           <Sidebar
             navigationOptions={desktopSidebarOptions}
-            className="sticky top-0 hidden self-start px-2 lg:col-span-2 lg:flex sidebar-nav bg-canvas-25"
+            className="sticky top-0 hidden self-start px-2 lg:col-span-2 lg:flex sidebar-nav bg-canvas-50"
           />
         )}
         <main
diff --git a/web/components/profiles/profiles-home.tsx b/web/components/profiles/profiles-home.tsx
index 265d954c..e84b4123 100644
--- a/web/components/profiles/profiles-home.tsx
+++ b/web/components/profiles/profiles-home.tsx
@@ -346,7 +346,7 @@ export function ProfilesHome() {
         )}
       </Col>
       {/* Desktop: filters sidebar on the right */}
-      <div className="hidden lg:block lg:col-span-3 lg:sticky lg:top-4 lg:h-fit text-sm bg-canvas-25 rounded-xl max-h-[calc(100vh-2rem)] overflow-y-auto">
+      <div className="hidden lg:block lg:col-span-3 lg:sticky lg:top-4 lg:h-fit text-sm bg-canvas-50 rounded-xl max-h-[calc(100vh-2rem)] overflow-y-auto">
         {filtersElement}
       </div>
     </div>
diff --git a/web/styles/globals.css b/web/styles/globals.css
index d3118ff0..cc6b5e64 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -122,7 +122,7 @@
     /* Background / Canvas Grey Scale */
     --color-canvas-0: 255 255 255; /* white */
     --color-canvas-25: 245 245 245;
-    --color-canvas-50: 235 235 235;
+    --color-canvas-50: 240 240 240;
     --color-canvas-100: 220 220 220;
     --color-canvas-200: 210 210 210;
     --color-canvas-300: 190 190 190;