Web: Fixed styles.

2022-09-20 10:41:09 +03:00 · 2022-09-20 10:41:09 +03:00 · 5b95f8778d
commit 5b95f8778d
parent f251632987
10 changed files with 107 additions and 65 deletions
--- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
+++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
@ -146,7 +146,7 @@ class SectionHeaderContent extends React.Component {
      isBrandingAndCustomizationAvailable,
      isRestoreAndAutoBackupAvailable,
    } = this.props;
-    console.log("key", key);
+
    switch (key) {
      case "DNSSettings":
        return isBrandingAndCustomizationAvailable;
--- a/packages/client/src/pages/PortalSettings/categories/payments/BenefitsContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/BenefitsContainer.js
@ -25,14 +25,14 @@ const StyledBody = styled.div`
    margin-bottom: 20px;
  }
  .payment-benefits {
-    display: flex;
-    margin-bottom: 16px;
+    margin-bottom: 14px;
    align-items: flex-start;
+    display: grid;
+    grid-template-columns: 24px 1fr;
+    grid-gap: 10px;
    p {
-      margin-left: 8px;
      margin-bottom: 0;
    }
-
    svg {
      path {
        //fill: red !important;
@ -41,7 +41,7 @@ const StyledBody = styled.div`
  }
 `;

-const BenefitsContainer = ({ t, features }) => {
+const BenefitsContainer = ({ t, features, theme }) => {
  return (
    <StyledBody>
      <Text
@ -53,11 +53,17 @@ const BenefitsContainer = ({ t, features }) => {
        {t("Benefits")}
      </Text>
      {features.map((item, index) => {
-        if (!item.title) return;
+        if (!item.title || !item.image) return;
        return (
          <div className="payment-benefits" key={index}>
            <div dangerouslySetInnerHTML={{ __html: item.image }} />
-            <Text noSelect>{item.title}</Text>
+            <Text
+              noSelect
+              fontWeight={"600"}
+              color={theme.client.settings.payment.benefitsTextColor}
+            >
+              {item.title}
+            </Text>
          </div>
        );
      })}
@ -66,11 +72,12 @@ const BenefitsContainer = ({ t, features }) => {
 };

 export default inject(({ auth }) => {
-  const { paymentQuotasStore } = auth;
-
+  const { paymentQuotasStore, settingsStore } = auth;
+  const { theme } = settingsStore;
  const { portalPaymentQuotasFeatures } = paymentQuotasStore;

  return {
+    theme,
    features: portalPaymentQuotasFeatures,
  };
 })(observer(BenefitsContainer));
--- a/packages/client/src/pages/PortalSettings/categories/payments/ContactContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/ContactContainer.js
@ -11,7 +11,7 @@ const StyledContactContainer = styled.div`
  display: flex;
  width: max-content;
  p {
-    margin-right: 8px;
+    margin-right: 4px;
  }
 `;

--- a/packages/client/src/pages/PortalSettings/categories/payments/CurrentTariffContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/CurrentTariffContainer.js
@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import { PortalFeaturesLimitations } from "@docspace/common/constants";
 import { getConvertedSize } from "@docspace/common/utils";
+import { mobile } from "@docspace/components/utils/device";

 const StyledCurrentTariffContainer = styled.div`
  display: flex;
