diff --git a/services/web/frontend/js/features/ide-redesign/components/toolbar/logos.tsx b/services/web/frontend/js/features/ide-redesign/components/toolbar/logos.tsx new file mode 100644 index 0000000000..8f6c60682c --- /dev/null +++ b/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 ( +
+ +
+ + + + +
+
+ {cobranding && cobranding.logoImgUrl && ( + <> + + + {cobranding.brandVariationName} + + + )} +
+ ) +} diff --git a/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx b/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx index 298e6f8e93..c8418e00e4 100644 --- a/services/web/frontend/js/features/ide-redesign/components/toolbar/toolbar.tsx +++ b/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 (
- +
+ + +
- -
- ) -} - -const ToolbarMenus = () => { - const { t } = useTranslation() - return ( -
- -
- - - - -
-
- -
- ) -} - -const ToolbarButtons = () => { - return ( -
- - - - - - {getMeta('ol-showUpgradePrompt') && } +
+ + + + + + {getMeta('ol-showUpgradePrompt') && } +
) } diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss index a4df2e4e36..10ef617386 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss +++ b/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 {