Merge pull request #26399 from overleaf/mj-ide-co-branding

[web] Editor redesign: Add cobranding logo to toolbar

GitOrigin-RevId: 9f9138bb4ebc2cc7d39e38f8bee77c7fbde8b781

services/web/frontend/js/features/ide-redesign/components/toolbar/logos.tsx

@@ -0,0 +1,46 @@
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import MaterialIcon from '@/shared/components/material-icon'
+import { useTranslation } from 'react-i18next'
+import { Cobranding } from '../../../../../../types/cobranding'
+
+type ToolbarLogosProps = {
+  cobranding?: Cobranding
+}
+
+export const ToolbarLogos = ({ cobranding }: ToolbarLogosProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="ide-redesign-toolbar-logos">
+      <OLTooltip
+        id="tooltip-home-button"
+        description={t('back_to_your_projects')}
+        overlayProps={{ delay: 0, placement: 'bottom' }}
+      >
+        <div className="ide-redesign-toolbar-home-button">
+          <a href="/project" className="ide-redesign-toolbar-home-link">
+            <span className="toolbar-ol-logo" aria-label={t('overleaf_logo')} />
+            <MaterialIcon type="home" className="toolbar-ol-home-button" />
+          </a>
+        </div>
+      </OLTooltip>
+      {cobranding && cobranding.logoImgUrl && (
+        <>
+          <span className="ide-redesign-toolbar-cobranding-separator" />
+          <a
+            className="ide-redesign-toolbar-cobranding-link"
+            href={cobranding.brandVariationHomeUrl}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            <img
+              src={cobranding.logoImgUrl}
+              className="ide-redesign-toolbar-cobranding-logo"
+              alt={cobranding.brandVariationName}
+            />
+          </a>
+        </>
+      )}
+    </div>
+  )
+}

services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx

@@ -1,5 +1,3 @@
-import MaterialIcon from '@/shared/components/material-icon'
-import { useTranslation } from 'react-i18next'
 import { ToolbarMenuBar } from './menu-bar'
 import { ToolbarProjectTitle } from './project-title'
 import { OnlineUsers } from './online-users'
@@ -11,12 +9,14 @@ import { useLayoutContext } from '@/shared/context/layout-context'
 import BackToEditorButton from '@/features/editor-navigation-toolbar/components/back-to-editor-button'
 import { useCallback } from 'react'
 import * as eventTracking from '../../../../infrastructure/event-tracking'
-import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import { ToolbarLogos } from './logos'
+import { useEditorContext } from '@/shared/context/editor-context'
 import UpgradeButton from './upgrade-button'
 import getMeta from '@/utils/meta'
 
 export const Toolbar = () => {
   const { view, setView } = useLayoutContext()
+  const { cobranding } = useEditorContext()
 
   const handleBackToEditorClick = useCallback(() => {
     eventTracking.sendMB('navigation-clicked-history', { action: 'close' })
@@ -37,43 +37,19 @@ export const Toolbar = () => {
 
   return (
     <div className="ide-redesign-toolbar">
-      <ToolbarMenus />
+      <div className="ide-redesign-toolbar-menu">
+        <ToolbarLogos cobranding={cobranding} />
+        <ToolbarMenuBar />
+      </div>
       <ToolbarProjectTitle />
-      <ToolbarButtons />
-    </div>
-  )
-}
-
-const ToolbarMenus = () => {
-  const { t } = useTranslation()
-  return (
-    <div className="ide-redesign-toolbar-menu">
-      <OLTooltip
-        id="tooltip-home-button"
-        description={t('back_to_your_projects')}
-        overlayProps={{ delay: 0, placement: 'bottom' }}
-      >
-        <div className="ide-redesign-toolbar-home-button">
-          <a href="/project" className="ide-redesign-toolbar-home-link">
-            <span className="toolbar-ol-logo" aria-label={t('overleaf_logo')} />
-            <MaterialIcon type="home" className="toolbar-ol-home-button" />
-          </a>
-        </div>
-      </OLTooltip>
-      <ToolbarMenuBar />
-    </div>
-  )
-}
-
-const ToolbarButtons = () => {
-  return (
-    <div className="ide-redesign-toolbar-actions">
-      <LabsActions />
-      <OnlineUsers />
-      <ShowHistoryButton />
-      <ChangeLayoutButton />
-      <ShareProjectButton />
-      {getMeta('ol-showUpgradePrompt') && <UpgradeButton />}
+      <div className="ide-redesign-toolbar-actions">
+        <LabsActions />
+        <OnlineUsers />
+        <ShowHistoryButton />
+        <ChangeLayoutButton />
+        <ShareProjectButton />
+        {getMeta('ol-showUpgradePrompt') && <UpgradeButton />}
+      </div>
     </div>
   )
 }

services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss

@@ -148,6 +148,36 @@
       vertical-align: middle;
     }
   }
+
+  .ide-redesign-toolbar-logos {
+    display: flex;
+  }
+
+  .ide-redesign-toolbar-cobranding-separator {
+    $separator-height: 16px;
+
+    border-radius: var(--border-radius-base);
+    width: 1px;
+    height: $separator-height;
+    margin-top: math.div($toolbar-height - $separator-height, 2);
+
+    // To account for the 1px border of the rail so that they're aligned.
+    margin-left: calc(var(--spacing-02) - 1px);
+    margin-right: var(--spacing-01);
+    background: var(--redesign-toolbar-border-divider);
+  }
+
+  .ide-redesign-toolbar-cobranding-link {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 var(--spacing-02);
+  }
+
+  .ide-redesign-toolbar-cobranding-logo {
+    max-height: calc($toolbar-height - var(--spacing-04) * 2);
+    max-width: 150px;
+  }
 }
 
 .ide-redesign-toolbar-menu-bar {