From ebb2cff2afd5fecdfca452d975f131a6623d879e Mon Sep 17 00:00:00 2001 From: Tim Down <158919+timdown@users.noreply.github.com> Date: Wed, 2 Jul 2025 08:54:46 +0100 Subject: [PATCH] Merge pull request #26697 from overleaf/td-custom-logo-sp Restore custom logo feature on SP project dashboard GitOrigin-RevId: c3ceafa8756968bfbb92f3fca22889e11a39dc40 --- .../components/project-list-ds-nav.tsx | 6 ++++- .../bootstrap-5/navbar/default-navbar.tsx | 22 ++++++++++++++++--- .../navbar/header-logo-or-title.tsx | 15 ++++++++++--- .../js/shared/svgs/overleaf-black.svg | 9 ++++++++ .../js/shared/svgs/overleaf-white.svg | 1 + .../bootstrap-5/components/nav.scss | 5 ++++- .../bootstrap-5/components/navbar.scss | 5 ++++- .../types/css-properties-with-variables.tsx | 4 ++++ 8 files changed, 58 insertions(+), 9 deletions(-) create mode 100644 services/web/frontend/js/shared/svgs/overleaf-black.svg create mode 100644 services/web/frontend/js/shared/svgs/overleaf-white.svg create mode 100644 services/web/types/css-properties-with-variables.tsx 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 8f3b3a8e5d..f8c8014e1c 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 @@ -55,7 +55,11 @@ export function ProjectListDsNav() { return (
- +
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx index 2480b7f061..8e5429dbde 100644 --- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx +++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import React, { useState } from 'react' import { sendMB } from '@/infrastructure/event-tracking' import { useTranslation } from 'react-i18next' import { Button, Container, Nav, Navbar } from 'react-bootstrap' @@ -13,9 +13,15 @@ import MaterialIcon from '@/shared/components/material-icon' import { useContactUsModal } from '@/shared/hooks/use-contact-us-modal' import { UserProvider } from '@/shared/context/user-context' import { X } from '@phosphor-icons/react' +import overleafWhiteLogo from '@/shared/svgs/overleaf-white.svg' +import overleafBlackLogo from '@/shared/svgs/overleaf-black.svg' +import type { CSSPropertiesWithVariables } from '../../../../../../../types/css-properties-with-variables' -function DefaultNavbar(props: DefaultNavbarMetadata) { +function DefaultNavbar( + props: DefaultNavbarMetadata & { overleafLogo?: string } +) { const { + overleafLogo, customLogo, title, canDisplayAdminMenu, @@ -49,10 +55,20 @@ function DefaultNavbar(props: DefaultNavbarMetadata) { className="navbar-default navbar-main" expand="lg" onToggle={expanded => setExpanded(expanded)} + style={ + { + '--navbar-brand-image-default-url': `url("${overleafWhiteLogo}")`, + '--navbar-brand-image-redesign-url': `url("${overleafBlackLogo}")`, + } as CSSPropertiesWithVariables + } >
- + {enableUpgradeButton ? (