Common: fix logo

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

@@ -6,12 +6,12 @@ import { isTablet as isTabletUtils } from "@docspace/components/utils/device";
 import { Link } from "react-router-dom";
 import { isTablet, isMobileOnly } from "react-device-detect";
 import { inject, observer } from "mobx-react";
-import { ReactSVG } from "react-svg";
 import {
   StyledArticleHeader,
   StyledHeading,
   StyledIconBox,
 } from "../styled-article";
+import { Dark } from "@docspace/components/themes";
 
 const ArticleHeader = ({
   showText,
@@ -19,6 +19,7 @@ const ArticleHeader = ({
   onClick,
   isBurgerLoading,
   whiteLabelLogoUrls,
+  theme,
   ...rest
 }) => {
   const history = useHistory();
@@ -26,7 +27,14 @@ const ArticleHeader = ({
   const isTabletView = (isTabletUtils() || isTablet) && !isMobileOnly;
   const onLogoClick = () => history.push("/");
 
-  const isSvgLogo = whiteLabelLogoUrls[0].includes(".svg");
+  const burgerLogo =
+    theme === Dark
+      ? whiteLabelLogoUrls[5].darkPath
+      : whiteLabelLogoUrls[5].lightPath;
+  const logo =
+    theme === Dark
+      ? whiteLabelLogoUrls[0].darkPath
+      : whiteLabelLogoUrls[0].lightPath;
 
   if (isMobileOnly) return <></>;
   return (
@@ -35,7 +43,7 @@ const ArticleHeader = ({
         <Loaders.ArticleHeader height="28px" width="28px" />
       ) : (
         <StyledIconBox name="article-burger" showText={showText}>
-          <img src={whiteLabelLogoUrls[5]} onClick={onLogoClick} />
+          <img src={burgerLogo} onClick={onLogoClick} />
         </StyledIconBox>
       )}
 
@@ -44,29 +52,10 @@ const ArticleHeader = ({
       ) : (
         <StyledHeading showText={showText} size="large">
           {isTabletView ? (
-            isSvgLogo ? (
-              <ReactSVG
-                className="logo-icon_svg"
-                src={whiteLabelLogoUrls[0]}
-                onClick={onLogoClick}
-              />
-            ) : (
-              <img
-                className="logo-icon_svg"
-                src={whiteLabelLogoUrls[0]}
-                onClick={onLogoClick}
-              />
-            )
+            <img className="logo-icon_svg" src={logo} onClick={onLogoClick} />
           ) : (
             <Link to="/">
-              {isSvgLogo ? (
-                <ReactSVG
-                  className="logo-icon_svg"
-                  src={whiteLabelLogoUrls[0]}
-                />
-              ) : (
-                <img className="logo-icon_svg" src={whiteLabelLogoUrls[0]} />
-              )}
+              <img className="logo-icon_svg" src={logo} />
             </Link>
           )}
         </StyledHeading>
@@ -85,9 +74,10 @@ ArticleHeader.displayName = "Header";
 
 export default inject(({ auth }) => {
   const { settingsStore } = auth;
-  const { isBurgerLoading, whiteLabelLogoUrls } = settingsStore;
+  const { isBurgerLoading, whiteLabelLogoUrls, theme } = settingsStore;
   return {
     isBurgerLoading,
     whiteLabelLogoUrls,
+    theme,
   };
 })(observer(ArticleHeader));

packages/common/store/SettingsStore.js

@@ -151,7 +151,6 @@ class SettingsStore {
   companyInfoSettingsIsDefault = true;
 
   whiteLabelLogoUrls = [];
-  docSpaceLogo = "";
 
   constructor() {
     makeAutoObservable(this);
@@ -387,10 +386,6 @@ class SettingsStore {
     );
   };
 
-  setDocSpaceLogo = (urls) => {
-    this.docSpaceLogo = urls[6];
-  };
-
   setLogoUrl = (url) => {
     this.logoUrl = url[0];
   };
@@ -410,7 +405,6 @@ class SettingsStore {
     const res = await api.settings.getLogoUrls();
 
     this.setLogoUrls(Object.values(res));
-    this.setDocSpaceLogo(Object.values(res));
     this.setLogoUrl(Object.values(res));
   };