Merge pull request #847 from ONLYOFFICE/bugfix/fixed-third-party-services-styles

Bugfix/fixed third party services styles

packages/client/src/HOCs/withPeopleLoader.js

@@ -38,12 +38,12 @@ const withLoader = (WrappedComponent) => (Loader) => {
     }, [isLoading]);
 
     useEffect(() => {
-      if (firstLoad || !isLoaded || inLoad || !profileLoaded) {
+      if (!isLoaded) {
         setIsBurgerLoading(true);
       } else {
         setIsBurgerLoading(false);
       }
-    }, [firstLoad, isLoaded, inLoad, profileLoaded]);
+    }, [isLoaded]);
 
     return firstLoad || !isLoaded || inLoad || !tReady || !profileLoaded ? (
       Loader

packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js

@@ -6,48 +6,35 @@ import Box from "@docspace/components/box";
 import Text from "@docspace/components/text";
 import Link from "@docspace/components/link";
 import toastr from "@docspace/components/toast/toastr";
-import { tablet, mobile } from "@docspace/components/utils/device";
 import { showLoader, hideLoader } from "@docspace/common/utils";
 import ConsumerItem from "./sub-components/consumerItem";
 import ConsumerModalDialog from "./sub-components/consumerModalDialog";
 import { inject, observer } from "mobx-react";
-import { Base } from "@docspace/components/themes";
+import { mobile } from "@docspace/components/utils/device";
 
 const RootContainer = styled(Box)`
-  .title-description-container {
-    max-width: 700px;
-  }
-
-  @media ${tablet} {
-    margin: 0;
-
-    .consumers-list-container {
-      margin: 32px 0 40px 0;
-    }
-  }
-
-  @media ${tablet} {
-    .consumer-item-wrapper {
-      margin: 0 0 24px 0;
-    }
-  }
-`;
-const StyledConsumer = styled(Box)`
-  width: 400px;
-
-  @media ${tablet} {
-    width: 496px;
-  }
+  max-width: 700px;
+  width: 100%;
 
   @media ${mobile} {
-    width: 343px;
+    width: calc(100% - 8px);
+  }
+
+  .consumers-list-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(293px, 1fr));
+    gap: 20px;
+  }
+
+  .consumer-item-wrapper {
+    border: ${(props) =>
+      props.theme.client.settings.integration.separatorBorder};
+
+    border-radius: 6px;
+    min-height: 116px;
+    padding: 12px 12px 8px 20px;
   }
 `;
-const Separator = styled.div`
-  border: ${(props) => props.theme.client.settings.integration.separatorBorder};
-`;
-
-Separator.defaultProps = { theme: Base };
 
 class ThirdPartyServices extends React.Component {
   constructor(props) {
@@ -140,54 +127,36 @@ class ThirdPartyServices extends React.Component {
 
     return (
       <>
-        <RootContainer
-          displayProp="flex"
-          flexDirection="column"
-          marginProp="0 88px 0 0"
-        >
-          <Box className="title-description-container">
-            <Text>{t("ThirdPartyTitleDescription")}</Text>
-            <Box marginProp="16px 0 0 0">
-              <Link
-                color={theme.client.settings.integration.linkColor}
-                isHovered={false}
-                target="_blank"
-                href={urlAuthKeys}
-              >
-                {t("Common:LearnMore")}
-              </Link>
-            </Box>
+        <RootContainer className="RootContainer">
+          <Text>{t("ThirdPartyTitleDescription")}</Text>
+          <Box marginProp="8px 0 24px 0">
+            <Link
+              color={theme.client.settings.integration.linkColor}
+              isHovered
+              target="_blank"
+              href={urlAuthKeys}
+            >
+              {t("Common:LearnMore")}
+            </Link>
           </Box>
-          <Box
-            className="consumers-list-container"
-            widthProp="100%"
-            displayProp="flex"
-            flexWrap="wrap"
-            marginProp="32px 176px 40px 0"
-          >
+
+          <div className="consumers-list-container">
             {consumers.map((consumer) => (
-              <StyledConsumer
-                className="consumer-item-wrapper"
-                key={consumer.name}
-                marginProp="0 24px 24px 0"
-              >
-                <Separator />
-                <Box displayProp="flex" className="consumer-item-container">
-                  <ConsumerItem
-                    consumer={consumer}
-                    dialogVisible={dialogVisible}
-                    isLoading={isLoading}
-                    onChangeLoading={onChangeLoading}
-                    onModalClose={onModalClose}
-                    onModalOpen={onModalOpen}
-                    setConsumer={setConsumer}
-                    updateConsumerProps={updateConsumerProps}
-                    t={t}
-                  />
-                </Box>
-              </StyledConsumer>
+              <Box className="consumer-item-wrapper" key={consumer.name}>
+                <ConsumerItem
+                  consumer={consumer}
+                  dialogVisible={dialogVisible}
+                  isLoading={isLoading}
+                  onChangeLoading={onChangeLoading}
+                  onModalClose={onModalClose}
+                  onModalOpen={onModalOpen}
+                  setConsumer={setConsumer}
+                  updateConsumerProps={updateConsumerProps}
+                  t={t}
+                />
+              </Box>
             ))}
-          </Box>
+          </div>
         </RootContainer>
         {dialogVisible && (
           <ConsumerModalDialog

packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/sub-components/consumerItem.js

@@ -47,41 +47,37 @@ class ConsumerItem extends React.Component {
 
     return (
       <>
-        <Box displayProp="flex" flexDirection="column" widthProp="100%">
-          <Box
-            displayProp="flex"
-            justifyContent="space-between"
-            alignItems="center"
-            widthProp="100%"
-            heightProp="56px"
+        <Box
+          displayProp="flex"
+          justifyContent="space-between"
+          alignItems="center"
+          widthProp="100%"
+        >
+          <StyledBox
+            isSet={
+              !consumer.canSet || consumer.props.find((p) => p.value)
+                ? true
+                : false
+            }
+            isLinkedIn={consumer.name === "linkedin"}
           >
-            <StyledBox
-              isSet={
-                !consumer.canSet || consumer.props.find((p) => p.value)
-                  ? true
-                  : false
-              }
-              isLinkedIn={consumer.name === "linkedin"}
-            >
-              <ReactSVG
-                src={logo}
-                className={"consumer-icon"}
-                alt={consumer.name}
-              />
-            </StyledBox>
-            <Box onClick={setConsumer} data-consumer={consumer.name}>
-              <ConsumerToggle
-                consumer={consumer}
-                onModalOpen={onModalOpen}
-                updateConsumerProps={updateConsumerProps}
-                t={t}
-              />
-            </Box>
-          </Box>
-          <Box displayProp="flex" marginProp="21px 0 0 0">
-            <Text>{consumer.description}</Text>
+            <ReactSVG
+              src={logo}
+              className={"consumer-icon"}
+              alt={consumer.name}
+            />
+          </StyledBox>
+          <Box onClick={setConsumer} data-consumer={consumer.name}>
+            <ConsumerToggle
+              consumer={consumer}
+              onModalOpen={onModalOpen}
+              updateConsumerProps={updateConsumerProps}
+              t={t}
+            />
           </Box>
         </Box>
+
+        <Text>{consumer.description}</Text>
       </>
     );
   }

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import { useHistory } from "react-router";
 import Loaders from "@docspace/common/components/Loaders";

packages/components/themes/base.js

@@ -2817,7 +2817,7 @@ const Base = {
       },
 
       integration: {
-        separatorBorder: `1px solid ${grayLightMid}`,
+        separatorBorder: `1px solid ${grayMid}`,
         linkColor: link,
 
         sso: {