Branding: build-number version, EB Garamond title, blue filters, Present button

- Instance name: stamp the nav title with the build number at deploy time
  ("Verso V0.<run> alpha") via a sed placeholder fed by GITHUB_RUN_NUMBER,
  instead of the static "Verso V1.0 Alpha".

- Title typeface: self-host the EB Garamond latin subset (same one embedded in
  the logo SVGs) and apply it to .navbar-title so the instance name matches the
  Verso wordmark.

- Sidebar wordmark: let the logo fill the full sidebar column width (drop the
  160px cap).

- Project filters: switch the ds-nav active state (filter selection + theme
  toggle) from the green tokens to the blue scale, matching the rail.

- Present button: rename the presentation toolbar action from "Preview" to
  "Present" / "Présenter" and add a tooltip explaining it publishes the
  presentation and opens it in a new tab. New keys present /
  present_publishes_and_opens_in_new_tab in en, fr and extracted-translations.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

.gitea/workflows/deploy-verso.yml

@@ -240,7 +240,9 @@ jobs:
 
       - name: Ensure Verso deployment exists
         run: |
-          cat <<'EOF' | kubectl apply -f -
+          # Stamp the instance name with this build number, e.g. "Verso V0.83 alpha".
+          NAV_TITLE="Verso V0.${GITHUB_RUN_NUMBER:-${GITEA_RUN_NUMBER:-0}} alpha"
+          cat <<'EOF' | sed "s|__NAV_TITLE__|${NAV_TITLE}|g" | kubectl apply -f -
           apiVersion: apps/v1
           kind: Deployment
           metadata:
@@ -275,7 +277,7 @@ jobs:
                       - name: OVERLEAF_APP_NAME
                         value: Verso
                       - name: OVERLEAF_NAV_TITLE
-                        value: Verso V1.0 Alpha
+                        value: "__NAV_TITLE__"
                       - name: OVERLEAF_SITE_URL
                         value: https://test.alocoq.fr
                       # Default UI language for the instance.

services/web/frontend/extracted-translations.json

@@ -1480,6 +1480,8 @@
   "presentation_link_private": "",
   "presentation_link_public": "",
   "presentation_mode": "",
+  "present": "",
+  "present_publishes_and_opens_in_new_tab": "",
   "press_shift_space_for_suggestions": "",
   "press_space_to_open_the_ai_assistant": "",
   "preview": "",

services/web/frontend/fonts/eb-garamond/eb-garamond.css

@@ -0,0 +1,9 @@
+/* EB Garamond (latin subset) — used for the Verso wordmark/instance name so
+   the UI text matches the logo. Self-hosted; same subset embedded in the SVGs. */
+@font-face {
+  font-family: 'EB Garamond';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('EBGaramond-Regular.woff2') format('woff2');
+}

services/web/frontend/js/features/ide-react/components/toolbar/presentation-preview-button.tsx

@@ -1,4 +1,5 @@
 import OLButton from '@/shared/components/ol/ol-button'
+import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import MaterialIcon from '@/shared/components/material-icon'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -37,15 +38,21 @@ export default function PresentationPreviewButton() {
 
   return (
     <div className="ide-redesign-toolbar-button-container">
-      <OLButton
-        size="sm"
-        variant="secondary"
-        leadingIcon={<MaterialIcon type="slideshow" />}
-        onClick={handleClick}
-        disabled={loading}
+      <OLTooltip
+        id="presentation-present-button"
+        description={t('present_publishes_and_opens_in_new_tab')}
+        overlayProps={{ placement: 'bottom' }}
       >
-        {t('preview')}
-      </OLButton>
+        <OLButton
+          size="sm"
+          variant="secondary"
+          leadingIcon={<MaterialIcon type="slideshow" />}
+          onClick={handleClick}
+          disabled={loading}
+        >
+          {t('present')}
+        </OLButton>
+      </OLTooltip>
     </div>
   )
 }

