Web: Fix styles

packages/client/src/pages/Settings/Section/Body/CommonSettings.js

@@ -98,18 +98,18 @@ const CommonSettings = ({
             onChange={onChangeFavorites}
             isChecked={favoritesSection}
           />
-          <ToggleButton
+          {/* <ToggleButton
             isDisabled={true}
             className="toggle-btn"
             label={t("DisplayTemplates")}
             onChange={(e) => console.log(e)}
             isChecked={false}
-          />
+          /> */}
         </>
       )}
       {!isVisitor && (
         <>
-          <Heading className="heading" level={2} size="small">
+          <Heading className="heading" level={2} size="xsmall">
             {t("StoringFileVersion")}
           </Heading>
           <ToggleButton

packages/client/src/pages/Settings/Section/Body/ConnectedClouds.js

@@ -20,6 +20,7 @@ import { tablet } from "@docspace/components/utils/device";
 import { ReactSVG } from "react-svg";
 import { isMobile } from "react-device-detect";
 import { Base } from "@docspace/components/themes";
+import StyledSettings from "./StyledSettings";
 
 const linkStyles = {
   isHovered: true,
@@ -198,7 +199,7 @@ class ConnectClouds extends React.Component {
     linkStyles.color = theme.filesSettings.color;
 
     return (
-      <>
+      <StyledSettings>
         {!!providers.length ? (
           <>
             <Button
@@ -305,7 +306,7 @@ class ConnectClouds extends React.Component {
             }
           />
         )}
-      </>
+      </StyledSettings>
     );
   }
 }

packages/client/src/pages/Settings/Section/Body/StyledSettings.js

@@ -1,6 +1,9 @@
 import styled from "styled-components";
 
 const StyledSettings = styled.div`
+  margin-top: 15px;
+  width: 100%;
+
   display: grid;
   grid-gap: 19px;
 
@@ -9,8 +12,8 @@ const StyledSettings = styled.div`
   }
 
   .heading {
-    margin-bottom: 1px;
-    margin-top: 26px;
+    margin-bottom: -2px;
+    margin-top: 3px;
   }
 
   .toggle-button-text {

packages/client/src/pages/Settings/Section/Body/index.js

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useCallback } from "react";
+import styled, { css } from "styled-components";
 import Error403 from "client/Error403";
 import Error520 from "client/Error520";
-import ConnectClouds from "./ConnectedClouds";
+//import ConnectClouds from "./ConnectedClouds";
 import { inject, observer } from "mobx-react";
 import { combineUrl } from "@docspace/common/utils";
 import { AppServerConfig } from "@docspace/common/constants";
@@ -9,6 +10,16 @@ import config from "PACKAGE_FILE";
 import Submenu from "@docspace/components/submenu";
 import CommonSettings from "./CommonSettings";
 import AdminSettings from "./AdminSettings";
+import { isDesktop } from "@docspace/components/utils/device";
+
+const StyledContainer = styled.div`
+  margin-top: -22px;
+
+  ${isDesktop &&
+  css`
+    margin-top: -19px;
+  `}
+`;
 
 const SectionBodyContent = ({
   setting,
@@ -34,11 +45,11 @@ const SectionBodyContent = ({
     content: <AdminSettings t={t} />,
   };
 
-  const connectedCloud = {
-    id: "connected-clouds",
-    name: t("ThirdPartySettings"),
-    content: <ConnectClouds />,
-  };
+  // const connectedCloud = {
+  //   id: "connected-clouds",
+  //   name: t("ThirdPartySettings"),
+  //   content: <ConnectClouds />,
+  // };
 
   const data = [];
 
@@ -48,9 +59,9 @@ const SectionBodyContent = ({
 
   data.push(commonSettings);
 
-  if (enableThirdParty) {
-    data.push(connectedCloud);
-  }
+  // if (enableThirdParty) {
+  //   data.push(connectedCloud);
+  // }
 
   const onSelect = useCallback(
     (e) => {
@@ -96,14 +107,14 @@ const SectionBodyContent = ({
   ) : isErrorSettings ? (
     <Error520 />
   ) : (
-    <div>
+    <StyledContainer>
       <Submenu
         data={data}
         startSelect={currentTab}
         onSelect={onSelect}
         //selectedItem={selectedTab()}
       />
-    </div>
+    </StyledContainer>
   );
 };