Refactoring styles of advantages-container, button-container, contact-container

This commit is contained in:
TatianaLopaeva 2020-09-18 12:25:49 +03:00
parent fa89566f8f
commit f4e876ccb5
4 changed files with 18 additions and 21 deletions

View File

@ -59,6 +59,7 @@ class Body extends React.PureComponent {
currentProductId,
setCurrentProductId,
} = this.props;
currentProductId !== "payments" && setCurrentProductId("payments");
getSettingsPayment();
}

View File

@ -44,7 +44,7 @@ const StyledBodyAdvantages = styled.div`
.first-advantages {
grid-area: first;
z-index: 1;
/* padding: 3px; */
padding: 3px;
}
.first_icon {
grid-area: firstI;
@ -101,7 +101,7 @@ const StyledBodyAdvantages = styled.div`
margin-bottom: 21px;
}
.first-advantages {
padding-left: 11px;
padding-left: 12px;
margin-bottom: 6px;
padding-top: 3px;
}
@ -109,24 +109,24 @@ const StyledBodyAdvantages = styled.div`
padding-left: 5px;
}
.second-advantages {
padding-left: 11px;
margin-bottom: 5px;
padding-left: 12px;
margin-bottom: 6px;
padding-top: 3px;
}
.third-advantages {
padding-left: 11px;
margin-bottom: 5px;
padding-left: 12px;
margin-bottom: 6px;
padding-top: 3px;
}
.four-advantages {
padding-left: 11px;
padding-left: 12px;
padding-top: 3px;
margin-bottom: 6px;
}
.five-advantages {
padding-left: 11px;
padding-top: 3px;
margin-bottom: 32px;
margin-bottom: 33px;
}
}
@ -145,13 +145,13 @@ const StyledBodyAdvantages = styled.div`
/* grid-template-columns: 7.9% 92.1%; */
/* grid-column-gap: 5px; */
grid-row-gap: 13px;
grid-row-gap: 10px;
.header-advantages {
margin-bottom: 21px;
margin-bottom: 23px;
}
.first-advantages {
padding-left: 5px;
margin-bottom: 4px;
margin-bottom: 6px;
/* padding-top: 0; */
}
.four-advantages {
@ -159,12 +159,12 @@ const StyledBodyAdvantages = styled.div`
}
.second-advantages {
padding-left: 5px;
margin-bottom: 2px;
margin-bottom: 5px;
padding-top: 0px;
}
.third-advantages {
padding-left: 5px;
margin-bottom: 4px;
margin-bottom: 6px;
padding-right: 0px;
}
.four-advantages {
@ -174,7 +174,7 @@ const StyledBodyAdvantages = styled.div`
.five-advantages {
padding-left: 5px;
padding-top: 0px;
margin-bottom: 29px;
margin-bottom: 28px;
}
}
`;
@ -183,7 +183,6 @@ const AdvantagesContainer = ({ t }) => {
return (
<StyledBodyAdvantages>
<Text className="header-advantages">{t("SubscriptionGet")}</Text>
<img
className="first_icon"
src="images/payments_enterprise_cubes.svg"
@ -203,7 +202,6 @@ const AdvantagesContainer = ({ t }) => {
alt="Icon"
/>
<Text className="second-advantages advantages">{t("PrivateRooom")}</Text>
<img
className="third_icon"
src="images/payments_enterprise_smartphone.svg"
@ -212,7 +210,6 @@ const AdvantagesContainer = ({ t }) => {
alt="Icon"
/>
<Text className="third-advantages advantages">{t("WebEditors")}</Text>
<img
className="four_icon"
src="images/payments_enterprise_update.svg"
@ -223,7 +220,6 @@ const AdvantagesContainer = ({ t }) => {
<Text className="four-advantages advantages">
{t("FunctionalityAndSecurity")}
</Text>
<img
className="five_icon"
src="images/payments_enterprise_help.svg"
@ -234,7 +230,6 @@ const AdvantagesContainer = ({ t }) => {
<Text className="five-advantages advantages">
{t("ProfessionalTechSupport")}
</Text>
<img
className="payments-icon-enterprise main_icon"
src="images/payments_enterprise.svg"

View File

@ -10,7 +10,7 @@ const { tablet } = utils.device;
const StyledButtonContainer = styled.div`
background: #edf2f7;
height: 108px;
margin-bottom: 17px;
margin-bottom: 18px;
display: flex;
.button-payments-enterprise {
border-radius: 3px;
@ -51,6 +51,7 @@ const StyledButtonContainer = styled.div`
@media (max-width: 632px) {
width: 343px;
height: 168px;
margin-bottom: 16px;
.button-buy {
width: 279px;
}

View File

@ -18,7 +18,7 @@ const StyledContactContainer = styled.div`
width: 343px;
.contact-emails {
margin-bottom: 12px;
margin-bottom: 10px;
}
.contact-emails_link {
display: block;