Web: Added dynamic logo images

packages/client/src/DocspaceLogo/index.js

@@ -1,9 +1,9 @@
-import DocspaceBigReactSvgUrl from "PUBLIC_DIR/images/docspace.big.react.svg?url";
-import React from "react";
+import React from "react";
 import styled from "styled-components";
 import { ReactSVG } from "react-svg";
 import { hugeMobile } from "@docspace/components/utils/device";
 import { inject, observer } from "mobx-react";
+import { getLogoFromPath } from "SRC_DIR/helpers/utils";
 
 const StyledWrapper = styled.div`
   .logo-wrapper {
@@ -19,10 +19,11 @@ const StyledWrapper = styled.div`
 const DocspaceLogo = (props) => {
   const { className, whiteLabelLogoUrls, userTheme } = props;
 
-  const logo =
+  const logo = getLogoFromPath(
     userTheme === "Dark"
       ? whiteLabelLogoUrls[1]?.path?.dark
-      : whiteLabelLogoUrls[1]?.path?.light;
+      : whiteLabelLogoUrls[1]?.path?.light
+  );
 
   return (
     <StyledWrapper>

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

@@ -30,6 +30,7 @@ import StyledExternalLinkIcon from "@docspace/client/src/components/StyledExtern
 import HeaderCatalogBurger from "./header-catalog-burger";
 import { Base, Dark } from "@docspace/components/themes";
 import { ReactSVG } from "react-svg";
+import { getLogoFromPath } from "SRC_DIR/helpers/utils";
 
 const { proxyURL } = AppServerConfig;
 
@@ -218,8 +219,9 @@ const HeaderComponent = ({
     });
   }, [history]);
 
-  const logo =
-    userTheme === "Dark" ? logoUrl?.path?.dark : logoUrl?.path?.light;
+  const logo = getLogoFromPath(
+    userTheme === "Dark" ? logoUrl?.path?.dark : logoUrl?.path?.light
+  );
 
   return (
     <>

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

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

packages/client/src/helpers/utils.js

@@ -5,6 +5,17 @@ import { useEffect, useState } from "react";
 import { CategoryType } from "./constants";
 import { FolderType } from "@docspace/common/constants";
 
+import AboutPageSvgUrl from "ASSETS_DIR/images/logo/aboutpage.svg?url";
+import DarkLoginPageSvgUrl from "ASSETS_DIR/images/logo/dark_loginpage.svg?url";
+import LeftMenuSvgUrl from "ASSETS_DIR/images/logo/leftmenu.svg?url";
+import DarkAboutPageSvgUrl from "ASSETS_DIR/images/logo/dark_aboutpage.svg?url";
+import DocseditorSvgUrl from "ASSETS_DIR/images/logo/docseditor.svg?url";
+import LightSmallSvgUrl from "ASSETS_DIR/images/logo/lightsmall.svg?url";
+import DarkLeftMenuSvgUrl from "ASSETS_DIR/images/logo/dark_leftmenu.svg?url";
+import DocsEditoRembedSvgUrl from "ASSETS_DIR/images/logo/docseditorembed.svg?url";
+import LoginPageSvgUrl from "ASSETS_DIR/images/logo/loginpage.svg?url";
+import DarkLightSmallSvgUrl from "ASSETS_DIR/images/logo/dark_lightsmall.svg?url";
+
 export const setDocumentTitle = (subTitle = null) => {
   const { isAuthenticated, settingsStore, product: currentModule } = authStore;
   const { organizationName } = settingsStore;
@@ -193,3 +204,35 @@ export const getCategoryUrl = (categoryType, folderId = null) => {
       throw new Error("Unknown category type");
   }
 };
+
+export const getLogoFromPath = (path) => {
+  if (!path || path.indexOf("images/logo/") === -1) return path;
+
+  const name = path.split("/").pop();
+  switch (name) {
+    case "aboutpage.svg":
+      return AboutPageSvgUrl;
+    case "dark_loginpage.svg":
+      return DarkLoginPageSvgUrl;
+    case "leftmenu.svg":
+      return LeftMenuSvgUrl;
+    case "dark_aboutpage.svg":
+      return DarkAboutPageSvgUrl;
+    case "docseditor.svg":
+      return DocseditorSvgUrl;
+    case "lightsmall.svg":
+      return LightSmallSvgUrl;
+    case "dark_leftmenu.svg":
+      return DarkLeftMenuSvgUrl;
+    case "docseditorembed.svg":
+      return DocsEditoRembedSvgUrl;
+    case "loginpage.svg":
+      return LoginPageSvgUrl;
+    case "dark_lightsmall.svg":
+      return DarkLightSmallSvgUrl;
+    default:
+      break;
+  }
+
+  return path;
+};

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

@@ -8,6 +8,7 @@ import { ReactSVG } from "react-svg";
 import { isMobile } from "react-device-detect";
 import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
 import logoPersonalAboutUrl from "ASSETS_DIR/images/logo_personal_about.svg?url";
+import { getLogoFromPath } from "SRC_DIR/helpers/utils";
 
 const StyledAboutBody = styled.div`
   width: 100%;
@@ -101,10 +102,11 @@ const AboutContent = (props) => {
     ? previewData.address
     : companyInfoSettingsData?.address;
 
-  const logo =
+  const logo = getLogoFromPath(
     userTheme === "Dark"
       ? whiteLabelLogoUrls[6]?.path.dark
-      : whiteLabelLogoUrls[6]?.path.light;
+      : whiteLabelLogoUrls[6]?.path.light
+  );
 
   return (
     companyInfoSettingsData && (