BernardoWaldhelm/desafio-react-e-typescript-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(home): criando Icone como component, atribuindo-o ao footerbottom

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-13 12:43:34 -03:00
parent a12c2d41da
commit 596858810e
4 changed files with 28 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Atoms/ButtonsFixed/ButtonsFixed.module.scss
View File

@ -11,11 +11,11 @@
padding-right: 16px;
@media #{$mq-tablet} {
bottom: 22px;
bottom: 51px;
}
@media #{$mq-mobile} {
bottom: 16px;
bottom: 29px;
}
&__list {

11
src/components/organisms/Footer/FooterBottom/FooterBottom.module.scss
View File

@ -57,7 +57,7 @@
align-items: center;
justify-content: center;
&__card {
li{
margin-right: 12px;
width: 70px;
@ -87,11 +87,20 @@
@media #{$mq-mobile} {
width: 30px;
height: 17px;
}
@media (max-width: 310px) {
width: 25px;
}
&.vtex-security {
width: 45px;
@media (max-width: 310px) {
width: 35px;
}
}
}
}
}

39
src/components/organisms/Footer/FooterBottom/FooterBottom.tsx
View File

@ -10,6 +10,7 @@ import visa from "../../../../assets/imgs/visa.png";
import vtex from "../../../../assets/imgs/vtex-pci-200.png";
import vtexLogo from "../../../../assets/imgs/vtex-logo.png";
import m3Logo from "../../../../assets/imgs/m3-logo-footer.png";
import { Icone } from "../../../Atoms/Icones/Icone";
const FooterBottom = () => {
return (
@ -20,33 +21,23 @@ const FooterBottom = () => {
</p>
<div className={styles["footer__bottom__payments"]}>
<ul className={styles["footer__bottom__payments__cards"]}>
<li className={styles["footer__bottom__payments__cards__card"]}>
<img src={master} alt="Cartão Mastercard" />
</li>
<li className={styles["footer__bottom__payments__cards__card"]}>
<img src={visa} alt="Cartão Visa" />
</li>
<li className={styles["footer__bottom__payments__cards__card"]}>
<img src={diners} alt="Cartão American Express" />
</li>
<li className={styles["footer__bottom__payments__cards__card"]}>
<img src={elo} alt="Cartão Elo" />
</li>
<li className={styles["footer__bottom__payments__cards__card"]}>
<img src={hiper} alt="Cartão Hipercard" />
</li>
<li className={styles["footer__bottom__payments__cards__card"]}>
<img src={pagseguro} alt="PagSeguro" />
</li>
<li className={styles["footer__bottom__payments__cards__card"]}>
<img src={boleto} alt="Boleto" />
</li>
<Icone src={master} alt="Cartão Mastercard" />
<Icone src={visa} alt="Cartão Visa" />
<Icone src={diners} alt="Cartão American Express" />
<Icone src={elo} alt="Cartão Elo" />
<Icone src={hiper} alt="Cartão Hipercard" />
<Icone src={pagseguro} alt="PagSeguro" />
<Icone src={boleto} alt="Boleto" />
</ul>
<div className={styles["footer__bottom__payments__divider"]}></div>
<ul className={styles["footer__bottom__payments__security"]}>
<li className={styles["footer__bottom__payments-cards__card"]}>
<img src={vtex} alt="Vtex PCI - SECURITY" />
</li>
<Icone src={vtex} alt="Vtex PCI - SECURITY" />
</ul>
</div>
<div className={styles["footer__bottom__development"]}>

6
src/components/organisms/Footer/FooterTop/FooterTop.scss
View File

@ -143,14 +143,10 @@
line-height: 33px;
color: $color-black-500;
@media #{$mq-desktop} {
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile}{
font-size: 14px;
line-height: 16px;
}
@media #{$mq-tablet}, #{$mq-mobile} {
display: none;
}
}
}
}