Client: Logo from handler

packages/client/src/components/NavMenu/sub-components/header.js

@@ -38,7 +38,7 @@ import { combineUrl } from "@docspace/shared/utils/combineUrl";
 import { NoUserSelect } from "@docspace/shared/utils";
 import HeaderCatalogBurger from "./header-catalog-burger";
 import { Base } from "@docspace/shared/themes";
-import { getLogoFromPath } from "@docspace/shared/utils";
+import { getLogoUrl } from "@docspace/shared/utils";
 
 const Header = styled.header`
   display: flex;
@@ -231,9 +231,7 @@ const HeaderComponent = ({
     return () => window.removeEventListener("resize", onResize);
   });
 
-  const logo = getLogoFromPath(
-    !theme.isBase ? logoUrl?.path?.dark : logoUrl?.path?.light,
-  );
+  const logo = getLogoUrl(1, !theme.isBase);
 
   return (
     <>

packages/client/src/components/NavMenu/sub-components/nav-logo-item.js

@@ -30,7 +30,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 import { NoUserSelect } from "@docspace/shared/utils";
-import { getLogoFromPath } from "@docspace/shared/utils";
+import { getLogoUrl } from "@docspace/shared/utils";
 const LogoItem = styled.div`
   display: flex;
   min-width: 48px;
