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 <noreply@anthropic.com>

.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.

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}

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: '<a href="https://github.com/overleaf/overleaf">Fork on GitHub!</a>',
-      },
-    ],
+    right_footer: [],
 
     showSubscriptionLink: false,
 

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' : ''}`}
     >
       <SystemMessages />
-      <DefaultNavbar
-        {...navbarProps}
-        overleafLogo={
-          activeOverallTheme === 'dark' ? overleafLogoDark : overleafLogo
-        }
-        showCloseIcon
-      />
+      <DefaultNavbar {...navbarProps} showCloseIcon />
       <div className="project-list-wrapper">
         <SidebarDsNav />
         <div className="project-ds-nav-content-and-messages">

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 (
     <a href="/" aria-label={appName} className="navbar-brand">
-      {logoUrl ? (
+      {(customLogo || !title) && (
         <div
           className="navbar-logo"
-          style={{ backgroundImage: `url("${logoUrl}")` }}
+          style={logoUrl ? { backgroundImage: `url("${logoUrl}")` } : {}}
         />
-      ) : title ? (
+      )}
+      {title && (
         <div className="navbar-title">
           <span>{title}</span>
         </div>
-      ) : (
-        <div className="navbar-logo" />
       )}
     </a>
   )

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({
           </Dropdown>
         )}
       </nav>
+      <a
+        href="/"
+        className="ds-nav-verso-logo"
+        aria-label={appName}
+        style={{ display: 'block', marginTop: 'var(--spacing-03)' }}
+      >
+        <img
+          src={activeOverallTheme === 'dark' ? versoLogoDark : versoLogo}
+          alt={appName}
+          style={{ width: '100%', maxWidth: '160px', height: 'auto' }}
+        />
+      </a>
       <UserProvider>{contactUsModal}</UserProvider>
     </>
   )

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 {

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;