@ -12,13 +13,18 @@ const StyledCurrentTariffContainer = styled.div`
  background: ${(props) => props.theme.client.settings.payment.backgroundColor};
  margin-bottom: 24px;
  flex-wrap: wrap;
-  margin-top: 16px;
+  margin-top: 14px;
  padding: 12px 16px;
  box-sizing: border-box;
  padding-bottom: 0;

+  @media ${mobile} {
+    flex-direction: column;
+    margin-bottom: 27px;
+  }
+
  div {
-    padding-bottom: 12px;
+    padding-bottom: 8px;
    margin-right: 24px;
  }

@ -27,7 +33,7 @@ const StyledCurrentTariffContainer = styled.div`
    color: ${(props) => props.theme.client.settings.payment.tariffText};
    .current-tariff_count {
      color: ${(props) => props.theme.client.settings.payment.tariffText};
-      margin-left: 5px;
+      margin-left: 4px;
    }
  }
 `;
@ -58,9 +64,14 @@ const CurrentTariffContainer = ({ style, quotaCharacteristics }) => {

        return (
          <div key={index}>
-            <Text isBold noSelect>
+            <Text isBold noSelect fontSize={"14px"}>
              {item.used.title}
-              <Text className="current-tariff_count" as="span" isBold>
+              <Text
+                className="current-tariff_count"
+                as="span"
+                isBold
+                fontSize={"14px"}
+              >
                {resultingUsedValue}
                {resultingMaxValue ? `/${resultingMaxValue}` : ""}
              </Text>
--- a/packages/client/src/pages/PortalSettings/categories/payments/PayerInformationContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/PayerInformationContainer.js
@ -29,7 +29,7 @@ const StyledContainer = styled.div`
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content;
-    grid-gap: 6px;
+    grid-gap: 4px;

    .payer-info_description {
      display: flex;
@ -124,7 +124,7 @@ const PayerInformationContainer = ({
  );

  const payerName = (
-    <Text fontWeight={600} noSelect>
+    <Text fontWeight={600} noSelect fontSize={"14px"}>
      {payerInfo ? (
        payerInfo.displayName
      ) : (
@ -142,7 +142,11 @@ const PayerInformationContainer = ({
  return (
    <StyledContainer style={style} theme={theme}>
      <div className="payer-info_avatar">
-        <Avatar size={"min"} source={user.avatar} userName={user.displayName} />
+        <Avatar
+          size={"base"}
+          source={user.avatar}
+          userName={user.displayName}
+        />
      </div>

      <div className="payer-info_wrapper">
--- a/packages/client/src/pages/PortalSettings/categories/payments/PriceCalculation.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/PriceCalculation.js
@ -36,6 +36,7 @@ const StyledBody = styled.div`
    background: ${(props) =>
      props.theme.client.settings.payment.backgroundPrice};
    margin-top: 24px;
+    min-height: 38px;
    p:first-child {
      margin-right: 8px;
    }
@ -125,6 +126,41 @@ const PriceCalculation = ({

  const color = isDisabled ? { color: theme.text.disableColor } : {};

+  const priceInfoPerManager = (
+    <div className="payment_price_user">
+      <Text
+        noSelect
+        fontSize={"13px"}
+        color={
+          isDisabled
+            ? theme.client.settings.payment.disabledPriceColor
+            : theme.client.settings.payment.priceColor
+        }
+        fontWeight={600}
+      >
+        <Trans t={t} i18nKey="PerUserMonth" ns="Payments">
+          ""
+          <Text
+            fontSize="16px"
+            isBold
+            as="span"
+            fontWeight={600}
+            color={
+              isDisabled
+                ? theme.client.settings.payment.disabledPriceColor
+                : theme.client.settings.payment.priceColor
+            }
+          >
+            {{ currencySymbol }}
+          </Text>
+          <Text fontSize="16px" isBold as="span" fontWeight={600}>
+            {{ price: priceManagerPerMonth }}
+          </Text>
+          per manager/month
+        </Trans>
+      </Text>
+    </div>
+  );
  return (
    <StyledBody>
      <Text
@ -145,39 +181,8 @@ const PriceCalculation = ({
          isAlreadyPaid={isAlreadyPaid}
        />
      )}
-      <div className="payment_price_user">
-        <Text
-          noSelect
-          fontSize={"11px"}
-          color={
-            isDisabled
-              ? theme.client.settings.payment.disabledPriceColor
-              : theme.client.settings.payment.priceColor
-          }
-          fontWeight={600}
-        >
-          <Trans t={t} i18nKey="PerUserMonth" ns="Payments">
-            ""
-            <Text
-              fontSize="16px"
-              isBold
-              as="span"
-              fontWeight={600}
-              color={
-                isDisabled
-                  ? theme.client.settings.payment.disabledPriceColor
-                  : theme.client.settings.payment.priceColor
-              }
-            >
-              {{ currencySymbol }}
-            </Text>
-            <Text fontSize="16px" isBold as="span" fontWeight={600}>
-              {{ price: priceManagerPerMonth }}
-            </Text>
-            per manager/month
-          </Trans>
-        </Text>
-      </div>
+
+      {priceInfoPerManager}

      <TotalTariffContainer t={t} isDisabled={isDisabled} />
      <ButtonContainer
--- a/packages/client/src/pages/PortalSettings/categories/payments/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/index.js
@ -42,13 +42,13 @@ const StyledBody = styled.div`
  }
  .payment-info_wrapper {
    display: flex;
-    margin-bottom: 20px;
-    margin-top: 12px;
+    margin-bottom: 18px;
+    margin-top: 11px;
    div {
      margin: auto 0;
    }
    .payment-info_managers-price {
-      margin-right: 8px;
+      margin-right: 6px;
    }
  }
 `;
@ -262,7 +262,7 @@ const PaymentsPage = ({
      {planSuggestion()}

      {isGracePeriod && (
-        <Text noSelect fontSize={"14px"}>
+        <Text noSelect fontSize={"14px"} lineHeight={"16px"}>
          <Trans t={t} i18nKey="GracePeriodActivatedDescription" ns="Payments">
            Grace period activated from <strong>{{ fromDate }}</strong> -
            <strong>{{ byDate }}</strong> (<strong>{{ delayDaysCount }}</strong>
@ -275,6 +275,7 @@ const PaymentsPage = ({
        <Text
          noSelect
          fontSize={"14px"}
+          lineHeight={"16px"}
          className="payment-info_managers-price"
        >
          <Trans t={t} i18nKey="BusinessFinalDateInfo" ns="Payments">
@ -287,7 +288,7 @@ const PaymentsPage = ({
        <Text
          noSelect
          fontWeight={600}
-          fontSize={"14"}
+          fontSize={"14px"}
          className="payment-info_managers-price"
        >
          <Trans t={t} i18nKey="StartPrice" ns="Payments">
--- a/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectTotalSizeContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectTotalSizeContainer.js
@ -11,7 +11,7 @@ import { inject, observer } from "mobx-react";
 import { getConvertedSize } from "@docspace/common/utils";
 const StyledBody = styled.div`
  .select-total-size_title {
-    margin-bottom: 12px;
+    margin-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
    width: max-content;
--- a/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectUsersCountContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/sub-components/SelectUsersCountContainer.js
@ -14,6 +14,10 @@ const StyledBody = styled.div`
  max-width: 272px;
  margin: 0 auto;

+  .payment-slider {
+    margin-top: 20px;
+  }
+
  @media ${smallTablet} {
    max-width: 520px;
  }
@ -21,7 +25,8 @@ const StyledBody = styled.div`
  .slider-track {
    display: flex;
    position: relative;
-    margin-top: -10px;
+    margin-top: -8px;
+    margin-left: -3px;
    height: 16px;

    .slider-track-value_min,
@ -41,12 +46,13 @@ const StyledBody = styled.div`
  }

  .payment-operations_input {
-    width: 111px;
+    width: 101px;
+    height: 60px;
    font-size: 44px;
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
-
+    padding: 0;
    ${(props) =>
      props.isDisabled &&
      css`
@ -80,8 +86,8 @@ const StyledBody = styled.div`
      border: 1px solid
        ${(props) => props.theme.client.settings.payment.rectangleColor};
      border-radius: 50%;
-      width: 40px;
-      height: 40px;
+      width: 38px;
+      height: 38px;
      justify-content: center;
      -ms-align-items: center;
      align-items: center;
@ -227,6 +233,10 @@ const SelectUsersCountContainer = ({
      </div>

      <Slider
+        thumbBorderWidth={"8px"}
+        thumbHeight={"32px"}
+        thumbWidth={"32px"}
+        runnableTrackHeight={"12px"}
        isDisabled={isDisabled || isUpdatingTariff}
        isReadOnly={isDisabled || isUpdatingTariff}
        type="range"
@ -238,6 +248,7 @@ const SelectUsersCountContainer = ({
          isLessCountThanAcceptable ? minAvailableManagersValue : managersCount
        }
        {...onChangeSlideProp}
+        className="payment-slider"
      />
      <div className="slider-track">
        <Text className="slider-track-value_min" noSelect>
--- a/packages/client/src/pages/PortalSettings/categories/payments/sub-components/TotalTariffContainer.js
+++ b/packages/client/src/pages/PortalSettings/categories/payments/sub-components/TotalTariffContainer.js
@ -28,10 +28,13 @@ const StyledBody = styled.div`
    .payment_price_description {
      margin-top: 16px;
    }
-
+    .total-tariff_description {
+      margin: auto;
+    }
    .payment_price_month-text {
      margin: auto 0;
-      margin-bottom: 13px;
+      margin-bottom: 9px;
+      margin-left: 8px;
    }
  }