Web: fix default logo import

packages/client/src/DocspaceLogo/index.js

@@ -3,7 +3,7 @@ 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";
+import { getLogoFromPath } from "@docspace/common/utils";
 
 const StyledWrapper = styled.div`
   .logo-wrapper {

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

@@ -12,7 +12,7 @@ import { combineUrl } from "@docspace/common/utils";
 import NoUserSelect from "@docspace/components/utils/commonStyles";
 import HeaderCatalogBurger from "./header-catalog-burger";
 import { Base } from "@docspace/components/themes";
-import { getLogoFromPath } from "SRC_DIR/helpers/utils";
+import { getLogoFromPath } from "@docspace/common/utils";
 
 const Header = styled.header`
   display: flex;

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

@@ -8,7 +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";
+import { getLogoFromPath } from "@docspace/common/utils";
 
 const StyledAboutBody = styled.div`
   width: 100%;

packages/common/components/Article/sub-components/article-header.js

@@ -11,6 +11,7 @@ import {
   StyledHeading,
   StyledIconBox,
 } from "../styled-article";
+import { getLogoFromPath } from "../../../utils";
 
 const ArticleHeader = ({
   showText,
@@ -28,12 +29,12 @@ const ArticleHeader = ({
 
   const burgerLogo =
     userTheme === "Dark"
-      ? whiteLabelLogoUrls[5].path.dark
+      ? getLogoFromPath(whiteLabelLogoUrls[5].path.dark)
-      : whiteLabelLogoUrls[5].path.light;
+      : getLogoFromPath(whiteLabelLogoUrls[5].path.light);
   const logo =
     userTheme === "Dark"
-      ? whiteLabelLogoUrls[0].path.dark
+      ? getLogoFromPath(whiteLabelLogoUrls[0].path.dark)
-      : whiteLabelLogoUrls[0].path.light;
+      : getLogoFromPath(whiteLabelLogoUrls[0].path.light);
 
   if (isMobileOnly) return <></>;
   return (

packages/common/utils/index.ts

@@ -1,3 +1,12 @@
+//TODO: fix routes
+import LoginPageSvgUrl from "../../client/public/images/logo/loginpage.svg?url";
+import DarkLoginPageSvgUrl from "../../client/public/images/logo/dark_loginpage.svg?url";
+import LeftMenuSvgUrl from "../../client/public/images/logo/leftmenu.svg?url";
+import DocseditorSvgUrl from "../../client/public/images/logo/docseditor.svg?url";
+import LightSmallSvgUrl from "../../client/public/images/logo/lightsmall.svg?url";
+import DocsEditoRembedSvgUrl from "../../client/public/images/logo/docseditorembed.svg?url";
+import DarkLightSmallSvgUrl from "../../client/public/images/logo/dark_lightsmall.svg?url";
+
 import { LANGUAGE } from "../constants";
 import sjcl from "sjcl";
 import { isMobile } from "react-device-detect";
@@ -467,6 +476,7 @@ export const getConvertedSize = (t, size) => {
   );
 };
 
+//TODO: add for url use
 export const getBgPattern = (colorSchemeId: number) => {
   switch (colorSchemeId) {
     case 1:
@@ -487,3 +497,33 @@ export const getBgPattern = (colorSchemeId: number) => {
       return "url('/static/images/background.pattern.react.svg')";
   }
 };
+
+//TODO: check for custom logo
+export const getLogoFromPath = (path) => {
+  if (!path || path.indexOf("images/logo/") === -1) return path;
+
+  const name = path.split("/").pop();
+  switch (name) {
+    case "aboutpage.svg":
+    case "loginpage.svg":
+      return LoginPageSvgUrl;
+    case "dark_loginpage.svg":
+      return DarkLoginPageSvgUrl;
+    case "leftmenu.svg":
+    case "dark_leftmenu.svg":
+      return LeftMenuSvgUrl;
+    case "dark_aboutpage.svg":
+    case "dark_lightsmall.svg":
+      return DarkLightSmallSvgUrl;
+    case "docseditor.svg":
+      return DocseditorSvgUrl;
+    case "lightsmall.svg":
+      return LightSmallSvgUrl;
+    case "docseditorembed.svg":
+      return DocsEditoRembedSvgUrl;
+    default:
+      break;
+  }
+
+  return path;
+};

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

@@ -9,11 +9,10 @@ import { ReactSVG } from "react-svg";
 import { LoginContainer, LoginFormWrapper } from "./StyledLogin";
 import BarLogo from "../../../../../public/images/danger.alert.react.svg";
 import { Dark, Base } from "@docspace/components/themes";
-import { getBgPattern } from "@docspace/common/utils";
+import { getBgPattern, getLogoFromPath } from "@docspace/common/utils";
 import { useMounted } from "../helpers/useMounted";
 import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
 
-
 interface IBarProp {
   t: TFuncType;
   expired: boolean;
@@ -65,7 +64,9 @@ const Form: React.FC = ({ theme, setTheme, logoUrls }) => {
   };
 
   const logo = Object.values(logoUrls)[1];
-  const logoUrl = !theme.isBase ? logo.path.dark : logo.path.light;
+  const logoUrl = !theme?.isBase
+    ? getLogoFromPath(logo?.path?.dark)
+    : getLogoFromPath(logo?.path?.light);
 
   return (
     <LoginContainer id="code-page" theme={theme}>