From 87ee165027af2195319e4e91b63d0d20fb8de77d Mon Sep 17 00:00:00 2001
From: TatianaLopaeva <talopaeva@gmail.com>
Date: Tue, 22 Sep 2020 10:31:33 +0300
Subject: [PATCH] Refactoring styles

---
 .../pages/PaymentsEnterprise/index.js         |  14 +-
 .../sub-components/advantagesContainer.js     | 158 +++++-------------
 .../sub-components/buttonContainer.js         |   2 -
 .../sub-components/contactContainer.js        |   5 +-
 .../sub-components/headerContainer.js         |   4 +-
 5 files changed, 51 insertions(+), 132 deletions(-)

diff --git a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/index.js b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/index.js
index 47174c3ea7..354e632d91 100644
--- a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/index.js
+++ b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/index.js
@@ -24,23 +24,23 @@ const i18n = createI18N({
 });
 const { setCurrentProductId } = store.auth.actions;
 const { changeLanguage, changeDocumentTitle } = utils;
-const { tablet } = Utils.device;
+const { tablet, size } = Utils.device;
 
 const StyledBody = styled.div`
   margin: 0 auto;
   max-width: 920px;
-
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(4, min-content);
   @media ${tablet} {
-    max-width: 600px;
-    margin: 0 auto;
+    max-width: ${size.smallTablet}px;
   }
   @media (max-width: 632px) {
-    /* max-width: 343px; */
-    margin: 0 auto;
+    min-width: ${size.mobile}px;
   }
 `;
 