services/web/frontend/js/shared/components/sidebar/sidebar-lower-section.tsx

@@ -142,7 +142,7 @@ export function SidebarLowerSection({
         <img
           src={activeOverallTheme === 'dark' ? versoLogoDark : versoLogo}
           alt={appName}
-          style={{ width: '100%', maxWidth: '160px', height: 'auto' }}
+          style={{ width: '100%', height: 'auto' }}
         />
       </a>
       <UserProvider>{contactUsModal}</UserProvider>

services/web/frontend/stylesheets/components/navbar.scss

@@ -54,6 +54,8 @@
 
     .navbar-title {
       display: inline-block;
+      // Match the Verso wordmark logo's typeface for the instance name.
+      font-family: 'EB Garamond', Georgia, serif;
       font-size: var(--navbar-title-font-size);
       color: var(--navbar-title-color);
       text-decoration: none;

services/web/frontend/stylesheets/main-style.scss

@@ -8,6 +8,7 @@
 @import '../fonts/noto-serif/noto-serif.css';
 @import '../fonts/open-dyslexic-mono/open-dyslexic-mono.css';
 @import '../fonts/material-symbols/material-symbols.css';
+@import '../fonts/eb-garamond/eb-garamond.css';
 
 // Vendor CSS
 // TODO Bootstrap 5: Check whether this works with Bootstrap 5, and whether we can replace it

services/web/frontend/stylesheets/pages/project-list-ds-nav.scss

@@ -1,7 +1,7 @@
 :root {
-  --ds-nav-active-bg: var(--bg-accent-03);
-  --ds-nav-active-color: var(--green-60);
-  --theme-toggle-selected-background: var(--green-20);
+  --ds-nav-active-bg: var(--bg-info-03);
+  --ds-nav-active-color: var(--blue-60);
+  --theme-toggle-selected-background: var(--blue-20);
   --ds-nav-content-bg-secondary: var(--bg-light-secondary);
   --table-icon-bg-hover: 27 34 44;
   --themed-dashboard-popover-bg: var(--bg-dark-primary);
@@ -12,9 +12,9 @@
   --ds-nav-color-scheme: light;
 
   @include theme('default') {
-    --ds-nav-active-bg: var(--green-70);
-    --ds-nav-active-color: var(--green-10);
-    --theme-toggle-selected-background: var(--green-70);
+    --ds-nav-active-bg: var(--blue-70);
+    --ds-nav-active-color: var(--blue-10);
+    --theme-toggle-selected-background: var(--blue-70);
     --ds-nav-content-bg-secondary: var(--bg-dark-secondary);
     --table-icon-bg-hover: 255 255 255;
     --themed-dashboard-popover-bg: var(--bg-light-primary);

services/web/locales/en.json

@@ -1949,6 +1949,8 @@
   "premium_feature": "Premium feature",
   "premium_plan_label": "You’re using <b>Overleaf Premium</b>",
   "preparing_for_export": "Preparing for export…",
+  "present": "Present",
+  "present_publishes_and_opens_in_new_tab": "This will publish the presentation and open it in a new tab",
   "presentation": "Presentation",
   "presentation_link_members": "Only project members",
   "presentation_link_private": "Only logged-in users",

services/web/locales/fr.json

@@ -844,6 +844,8 @@
   "portal_add_affiliation_to_join": "Il semblerait que vous soyez déjà connecté à __appName__ ! Si vous avez une adresse courriel __portalTitle__, vous pouvez l’ajouter maintenant.",
   "position": "Grade",
   "postal_code": "Code postal",
+  "present": "Présenter",
+  "present_publishes_and_opens_in_new_tab": "Ceci publiera la présentation et l'ouvrira dans un nouvel onglet",
   "presentation": "Présentation",
   "presentation_link_members": "Uniquement les membres du projet",
   "presentation_link_private": "Uniquement les utilisateurs connectés",