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({ 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;