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 f3d442bb3c..378c44d6b7 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 @@ -4,6 +4,7 @@ import type { NavbarSessionUser } from '@/shared/components/types/navbar' import NavLinkItem from '@/shared/components/navbar/nav-link-item' import { AccountMenuItems } from './account-menu-items' import { useSendProjectListMB } from '@/features/project-list/components/project-list-events' +import { User } from '@phosphor-icons/react' export default function LoggedInItems({ sessionUser, @@ -20,7 +21,7 @@ export default function LoggedInItems({ {t('projects')} {t('Account')}} className="nav-item-account" onToggle={nextShow => { if (nextShow) { diff --git a/services/web/frontend/js/shared/components/navbar/nav-dropdown-menu.tsx b/services/web/frontend/js/shared/components/navbar/nav-dropdown-menu.tsx index 9b962238c1..9c213aed6a 100644 --- a/services/web/frontend/js/shared/components/navbar/nav-dropdown-menu.tsx +++ b/services/web/frontend/js/shared/components/navbar/nav-dropdown-menu.tsx @@ -9,7 +9,7 @@ export default function NavDropdownMenu({ children, onToggle, }: { - title: string + title: ReactNode className?: string children: ReactNode onToggle?: (nextShow: boolean) => void diff --git a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss index 7448fa2b61..837f7a82c9 100644 --- a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss +++ b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss @@ -106,6 +106,32 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi border-bottom: 1px solid rgba($lum-teal, 0.15); } +// ── CodeMirror toolbar buttons — rounded square style ───────────────────── + +[data-lumiere='true'] .ol-cm-toolbar { + // Source editor formatting buttons (Bold, Italic, Link, etc.) + .ol-cm-toolbar-button { + border-radius: 7px !important; + transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; + + &:hover:not(:disabled) { + background-color: rgba(42, 157, 143, 0.10) !important; + color: $lum-teal !important; + } + + &.active, + &[aria-pressed='true'] { + background-color: rgba(42, 157, 143, 0.18) !important; + color: $lum-teal !important; + } + } + + // Toolbar group dividers + .ol-cm-toolbar-button-group { + gap: 2px; + } +} + // ── 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-ds-nav.scss b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss index e9eb4f4368..6f3b9a4315 100644 --- a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss +++ b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss @@ -60,7 +60,6 @@ body { } @include media-breakpoint-up(lg) { - .nav-item-account, .nav-item-help { display: none; } @@ -250,11 +249,10 @@ body { .ds-nav-verso-logo { margin-left: calc(-1 * var(--spacing-05)); margin-right: calc(-1 * var(--spacing-08)); - transition: transform 0.2s ease, filter 0.2s ease; + transition: filter 0.2s ease; &:hover { - transform: scale(1.04); - filter: brightness(1.1); + filter: brightness(1.15); } img { diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss index 833eea15cc..9caed04f3f 100644 --- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss +++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss @@ -200,14 +200,13 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi } .ds-nav-verso-logo { - border-top: 1px solid $lum-border; + // No border-top here — .ds-nav-sidebar-lower already has one padding-top: 0.6rem; margin-top: 0.25rem; - transition: transform 0.2s ease, filter 0.2s ease; + transition: filter 0.2s ease; &:hover { - transform: scale(1.04); - filter: brightness(1.08) drop-shadow(0 2px 6px rgba($lum-teal, 0.25)); + filter: brightness(1.1) drop-shadow(0 1px 4px rgba($lum-teal, 0.2)); } } @@ -234,27 +233,22 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi // ══════════════════════════════════════════════════════════════════════════ .project-ds-nav-content { + // Grainy gradient: noise tile on top, two strong radial orbs below. + // Using scroll (not fixed) so the gradient renders correctly inside the + // overflow:auto scroll container. background-image: #{$lum-noise}, - radial-gradient(ellipse 90% 70% at 95% -5%, rgba($lum-teal, 0.45) 0%, transparent 55%), - radial-gradient(ellipse 80% 60% at -5% 105%, rgba($lum-blue, 0.32) 0%, transparent 55%), - radial-gradient(ellipse 60% 50% at 50% 50%, rgba($lum-teal, 0.06) 0%, transparent 70%); + radial-gradient(circle 700px at 110% -80px, rgba($lum-teal, 0.60) 0%, transparent 100%), + radial-gradient(circle 600px at -120px 110%, rgba($lum-blue, 0.45) 0%, transparent 100%); background-size: 200px 200px, cover, - cover, cover; background-repeat: repeat, no-repeat, - no-repeat, no-repeat; - background-attachment: - scroll, - fixed, - fixed, - fixed; - background-color: #f0f7f5; + background-color: #e8f5f2; } // ── Page header ────────────────────────────────────────────────────────────