Merge pull request #26697 from overleaf/td-custom-logo-sp

Restore custom logo feature on SP project dashboard

GitOrigin-RevId: c3ceafa8756968bfbb92f3fca22889e11a39dc40

services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx

@@ -55,7 +55,11 @@ export function ProjectListDsNav() {
 
   return (
     <div className="project-ds-nav-page website-redesign">
-      <DefaultNavbar {...navbarProps} customLogo={overleafLogo} showCloseIcon />
+      <DefaultNavbar
+        {...navbarProps}
+        overleafLogo={overleafLogo}
+        showCloseIcon
+      />
       <main className="project-list-wrapper">
         <SidebarDsNav />
         <div className="project-ds-nav-content-and-messages">

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
+        }
       >
         <Container className="navbar-container" fluid>
           <div className="navbar-header">
-            <HeaderLogoOrTitle title={title} customLogo={customLogo} />
+            <HeaderLogoOrTitle
+              title={title}
+              overleafLogo={overleafLogo}
+              customLogo={customLogo}
+            />
             {enableUpgradeButton ? (
               <Button
                 as="a"

services/web/frontend/js/features/ui/components/bootstrap-5/navbar/header-logo-or-title.tsx

@@ -2,11 +2,13 @@ import type { DefaultNavbarMetadata } from '@/features/ui/components/types/defau
 import getMeta from '@/utils/meta'
 
 export default function HeaderLogoOrTitle({
+  overleafLogo,
   customLogo,
   title,
-}: Pick<DefaultNavbarMetadata, 'customLogo' | 'title'>) {
+}: Pick<DefaultNavbarMetadata, 'customLogo' | 'title'> & {
+  overleafLogo?: string
+}) {
   const { appName } = getMeta('ol-ExposedSettings')
-
   if (customLogo) {
     return (
       // eslint-disable-next-line jsx-a11y/anchor-has-content
@@ -24,9 +26,16 @@ export default function HeaderLogoOrTitle({
       </a>
     )
   } else {
+    const style = overleafLogo
+      ? {
+          style: {
+            backgroundImage: `url("${overleafLogo}")`,
+          },
+        }
+      : null
     return (
       // eslint-disable-next-line jsx-a11y/anchor-has-content
-      <a href="/" aria-label={appName} className="navbar-brand" />
+      <a href="/" aria-label={appName} className="navbar-brand" {...style} />
     )
   }
 }

services/web/frontend/stylesheets/bootstrap-5/components/nav.scss

@@ -8,7 +8,10 @@
   --navbar-padding-h: var(--spacing-05);
   --navbar-padding: 0 var(--navbar-padding-h);
   --navbar-brand-width: 130px;
-  --navbar-brand-image-url: url('../../../../public/img/ol-brand/overleaf-white.svg');
+  --navbar-brand-image-url: var(
+    --navbar-brand-image-default-url,
+    url('../../../../public/img/ol-brand/overleaf-white.svg')
+  );
 
   // Title, when used instead of a logo
   --navbar-title-font-size: var(--font-size-05);

services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss

@@ -216,7 +216,10 @@
 .website-redesign .navbar-default {
   --navbar-title-color: var(--content-primary);
   --navbar-title-color-hover: var(--content-secondary);
-  --navbar-brand-image-url: url('../../../../public/img/ol-brand/overleaf-black.svg');
+  --navbar-brand-image-url: var(
+    --navbar-brand-image-redesign-url,
+    url('../../../../public/img/ol-brand/overleaf-black.svg')
+  );
   --navbar-subdued-color: var(--content-primary);
   --navbar-subdued-hover-bg: var(--bg-dark-primary);
   --navbar-subdued-hover-color: var(--content-primary-dark);

services/web/types/css-properties-with-variables.tsx

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react'
+
+export type CSSPropertiesWithVariables = CSSProperties &
+  Record<`--${string}`, number | string>