-class Body extends React.PureComponent {
+class Body extends React.Component {
   constructor(props) {
     super(props);
     const { t, organizationName } = this.props;
diff --git a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/advantagesContainer.js b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/advantagesContainer.js
index 3b87e29cf1..dcddc53a64 100644
--- a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/advantagesContainer.js
+++ b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/advantagesContainer.js
@@ -1,8 +1,8 @@
 import React, { useEffect } from "react";
-import PropTypes from "prop-types";
+
 import styled from "styled-components";
 import { utils } from "asc-web-common";
-import { Text, utils as Utils } from "asc-web-components";
+import { Text, utils as Utils, Box } from "asc-web-components";
 import { createI18N } from "../../../../helpers/i18n";
 import { useTranslation } from "react-i18next";
 const { changeLanguage } = utils;
@@ -12,13 +12,10 @@ const i18n = createI18N({
   page: "PaymentsEnterprise",
   localesPath: "pages/PaymentsEnterprise",
 });
+
 const StyledBodyAdvantages = styled.div`
   display: grid;
-  padding-left: 32px;
-  padding-top: 32px;
-  padding-right: 8px;
-  /* max-width: 880px; */
-  height: 279px;
+  padding: 32px;
   grid-template-areas:
     "header header"
     "firstI first"
@@ -27,11 +24,16 @@ const StyledBodyAdvantages = styled.div`
     "fourI four"
     "fiveI five";
 
-  grid-template-columns: 2.7% max-content;
-  grid-template-rows: 11.6% 2.9% 2.8% 2.8% 2.8% 1.1%;
-  grid-row-gap: 32px;
-  grid-column-gap: 5px;
+  .wrapper {
+    display: flex;
+    align-items: center;
+  }
 
+  grid-template-columns: 24px 1fr;
+  grid-template-rows: min-content min-content;
+  grid-auto-rows: min-content;
+  grid-row-gap: 18px;
+  grid-column-gap: 8px;
   margin: 0;
   background: #f8f9f9;
   .advantages {
@@ -52,35 +54,31 @@ const StyledBodyAdvantages = styled.div`
   .first-advantages {
     grid-area: first;
     z-index: 1;
-    padding: 3px;
-  }
-  .first_icon {
-    grid-area: firstI;
   }
+
   .second-advantages {
     grid-area: second;
-    padding: 3px;
     z-index: 1;
   }
   .third-advantages {
     grid-area: third;
-    padding: 3px;
     z-index: 1;
   }
   .four-advantages {
     grid-area: four;
-    padding: 3px;
     z-index: 1;
   }
   .five-advantages {
     grid-area: five;
-    padding: 3px;
     z-index: 1;
   }
   .header-advantages {
     grid-area: header;
     z-index: 1;
   }
+  .first_icon {
+    grid-area: firstI;
+  }
   .second_icon {
     grid-area: secondI;
   }
@@ -94,97 +92,14 @@ const StyledBodyAdvantages = styled.div`
     grid-area: fiveI;
   }
   @media ${tablet} {
-    /* width: minmax(280px, 560px); */
-    max-width: 600px;
-    height: 100%;
-    /* margin-right: 32px; */
-    grid-template-columns: 2.7% 90.3%;
-    grid-template-rows: min-content min-content;
-    grid-auto-rows: min-content;
-    grid-row-gap: 12px;
-    grid-column-gap: 5px;
     .main_icon {
       display: none;
     }
-    .header-advantages {
-      margin-bottom: 21px;
-    }
-    .first-advantages {
-      padding-left: 12px;
-      margin-bottom: 6px;
-      padding-top: 3px;
-    }
-    .four-advantages {
-      padding-left: 5px;
-    }
-    .second-advantages {
-      padding-left: 12px;
-      margin-bottom: 6px;
-      padding-top: 3px;
-    }
-    .third-advantages {
-      padding-left: 12px;
-      margin-bottom: 6px;
-      padding-top: 3px;
-    }
-    .four-advantages {
-      padding-left: 12px;
-      padding-top: 3px;
-      margin-bottom: 6px;
-    }
-    .five-advantages {
-      padding-left: 11px;
-      padding-top: 3px;
-      margin-bottom: 33px;
-    }
   }
 
   @media (max-width: 632px) {
-    padding-right: 32px;
-    /* width: 280px; */
-    height: 100%;
-
-    grid-template-columns: 7.9% 92.1%;
-    /* grid-template-rows: 21% 2.8% 5.3% 1.5% 5.1% 40.1%; */
-    grid-template-rows: min-content auto;
-    grid-auto-rows: min-content;
-
-    /* grid-template-columns: min-content auto;
-    grid-auto-columns: min-content;  */
-    /* grid-template-columns: 7.9% 92.1%; */
-
-    /* grid-column-gap: 5px; */
-    grid-row-gap: 10px;
-    .header-advantages {
-      margin-bottom: 23px;
-    }
-    .first-advantages {
-      padding-left: 5px;
-      margin-bottom: 6px;
-      /* padding-top: 0; */
-    }
-    .four-advantages {
-      padding-left: 5px;
-    }
-    .second-advantages {
-      padding-left: 5px;
-      margin-bottom: 5px;
-      padding-top: 0px;
-    }
-    .third-advantages {
-      padding-left: 5px;
-      margin-bottom: 6px;
-      padding-right: 0px;
-    }
-    .four-advantages {
-      padding-left: 5px;
-      padding-top: 0px;
-    }
-    .five-advantages {
-      padding-left: 5px;
-      padding-top: 0px;
-      margin-bottom: 28px;
-    }
+    grid-row-gap: 20px;
+    grid-column-gap: 12px;
   }
 `;
 
@@ -204,10 +119,11 @@ const AdvantagesContainer = () => {
         height="23px"
         alt="Icon_cubes"
       />
-      <Text className="first-advantages  advantages">
-        {t("OnlyOfficeEditor")}
-      </Text>
-
+      <Box className="wrapper">
+        <Text className="first-advantages  advantages">
+          {t("OnlyOfficeEditor")}
+        </Text>
+      </Box>
       <img
         className="second_icon"
         src="images/payments_enterprise_lock.svg"
@@ -215,7 +131,11 @@ const AdvantagesContainer = () => {
         height="23px"
         alt="Icon_lock"
       />
-      <Text className="second-advantages  advantages">{t("PrivateRooom")}</Text>
+      <Box className="wrapper">
+        <Text className="second-advantages  advantages">
+          {t("PrivateRooom")}
+        </Text>
+      </Box>
       <img
         className="third_icon"
         src="images/payments_enterprise_smartphone.svg"
@@ -223,7 +143,9 @@ const AdvantagesContainer = () => {
         height="23px"
         alt="Icon_smartphone"
       />
-      <Text className="third-advantages  advantages">{t("WebEditors")}</Text>
+      <Box className="wrapper">
+        <Text className="third-advantages  advantages">{t("WebEditors")}</Text>
+      </Box>
       <img
         className="four_icon"
         src="images/payments_enterprise_update.svg"
@@ -231,9 +153,11 @@ const AdvantagesContainer = () => {
         height="23px"
         alt="Icon_update"
       />
-      <Text className="four-advantages  advantages">
-        {t("FunctionalityAndSecurity")}
-      </Text>
+      <Box className="wrapper">
+        <Text className="four-advantages  advantages">
+          {t("FunctionalityAndSecurity")}
+        </Text>
+      </Box>
       <img
         className="five_icon"
         src="images/payments_enterprise_help.svg"
@@ -241,9 +165,11 @@ const AdvantagesContainer = () => {
         height="23px"
         alt="Icon_help"
       />
-      <Text className="five-advantages  advantages">
-        {t("ProfessionalTechSupport")}
-      </Text>
+      <Box className="wrapper">
+        <Text className="five-advantages  advantages">
+          {t("ProfessionalTechSupport")}
+        </Text>
+      </Box>
       <img
         className="payments-icon-enterprise main_icon"
         src="images/payments_enterprise.svg"
diff --git a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/buttonContainer.js b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/buttonContainer.js
index 18bf76c3ec..0093f2b1cc 100644
--- a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/buttonContainer.js
+++ b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/buttonContainer.js
@@ -41,7 +41,6 @@ const StyledButtonContainer = styled.div`
     display: none;
   }
   @media ${tablet} {
-    max-width: 600px;
     height: 168px;
     display: grid;
     .button-buy {
@@ -58,7 +57,6 @@ const StyledButtonContainer = styled.div`
     }
   }
   @media (max-width: 632px) {
-    min-width: 343px;
     height: 168px;
     margin-bottom: 16px;
     .button-buy {
diff --git a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/contactContainer.js b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/contactContainer.js
index b24c1e6889..a7fd959ede 100644
--- a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/contactContainer.js
+++ b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/contactContainer.js
@@ -16,7 +16,7 @@ const i18n = createI18N({
 
 const StyledContactContainer = styled.div`
   display: grid;
-  max-width: 600px;
+
   .contact-emails {
     position: static;
     margin-bottom: 11px;
@@ -26,13 +26,10 @@ const StyledContactContainer = styled.div`
   }
 
   @media (max-width: 632px) {
-    min-width: 343px;
-
     .contact-emails {
       margin-bottom: 10px;
     }
     .contact-emails_link {
-      /* display: block; */
       margin-top: 3px;
     }
   }
diff --git a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/headerContainer.js b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/headerContainer.js
index c44a3e2960..c3e7e67272 100644
--- a/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/headerContainer.js
+++ b/web/ASC.Web.Client/src/components/pages/PaymentsEnterprise/sub-components/headerContainer.js
@@ -34,7 +34,6 @@ const StyledHeader = styled.div`
 
   @media ${tablet} {
     display: grid;
-    max-width: 600px;
     .payments-header {
       margin-top: 39px;
       font-style: normal;
@@ -45,7 +44,6 @@ const StyledHeader = styled.div`
   }
 
   @media (max-width: 632px) {
-    min-width: 343px;
     .payments-header {
       margin-top: 1px;
     }
@@ -65,7 +63,7 @@ const HeaderContainer = ({
     changeLanguage(i18n);
     const moment = require("moment");
     require("moment/min/locales.min");
-    moment.locale(culture);
+    culture && moment.locale(culture);
   }, [culture]);
 
   const { t } = useTranslation("translation", { i18n });