From 9e618280b1eddf41adda4675384ad397a6ee0494 Mon Sep 17 00:00:00 2001
From: claude <claude@verso>
Date: Thu, 11 Jun 2026 14:59:48 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20restore=20theme=20toggle=20in=20navbar?=
 =?UTF-8?q?=20account=20menu,=20Lumi=C3=A8re=20button=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- logged-in-items: pass showThemeToggle to AccountMenuItems so the theme
  switcher is accessible from the top-right navbar (was lost when the
  sidebar account icons were removed); AccountMenuItems already gates on
  hasOverallThemes so it's a no-op on non-themed pages
- project-list-lumiere: restyle Account + Admin navbar buttons — rounded
  square (8px) instead of pill, teal resting tint on Account, subtle
  teal border on hover; matches Lumière design language
- ide-lumiere: extend rounded-square styling to all toolbar action buttons
  (Share, Present, History, Layout, File/Edit/Help menu buttons) via
  .ide-redesign-toolbar-actions and .ide-redesign-toolbar-menu selectors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/navbar/logged-in-items.tsx     |  1 +
 .../stylesheets/pages/editor/ide-lumiere.scss | 31 +++++++++++++++++
 .../pages/project-list-lumiere.scss           | 34 +++++++++++++++----
 3 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/services/web/frontend/js/shared/components/navbar/logged-in-items.tsx b/services/web/frontend/js/shared/components/navbar/logged-in-items.tsx
index 378c44d6b7..f7d1b1c1ea 100644
--- a/services/web/frontend/js/shared/components/navbar/logged-in-items.tsx
+++ b/services/web/frontend/js/shared/components/navbar/logged-in-items.tsx
@@ -35,6 +35,7 @@ export default function LoggedInItems({
         <AccountMenuItems
           sessionUser={sessionUser}
           showSubscriptionLink={showSubscriptionLink}
+          showThemeToggle
         />
       </NavDropdownMenu>
     </>
diff --git a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
index 837f7a82c9..5ca413e7c7 100644
--- a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
+++ b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
@@ -132,6 +132,37 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
   }
 }
 
+// ── Toolbar action buttons (Share, Present, History, Layout, etc.) ─────────
+// Targets the right-hand action area of the toolbar; covers OLButton (btn),
+// subdued icon buttons, and the layout dropdown toggle.
+
+[data-lumiere='true'] .ide-redesign-toolbar-actions {
+  .btn {
+    border-radius: 7px !important;
+  }
+
+  .ide-redesign-toolbar-button-subdued,
+  .ide-redesign-toolbar-button-icon {
+    border-radius: 7px !important;
+    &:hover:not(:disabled) {
+      background-color: rgba(42, 157, 143, 0.10) !important;
+      color: $lum-teal !important;
+    }
+  }
+
+  .layout-dropdown .dropdown-toggle {
+    border-radius: 7px !important;
+  }
+}
+
+// Also round the left-hand menu-bar subdued buttons (File, Edit, Help…)
+[data-lumiere='true'] .ide-redesign-toolbar-menu {
+  .ide-redesign-toolbar-button-subdued,
+  .ide-redesign-toolbar-button-icon {
+    border-radius: 7px !important;
+  }
+}
+
 // ── Compile button — teal gradient ────────────────────────────────────────
 // .compile-button-group wraps the Recompile button in the toolbar actions
 
diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
index 9caed04f3f..b80e854c96 100644
--- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
+++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
@@ -39,22 +39,44 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
       z-index: 10;
     }
 
-    // Nav link pill hover
+    // Nav link hover — shared base
     .navbar-nav > li > .nav-link,
     .navbar-nav > li > .dropdown-toggle {
-      border-color: transparent !important;
-      border-radius: 20px;
-      transition: background-color 0.15s ease, color 0.15s ease;
+      border-radius: 8px !important;
+      transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+      border: 1px solid transparent !important;
 
       &:hover,
       &:focus,
       &.show {
-        background-color: rgba($lum-teal, 0.08) !important;
+        background-color: rgba($lum-teal, 0.09) !important;
         color: $lum-teal !important;
-        border-color: transparent !important;
+        border-color: rgba($lum-teal, 0.18) !important;
       }
     }
 
+    // Account button — slightly more prominent (has a resting tint)
+    .nav-item-account > .dropdown-toggle {
+      background-color: rgba($lum-teal, 0.06) !important;
+      color: $lum-text !important;
+      font-weight: 500;
+
+      &:hover,
+      &:focus,
+      &.show {
+        background-color: rgba($lum-teal, 0.14) !important;
+        color: $lum-teal !important;
+        border-color: rgba($lum-teal, 0.25) !important;
+      }
+    }
+
+    // Admin button
+    .subdued > .dropdown-toggle {
+      color: $lum-text-sub !important;
+      font-size: 0.8rem;
+      font-weight: 500;
+    }
+
     .navbar-title {
       color: $lum-text !important;
       font-weight: 600;