@@ -54,7 +54,7 @@ const NavLogoItem = (props) => {
   return (
     <LogoItem opened={props.opened}>
       <Link className="nav-logo-wrapper" to="/" onClick={props.onClick}>
-        <img className="nav-logo-icon" src={getLogoFromPath(props.logoUrl)} />
+        <img className="nav-logo-icon" src={getLogoUrl(1)} />
       </Link>
     </LogoItem>
   );

packages/client/src/pages/About/AboutContent.js

@@ -34,7 +34,7 @@ import { ReactSVG } from "react-svg";
 
 import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
 import logoPersonalAboutUrl from "PUBLIC_DIR/images/logo_personal_about.svg?url";
-import { getLogoFromPath } from "@docspace/shared/utils";
+import { getLogoUrl } from "@docspace/shared/utils";
 
 const StyledAboutBody = styled.div`
   width: 100%;
@@ -134,11 +134,7 @@ const AboutContent = (props) => {
     ? previewData.address
     : companyInfoSettingsData?.address;
 
-  const logo = getLogoFromPath(
-    !theme.isBase
-      ? whiteLabelLogoUrls[6]?.path.dark
-      : whiteLabelLogoUrls[6]?.path.light,
-  );
+  const logo = getLogoUrl(7, !theme.isBase);
 
   return (
     companyInfoSettingsData && (

packages/client/src/pages/Home/Section/Header/index.js

@@ -92,7 +92,7 @@ import {
   getCategoryTypeByFolderType,
   getCategoryUrl,
 } from "SRC_DIR/helpers/utils";
-import { getLogoFromPath } from "@docspace/shared/utils";
+import { getLogoUrl } from "@docspace/shared/utils";
 import TariffBar from "SRC_DIR/components/TariffBar";
 
 const StyledContainer = styled.div`
@@ -1164,12 +1164,8 @@ const SectionHeaderContent = (props) => {
       categoryType === CategoryType.Archive) &&
     !isCurrentRoom;
 
-  const logo = !theme.isBase
-    ? getLogoFromPath(whiteLabelLogoUrls[0]?.path?.dark)
-    : getLogoFromPath(whiteLabelLogoUrls[0]?.path?.light);
-  const burgerLogo = !theme.isBase
-    ? getLogoFromPath(whiteLabelLogoUrls[5]?.path?.dark)
-    : getLogoFromPath(whiteLabelLogoUrls[5]?.path?.light);
+  const logo = getLogoUrl(1, !theme.isBase);
+  const burgerLogo = getLogoUrl(6, !theme.isBase);
 
   const navigationButtonLabel = showNavigationButton
     ? t("Files:ShareRoom")

packages/doceditor/src/components/deep-link/index.tsx

@@ -34,7 +34,7 @@ import { Button, ButtonSize } from "@docspace/shared/components/button";
 import { Link, LinkType } from "@docspace/shared/components/link";
 import { FormWrapper } from "@docspace/shared/components/form-wrapper";
 import { getBgPattern } from "@docspace/shared/utils/common";
-import { getLogoFromPath } from "@docspace/shared/utils";
+import { getLogoUrl } from "@docspace/shared/utils";
 import { DeviceType } from "@docspace/shared/enums";
 
 import { getDeepLink } from "./DeepLink.helper";
@@ -56,7 +56,6 @@ const DeepLink = ({
   userEmail,
   setIsShowDeepLink,
   theme,
-  logoUrls,
   currentDeviceType,
   deepLinkConfig,
 }: DeepLinkProps) => {
@@ -97,10 +96,7 @@ const DeepLink = ({
   };
 
   const renderLogo = () => {
-    const logoPath = theme.isBase
-      ? logoUrls[0]?.path?.light
-      : logoUrls[0]?.path?.dark;
-    const logo = getLogoFromPath(logoPath);
+    const logo = getLogoUrl(1, !theme.isBase);
 
     if (currentDeviceType === DeviceType.mobile) {
       return (
@@ -168,4 +164,3 @@ const DeepLink = ({
 };
 
 export default DeepLink;
-

packages/login/src/client/components/CodeLogin.tsx

@@ -36,7 +36,7 @@ import { LoginFormWrapper } from "./StyledLogin";
 import BarLogo from "PUBLIC_DIR/images/danger.alert.react.svg";
 import { Dark, Base } from "@docspace/shared/themes";
 import { getBgPattern, frameCallCommand } from "@docspace/shared/utils/common";
-import { getLogoFromPath } from "@docspace/shared/utils";
+import { getLogoUrl } from "@docspace/shared/utils";
 import { useMounted } from "../helpers/useMounted";
 import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
 import LoginContainer from "@docspace/shared/components/color-theme/sub-components/LoginContainer";
@@ -106,11 +106,7 @@ const Form: React.FC<ILoginProps> = ({ theme, setTheme, logoUrls }) => {
   };
 
   const logo = logoUrls && Object.values(logoUrls)[1];
-  const logoUrl = !logo
-    ? undefined
-    : !theme?.isBase
-      ? getLogoFromPath(logo.path.dark)
-      : getLogoFromPath(logo.path.light);
+  const logoUrl = !logo ? undefined : getLogoUrl(2, !theme?.isBase);
 
   return (
     <LoginContainer id="code-page" theme={theme}>

packages/login/src/client/components/Login.tsx

@@ -50,7 +50,7 @@ import { Dark, Base } from "@docspace/shared/themes";
 import { useMounted } from "../helpers/useMounted";
 import { getBgPattern, frameCallCommand } from "@docspace/shared/utils/common";
 import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
-import { getLogoFromPath, getSystemTheme } from "@docspace/shared/utils";
+import { getLogoUrl, getSystemTheme } from "@docspace/shared/utils";
 import { TenantStatus } from "@docspace/shared/enums";
 import GreetingContainer from "./sub-components/GreetingContainer";
 import { Scrollbar } from "@docspace/shared/components/scrollbar";
@@ -229,11 +229,7 @@ const Login: React.FC<ILoginProps> = ({
   const bgPattern = getBgPattern(currentColorScheme?.id);
 
   const logo = logoUrls && Object.values(logoUrls)[1];
-  const logoUrl = !logo
-    ? undefined
-    : !theme?.isBase
-      ? getLogoFromPath(logo.path.dark)
-      : getLogoFromPath(logo.path.light);
+  const logoUrl = !logo ? undefined : getLogoUrl(2, !theme?.isBase);
 
   if (!mounted) return <></>;
   if (isRestoringPortal) return <></>;

packages/login/src/client/components/sub-components/SimpleNav.tsx

@@ -28,7 +28,7 @@ import React from "react";
 import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 import { mobile } from "@docspace/shared/utils";
-import { getLogoFromPath } from "@docspace/shared/utils";
+import { getLogoUrl } from "@docspace/shared/utils";
 
 const StyledNav = styled.div`
   display: none;
@@ -54,11 +54,7 @@ interface ISimpleNav extends IInitialState {
 const SimpleNav = ({ theme, logoUrls }: ISimpleNav) => {
   const logo = logoUrls && Object.values(logoUrls)[0];
 
-  const logoUrl = !logo
-    ? undefined
-    : !theme?.isBase
-      ? getLogoFromPath(logo.path.dark)
-      : getLogoFromPath(logo.path.light);
+  const logoUrl = !logo ? undefined : getLogoUrl(1, !theme?.isBase);
 
   return (
     <StyledNav id="login-header" theme={theme}>

packages/login/src/server/lib/template.ts

@@ -26,7 +26,6 @@
 
 import { getScripts } from "./helpers";
 import pkg from "../../../package.json";
-import { getLogoFromPath } from "@docspace/shared/utils";
 
 import fontsCssUrl from "PUBLIC_DIR/css/fonts.css?url";
 
@@ -56,10 +55,6 @@ const template: Template = (
     ? `${t("Common:Authorization")} - ${organizationName}`
     : title;
 
-  const favicon = getLogoFromPath(
-    initLoginState?.logoUrls && initLoginState?.logoUrls[2]?.path?.light
-  );
-
   let clientScripts =
     assets && assets.hasOwnProperty("client.js")
       ? `<script defer="defer" src='${assets["client.js"]}'></script>`
@@ -138,7 +133,7 @@ const template: Template = (
         <meta name="google" content="notranslate" />
         <link  rel="stylesheet preload" href=${fontsCssUrl}  as="style" type="text/css" crossorigin/>
 
-        <link id="favicon" rel="shortcut icon" href=${favicon} />
+        <link rel="icon" href="/logo.ashx?logotype=3" />
         <link rel="manifest" href="/manifest.json" />
         <!-- Tell the browser it's a PWA -->
         <!-- <meta name="mobile-web-app-capable" content="yes" /> -->
@@ -146,10 +141,6 @@ const template: Template = (
         <!-- <meta name="apple-mobile-web-app-capable" content="yes" /> -->
         <!-- <link rel="apple-touch-icon" href="/appIcon-180.png" /> -->
 
-        <link rel="apple-touch-icon" href=${favicon} />
-        <link rel="android-touch-icon" href=${favicon} />
-
-
         ${styleTags}   
       </head>
       <body>

packages/management/src/store/SpacesStore.ts

@@ -25,7 +25,6 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import { makeAutoObservable } from "mobx";
-import { getLogoFromPath } from "@docspace/shared/utils";
 import {
   getDomainName,
   setDomainName,
@@ -68,13 +67,6 @@ class SpacesStore {
     );
   }
 
-  get faviconLogo() {
-    const logos = this.settingsStore.whiteLabelLogoUrls;
-    if (!logos) return;
-
-    return getLogoFromPath(logos[2]?.path?.light);
-  }
-
   setPortalName = async (portalName: string) => {
     try {
       const res = await setPortalName(portalName);

packages/shared/components/article/sub-components/Header.tsx

@@ -28,7 +28,7 @@ import React from "react";
 import { useNavigate, Link } from "react-router-dom";
 import { useTheme } from "styled-components";
 
-import { getLogoFromPath } from "../../../utils";
+import { getLogoUrl } from "../../../utils";
 import { DeviceType } from "../../../enums";
 import { ArticleHeaderLoader } from "../../../skeletons/article";
 
@@ -59,12 +59,8 @@ const ArticleHeader = ({
     navigate("/");
   };
 
-  const burgerLogo = !theme.isBase
-    ? getLogoFromPath(whiteLabelLogoUrls[5]?.path?.dark)
-    : getLogoFromPath(whiteLabelLogoUrls[5]?.path?.light);
-  const logo = !theme.isBase
-    ? getLogoFromPath(whiteLabelLogoUrls[0]?.path?.dark)
-    : getLogoFromPath(whiteLabelLogoUrls[0]?.path?.light);
+  const burgerLogo = getLogoUrl(6, !theme.isBase);
+  const logo = getLogoUrl(1, !theme.isBase);
 
   if (currentDeviceType === DeviceType.mobile) return null;
 

packages/shared/components/docspace-logo/DocspaceLogo.tsx

@@ -27,19 +27,15 @@
 import React from "react";
 import { useTheme } from "styled-components";
 
-import { classNames, getLogoFromPath } from "@docspace/shared/utils";
+import { classNames, getLogoUrl } from "@docspace/shared/utils";
 
 import { StyledWrapper } from "./DocspaceLogo.styled";
 import type { DocspaceLogoProps } from "./DocspaceLogo.types";
 
-const DocspaceLogo = ({ className, whiteLabelLogoUrls }: DocspaceLogoProps) => {
+const DocspaceLogo = ({ className }: DocspaceLogoProps) => {
   const theme = useTheme();
 
-  const logo = getLogoFromPath(
-    theme.isBase
-      ? whiteLabelLogoUrls[1]?.path?.light
-      : whiteLabelLogoUrls[1]?.path?.dark,
-  );
+  const logo = getLogoUrl(2, theme.isBase);
 
   return (
     <StyledWrapper>

packages/shared/utils/common.ts

@@ -57,6 +57,7 @@ import {
   ShareAccessRights,
   ThemeKeys,
   ErrorKeys,
+  WhiteLabelLogoType,
 } from "../enums";
 import { LANGUAGE, PUBLIC_MEDIA_VIEW_URL, RTL_LANGUAGES } from "../constants";
 
@@ -1043,3 +1044,11 @@ export const insertDataLayer = (id: string) => {
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({ user_id: id });
 };
+
+export function getLogoUrl(
+  logoType: WhiteLabelLogoType,
+  dark: boolean = false,
+  def: boolean = false,
+) {
+  return `/logo.ashx?logotype=${logoType}&dark=${dark}&default=${def}`;
+}

packages/shared/utils/index.ts

@@ -70,6 +70,7 @@ import {
   getEditorTheme,
   getLogoFromPath,
   isBetaLanguage,
+  getLogoUrl,
 } from "./common";
 
 export {
@@ -119,6 +120,7 @@ export {
   handleAnyClick,
   DomHelpers,
   ObjectUtils,
+  getLogoUrl,
 };
 
 export const getModalType = () => {

public/images/logo/dark_leftmenu.svg

@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.411 25.7059L1.68526 20.7649C0.771581 20.3335 0.771581 19.6669 1.68526 19.2748L5.4194 17.5493L12.3713 20.7649C13.285 21.1963 14.7548 21.1963 15.6287 20.7649L22.5806 17.5493L26.3147 19.2748C27.2284 19.7061 27.2284 20.3728 26.3147 20.7649L15.589 25.7059C14.7548 26.0981 13.285 26.0981 12.411 25.7059Z" fill="#FF6F3D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3762 19.5917L1.68317 14.6449C0.772277 14.213 0.772277 13.5456 1.68317 13.153L5.32673 11.4648L12.3762 14.7234C13.2871 15.1553 14.7525 15.1553 15.6238 14.7234L22.6733 11.4648L26.3168 13.153C27.2277 13.5849 27.2277 14.2523 26.3168 14.6449L15.6238 19.5917C14.7129 20.0235 13.2475 20.0235 12.3762 19.5917Z" fill="#95C038"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3762 13.5408L1.68317 8.66521C0.772277 8.23956 0.772277 7.58175 1.68317 7.1948L12.3762 2.31923C13.2871 1.89359 14.7525 1.89359 15.6238 2.31923L26.3168 7.1948C27.2277 7.62044 27.2277 8.27826 26.3168 8.66521L15.6238 13.5408C14.7129 13.9277 13.2475 13.9277 12.3762 13.5408Z" fill="#5DC0E8"/>
+</svg>