From 8c3a9bc82a1d3a9a5b5509b54a16f2fb06bad360 Mon Sep 17 00:00:00 2001
From: Viktor Fomin <enotcode@gmail.com>
Date: Fri, 28 Jul 2023 01:38:28 +0300
Subject: [PATCH] Client: PortalSettings: Branding: useIsSmallWindow

---
 .../categories/common/branding.js             | 35 +++++++------------
 1 file changed, 13 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/pages/PortalSettings/categories/common/branding.js b/packages/client/src/pages/PortalSettings/categories/common/branding.js
index 4856ecc4d3..3f52273066 100644
--- a/packages/client/src/pages/PortalSettings/categories/common/branding.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/branding.js
@@ -1,18 +1,19 @@
 import React, { useState, useEffect } from "react";
 import { withTranslation } from "react-i18next";
-
+import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 import { isMobile, isDesktop } from "react-device-detect";
 
-import withLoading from "SRC_DIR/HOCs/withLoading";
-import Whitelabel from "./Branding/whitelabel";
-import CompanyInfoSettings from "./Branding/companyInfoSettings";
-import styled from "styled-components";
+import { useIsSmallWindow } from "@docspace/common/utils/useIsSmallWindow";
+
 import AdditionalResources from "./Branding/additionalResources";
-
+import CompanyInfoSettings from "./Branding/companyInfoSettings";
 import LoaderBrandingDescription from "./sub-components/loaderBrandingDescription";
+import Whitelabel from "./Branding/whitelabel";
 
-import BreakpointWarning from "../../../../components/BreakpointWarning/index";
+import BreakpointWarning from "SRC_DIR/components/BreakpointWarning/index";
+
+import withLoading from "SRC_DIR/HOCs/withLoading";
 
 import { UnavailableStyles } from "../../utils/commonSettingsStyles";
 import { resetSessionStorage } from "../../utils";
@@ -60,7 +61,7 @@ const Branding = ({
   isSettingPaid,
   standalone,
 }) => {
-  // const [viewDesktop, setViewDesktop] = useState(false);
+  const isSmallWindow = useIsSmallWindow(795);
 
   useEffect(() => {
     return () => {
@@ -70,20 +71,10 @@ const Branding = ({
     };
   }, []);
 
-  // useEffect(() => {
-  //   onCheckView();
-  //   window.addEventListener("resize", onCheckView);
-
-  //   return () => window.removeEventListener("resize", onCheckView);
-  // }, []);
-
-  // const onCheckView = () => {
-  //   if (!isMobile && window.innerWidth > 1024) {
-  //     setViewDesktop(true);
-  //   } else {
-  //     setViewDesktop(false);
-  //   }
-  // };
+  if (isSmallWindow)
+    return (
+      <BreakpointWarning sectionName={t("Settings:Branding")} isSmallWindow />
+    );
 
   if (isMobile)
     return <BreakpointWarning sectionName={t("Settings:Branding")} />;