fix: restore account button, fix double border, logo, gradient, editor buttons
Build and Deploy Verso / deploy (push) Successful in 14m48s

- project-list-ds-nav.scss: remove display:none for .nav-item-account on
  desktop — it was hidden because the sidebar handled it, but now the sidebar
  no longer has the account icon so this made it invisible everywhere
- logged-in-items / nav-dropdown-menu: show User icon alongside 'Account'
  text in navbar dropdown so it's recognisable as an account button
- Lumière: remove border-top from .ds-nav-verso-logo (was doubling up with
  .ds-nav-sidebar-lower border)
- Logo hover: drop scale transform in both themes, use filter:brightness only
- Gradient: drop background-attachment:fixed (unreliable in scroll containers);
  switch to circle gradients at 0.60/0.45 opacity; base colour #e8f5f2
- Editor ide-lumiere: rounded square (7px) on .ol-cm-toolbar-button with teal
  hover/active states to match the Lumière design language

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
claude
2026-06-11 14:27:40 +00:00
parent 5fa73fa8e3
commit fc535590eb
5 changed files with 40 additions and 21 deletions
@@ -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')}
</NavLinkItem>
<NavDropdownMenu
title={t('Account')}
title={<><User size={20} className="me-1" />{t('Account')}</>}
className="nav-item-account"
onToggle={nextShow => {
if (nextShow) {
@@ -9,7 +9,7 @@ export default function NavDropdownMenu({
children,
onToggle,
}: {
title: string
title: ReactNode
className?: string
children: ReactNode
onToggle?: (nextShow: boolean) => void
@@ -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
@@ -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 {
@@ -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 ────────────────────────────────────────────────────────────