From 676663ffcc61161cdd5e583b80717ec3534e4c7e Mon Sep 17 00:00:00 2001 From: claude Date: Tue, 2 Jun 2026 21:28:50 +0000 Subject: [PATCH] Branding polish: blue rail accent, drop fork link, bigger login logo, dashboard logo placement - Editor rail: the active item used the Overleaf green accent. Switch --ide-rail-link-active-color/background to the blue scale (--blue-10/70, --bg-info-03) to match the Verso palette. - Footers: remove the default "Fork on GitHub!" right_footer item (redundant with the "Built on Overleaf" link); right_footer now defaults to []. - Login: move the hero wordmark into a full-width centered block and bump it to max-width 480px so it's no longer constrained by the form column. - Projects dashboard: restore the instance name in the top-left navbar (set OVERLEAF_NAV_TITLE="Verso V1.0 Alpha") instead of the wordmark logo, and move the full Verso wordmark to the sidebar's lower section (where the old "Digital Science" mark sat). Revert HeaderLogoOrTitle to its title-first behaviour now that the dashboard no longer passes a logo. Co-Authored-By: Claude Opus 4.8 --- .gitea/workflows/deploy-verso.yml | 2 ++ services/web/app/views/user/login.pug | 6 ++++-- services/web/config/settings.defaults.js | 6 +----- .../components/project-list-ds-nav.tsx | 12 +----------- .../components/navbar/header-logo-or-title.tsx | 12 ++++-------- .../sidebar/sidebar-lower-section.tsx | 17 +++++++++++++++++ .../frontend/stylesheets/pages/editor/rail.scss | 8 ++++---- .../stylesheets/pages/project-list-ds-nav.scss | 4 ---- 8 files changed, 33 insertions(+), 34 deletions(-) diff --git a/.gitea/workflows/deploy-verso.yml b/.gitea/workflows/deploy-verso.yml index 4d7e83b5ca..84e952bf13 100644 --- a/.gitea/workflows/deploy-verso.yml +++ b/.gitea/workflows/deploy-verso.yml @@ -274,6 +274,8 @@ jobs: value: redis - name: OVERLEAF_APP_NAME value: Verso + - name: OVERLEAF_NAV_TITLE + value: Verso V1.0 Alpha - name: OVERLEAF_SITE_URL value: https://test.alocoq.fr # Default UI language for the instance. diff --git a/services/web/app/views/user/login.pug b/services/web/app/views/user/login.pug index cb8a4b5ab3..8934ea62a3 100644 --- a/services/web/app/views/user/login.pug +++ b/services/web/app/views/user/login.pug @@ -8,13 +8,15 @@ block content main#main-content.content .container .row - .col-lg-6.offset-lg-3.col-xl-4.offset-xl-4 + .col-12 .text-center.mb-4 img.verso-login-logo( src=buildImgPath('ol-brand/verso-logo.svg') alt='Verso' - style='width:100%;max-width:380px;height:auto' + style='width:100%;max-width:480px;height:auto' ) + .row + .col-lg-6.offset-lg-3.col-xl-4.offset-xl-4 .page-header if login_support_title h1 !{login_support_title} diff --git a/services/web/config/settings.defaults.js b/services/web/config/settings.defaults.js index 57234cb710..5a5ae42e9d 100644 --- a/services/web/config/settings.defaults.js +++ b/services/web/config/settings.defaults.js @@ -835,11 +835,7 @@ module.exports = { hide_powered_by: process.env.NAV_HIDE_POWERED_BY === 'true', left_footer: [], - right_footer: [ - { - text: 'Fork on GitHub!', - }, - ], + right_footer: [], showSubscriptionLink: false, diff --git a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx index 6ddc242561..3c8d879b2c 100644 --- a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx +++ b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx @@ -19,10 +19,7 @@ import DefaultNavbar from '@/shared/components/navbar/default-navbar' import Footer from '@/shared/components/footer/footer' import SidebarDsNav from '@/features/project-list/components/sidebar/sidebar-ds-nav' import SystemMessages from '@/shared/components/system-messages' -import overleafLogo from '@/shared/svgs/verso-logo.svg' -import overleafLogoDark from '@/shared/svgs/verso-logo-dark.svg' import CookieBanner from '@/shared/components/cookie-banner' -import { useActiveOverallTheme } from '@/shared/hooks/use-active-overall-theme' import { isSplitTestEnabled } from '@/utils/splitTestUtils' export function ProjectListDsNav() { @@ -38,7 +35,6 @@ export function ProjectListDsNav() { tags, selectedTagId, } = useProjectListContext() - const activeOverallTheme = useActiveOverallTheme() const isLibraryEnabled = isSplitTestEnabled('overleaf-library') const selectedTag = tags.find(tag => tag._id === selectedTagId) @@ -87,13 +83,7 @@ export function ProjectListDsNav() { className={`project-ds-nav-page website-redesign${isLibraryEnabled ? ' library-enabled' : ''}`} > - +
diff --git a/services/web/frontend/js/shared/components/navbar/header-logo-or-title.tsx b/services/web/frontend/js/shared/components/navbar/header-logo-or-title.tsx index 58c5b8edf4..035a9a5268 100644 --- a/services/web/frontend/js/shared/components/navbar/header-logo-or-title.tsx +++ b/services/web/frontend/js/shared/components/navbar/header-logo-or-title.tsx @@ -9,23 +9,19 @@ export default function HeaderLogoOrTitle({ overleafLogo?: string }) { const { appName } = getMeta('ol-ExposedSettings') - // A configured logo (custom logo, or the Verso brand logo passed in by a - // page) takes precedence over the text title: the logo already carries the - // brand name, so we don't render the title alongside it. const logoUrl = customLogo ?? overleafLogo return ( - {logoUrl ? ( + {(customLogo || !title) && (
- ) : title ? ( + )} + {title && (
{title}
- ) : ( -
)} ) diff --git a/services/web/frontend/js/shared/components/sidebar/sidebar-lower-section.tsx b/services/web/frontend/js/shared/components/sidebar/sidebar-lower-section.tsx index 21ec14a040..a23f67924e 100644 --- a/services/web/frontend/js/shared/components/sidebar/sidebar-lower-section.tsx +++ b/services/web/frontend/js/shared/components/sidebar/sidebar-lower-section.tsx @@ -10,6 +10,9 @@ import { useContactUsModal } from '@/shared/hooks/use-contact-us-modal' import { UserProvider } from '@/shared/context/user-context' import { AccountMenuItems } from '@/shared/components/navbar/account-menu-items' import { sendMB } from '@/infrastructure/event-tracking' +import { useActiveOverallTheme } from '@/shared/hooks/use-active-overall-theme' +import versoLogo from '@/shared/svgs/verso-logo.svg' +import versoLogoDark from '@/shared/svgs/verso-logo-dark.svg' export function SidebarLowerSection({ showThemeToggle = false, @@ -30,6 +33,8 @@ export function SidebarLowerSection({ autofillProjectUrl: false, }) const { sessionUser, showSubscriptionLink, items } = getMeta('ol-navbar') + const { appName } = getMeta('ol-ExposedSettings') + const activeOverallTheme = useActiveOverallTheme() const helpItem = items.find( item => item.text === 'help_and_resources' ) as NavbarDropdownItemData @@ -128,6 +133,18 @@ export function SidebarLowerSection({ )} + + {appName} + {contactUsModal} ) diff --git a/services/web/frontend/stylesheets/pages/editor/rail.scss b/services/web/frontend/stylesheets/pages/editor/rail.scss index f694597066..a33356a76e 100644 --- a/services/web/frontend/stylesheets/pages/editor/rail.scss +++ b/services/web/frontend/stylesheets/pages/editor/rail.scss @@ -7,13 +7,13 @@ body { --ide-rail-border-colour: var(--border-divider-themed); --ide-rail-header-subdued-button-color: var(--content-primary-themed); --ide-rail-header-subdued-button-hover-background: var(--bg-tertiary-themed); - --ide-rail-link-active-color: var(--green-10); - --ide-rail-link-active-background: var(--green-70); + --ide-rail-link-active-color: var(--blue-10); + --ide-rail-link-active-background: var(--blue-70); } @include theme('light') { - --ide-rail-link-active-color: var(--green-70); - --ide-rail-link-active-background: var(--bg-accent-03); + --ide-rail-link-active-color: var(--blue-70); + --ide-rail-link-active-background: var(--bg-info-03); } .rail-panel-header { 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 2cecf6152d..abda0143c7 100644 --- a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss +++ b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss @@ -48,10 +48,6 @@ body { .navbar-default { position: relative; - // The Verso wordmark logo is wide (~3.8:1), so give the brand more room - // than the default 130px so "verso" and the wordmark read clearly. - --navbar-brand-width: 200px; - .navbar-header .navbar-logo { @include media-breakpoint-up(md) { position: relative;