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

feat: scss footer desktop

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2023-01-13 16:56:01 -03:00
parent 5be44938b0
commit bf62ae323c
10 changed files with 118 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
desafio-react-e-typescript/src/App.scss
View File

@ -24,11 +24,11 @@ body {
width: 100%;
@media (min-width: 1025px) {
padding: 20px 100px 20px 30px;
padding: 20px 100px 20px 0px;
}
h2 {
margin: 0 30px;
margin: 0;
font-family: $fontFamily;
font-style: normal;
font-weight: 700;
@ -43,7 +43,7 @@ body {
}
.MainText {
margin: 12px 0 0 25px;
margin-top: 12px;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;

27
desafio-react-e-typescript/src/components/Footer/BottomFooter.tsx
View File

@ -20,23 +20,24 @@ export const BottomFooter = () => {
</span>
<div className="Payment_methods">
<img src={Master} alt="Master-icon" />
<img src={Visa} alt="Visa-icon" />
<img src={Diners} alt="Diners-icon" />
<img src={Elo} alt="Elo-icon" />
<img src={Hiper} alt="Hiper-icon" />
<img src={Pagseguro} alt="Pagseguro-icon" />
<img src={Boleto} alt="Boleto-icon" />
<span> / </span>
<img src={vtex} alt="vtex-icon" />
<img className="carts_icons" src={Master} alt="Master-icon" />
<img className="carts_icons" src={Visa} alt="Visa-icon" />
<img className="carts_icons" src={Diners} alt="Diners-icon" />
<img className="carts_icons" src={Elo} alt="Elo-icon" />
<img className="carts_icons" src={Hiper} alt="Hiper-icon" />
<img className="carts_icons" src={Pagseguro} alt="Pagseguro-icon" />
<img className="carts_icons" src={Boleto} alt="Boleto-icon" />
<span className="div_icons"> </span>
<img className="vtex_icon" src={vtex} alt="vtex-icon" />
</div>
<div className="Authors">
<span className="Authors_title"> Powered by </span>
<img src={Vtex} alt="Vtex-logo" />
<span className="Powered_by"> Powered by </span>
<img className="vtex_logo" src={Vtex} alt="Vtex-logo" />
<span className="Authors_title"> Developed by </span>
<img src={M3} alt="M3-logo" />
<span className="Developed_by"> Developed by </span>
<img className="m3_logo" src={M3} alt="M3-logo" />
</div>
</div>
</>

73
desafio-react-e-typescript/src/components/Footer/FooterMain.modules.scss
View File

@ -8,13 +8,13 @@
display: flex;
flex-direction: column;
border-bottom: 1px solid $color-black;
padding: 16px 0;
padding: 16px 31.485%;
.Newsletter_wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-self: center;
// align-self: center;
.News_title {
font-family: $fontFamily;
@ -141,6 +141,19 @@
top: 50px;
}
.button_wrapper {
position: relative;
}
.button_wrapper::after {
content: " ";
width: 13px;
height: 7px;
top: 33%;
right: 31%;
position: absolute;
background-image: url("../assets/imgs/SVGs/Vector.svg");
}
.button {
display: flex;
background-image: url("../assets/imgs/SVGs/Vector.svg");
@ -159,29 +172,50 @@
}
.corporateName {
max-width: 234px;
display: flex;
align-self: center;
width: 234px;
height: 24px;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
color: $color-white;
}
.Payment_methods {
align-items: center;
display: flex;
gap: 12px;
.carts_icons {
width: 36px;
height: 20px;
}
.div_icons {
content: "";
border: 1px solid $color-gray;
transform: rotate(90deg);
width: 24px;
height: 0px;
}
.vtex_icon {
width: 54.61px;
height: 34px;
}
}
.Authors {
display: flex;
gap: 13px;
.Authors_title {
.Powered_by {
display: flex;
align-items: center;
min-width: 61px;
width: 53px;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;
@ -190,6 +224,33 @@
text-transform: capitalize;
color: $color-white;
}
.Developed_by {
display: flex;
align-items: center;
width: 61px;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-transform: capitalize;
color: $color-white;
}
.vtex_logo {
display: flex;
align-self: center;
width: 44.92px;
height: 16px;
}
.m3_logo {
display: flex;
align-self: center;
width: 28.66px;
height: 15.65px;
}
}
}
}

5
desafio-react-e-typescript/src/components/Footer/wpp.tsx
View File

@ -1,5 +1,4 @@
import Wpp from "../assets/imgs/SVGs/whatsapp.svg";
import Vector from "../assets/imgs/SVGs/Vector.svg";
import Ellipse from "../assets/imgs/SVGs/Ellipse.svg";
export const WppIcon = () => {
@ -7,7 +6,9 @@ export const WppIcon = () => {
<>
<div className="Wpp-Icon">
<img src={Wpp} alt="Wpp-logo" />
<img className="Button_wpp" src={Ellipse} alt="Ellipse-logo" />
<div className="button_wrapper">
<img className="Button_wpp" src={Ellipse} alt="Ellipse-logo" />
</div>
</div>
</>
);

22
desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss
View File

@ -25,6 +25,7 @@
max-width: 515px;
.Search_Header {
position: relative;
width: 100%;
height: 16px;
padding: 8px;
@ -37,18 +38,15 @@
padding: 12px;
}
}
.InconWrapper {
position: relative;
height: 18px;
top: 0%;
right: 32px;
cursor: pointer;
}
.SearchIcon {
position: absolute;
}
}
.Search_Header_wrapper::after {
position: absolute;
content: "";
width: 18px;
height: 18px;
right: 16px;
background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg");
cursor: pointer;
}
.Headerlinks {
display: flex;

12
desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx
View File

@ -3,7 +3,6 @@ import { NavLink } from "react-router-dom";
import LogoM3 from "../assets/imgs/SVGs/M3Logo_desktop.svg";
import CartIcon from "../assets/imgs/SVGs/CartIcon_desktop.svg";
import SearchIcon from "../assets/imgs/SVGs/search-icon-desktop.svg";
import { ContentMenuHeader } from "./ContentMenuHeader";
@ -24,16 +23,7 @@ export const HeaderDesktop = () => {
className="Search_Header"
placeholder="Buscar..."
/>
<label className="InconWrapper" htmlFor={"Search_Header"}>
<img
src={SearchIcon}
className="SearchIcon"
alt="Search-Icon"
onClick={() => {
}}
/>
</label>
<label className="InconWrapper" htmlFor={"Search_Header"}></label>
</div>
<div className="Headerlinks">
<NavLink to={"/"} className="EnterLink">

23
desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss
View File

@ -94,18 +94,23 @@
width: 100%;
.Search_Header {
width: 100%;
height: 36px;
background: $color-white;
width: 96.372%;
border: 2px solid $color-white-100;
border-radius: 5px;
color: $color-gray;
}
padding: 10px 16px;
.SearchIcon {
position: absolute;
top: 25%;
right: 8px;
&::placeholder {
color: $color-gray;
}
}
}
.Search_Header_wrapper::after {
position: absolute;
content: "";
width: 18px;
height: 18px;
right: 16px;
background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg");
cursor: pointer;
}
}

4
desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx
View File

@ -4,7 +4,6 @@ import { NavLink } from "react-router-dom";
import LogoM3 from "../assets/imgs/SVGs/Logo-M3Academy_mobile.svg";
import CartIcon from "../assets/imgs/SVGs/minicart_mobile.svg";
import MenuHamburguer from "../assets/imgs/SVGs/MenuHamburguer.svg";
import SearchIcon from "../assets/imgs/SVGs/search-icon-desktop.svg";
import { Modal } from "../Modal";
import "./HeaderMobile.modules.scss";
@ -32,9 +31,6 @@ export const HeaderMobile = () => {
</div>
<div className="Search_Header_wrapper">
<input className="Search_Header" placeholder="Buscar..." />
<NavLink to={""}>
<img src={SearchIcon} className="SearchIcon" alt="Search-Icon" />
</NavLink>
</div>
</section>
</>

6
desafio-react-e-typescript/src/components/Navegation.modules.scss
View File

@ -10,14 +10,17 @@
}
ul {
width: 94.379%;
list-style: none;
padding: 0;
margin: 0 !important;
.Title_links {
a {
display: flex;
width: 97%;
padding: 26px 16px;
margin: 0 !important;
list-style: none;
@media (max-width: 1024px) {
padding: 10px 16px;
@ -32,6 +35,7 @@
.active {
background: $color-black;
color: $color-white;
margin: 0 !important;
}
a {

2
desafio-react-e-typescript/src/pages/Contact.modules.scss
View File

@ -12,7 +12,7 @@ form {
@media (min-width: 1025px) {
width: 100%;
padding: 12px 30px;
padding: 12px 0px;
}
input {