diff --git a/desafio-react-typescript/src/assets/svgs/close-button.svg b/desafio-react-typescript/src/assets/svgs/close-button.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/desafio-react-typescript/src/assets/svgs/close-button.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio-react-typescript/src/components/Header/Header.module.scss b/desafio-react-typescript/src/components/Header/Header.module.scss new file mode 100644 index 0000000..ab9f51a --- /dev/null +++ b/desafio-react-typescript/src/components/Header/Header.module.scss @@ -0,0 +1,3 @@ +.header { + position: relative; +} \ No newline at end of file diff --git a/desafio-react-typescript/src/components/Header/Header.tsx b/desafio-react-typescript/src/components/Header/Header.tsx index e61dbb1..385b77c 100644 --- a/desafio-react-typescript/src/components/Header/Header.tsx +++ b/desafio-react-typescript/src/components/Header/Header.tsx @@ -1,10 +1,11 @@ import React from "react"; import HeaderBottom from "./components/HeaderBottom"; import HeaderTop from "./components/HeaderTop"; +import styles from "./Header.module.scss"; const Header = () => { return ( -
+
diff --git a/desafio-react-typescript/src/components/Header/components/HeaderBottom.module.scss b/desafio-react-typescript/src/components/Header/components/HeaderBottom.module.scss new file mode 100644 index 0000000..f8ec82b --- /dev/null +++ b/desafio-react-typescript/src/components/Header/components/HeaderBottom.module.scss @@ -0,0 +1,78 @@ +@import "../../../styles/all.scss"; + +.headerBottom { + border-top: 1px solid $primary-600; + background: $black; + + padding: 14px 100px; + + @include mq($lg, max) { + position: absolute; + background-color: $white; + background: rgba(69, 69, 69, 0.7); + + top: 0; + border: 0; + padding: 0; + width: 100%; + height: 100vh; + + // display: none; + } + + &__head { + display: none; + + @include mq($lg, max) { + @include display(flex, row, center, space-between); + padding: 31px 16px; + background-color: $black; + + width: 96.484375%; + } + + @include mq($sm, max) { + width: 90.4%; + } + } + + &__login { + @include fontStyle(400, 14px, 16px, $white); + text-transform: uppercase; + } + + &__container { + display: flex; + gap: 55px; + + @include mq($lg, max) { + padding: 31px 16px; + display: block; + width: 96.484375%; + height: 507px; + + background-color: white; + + li { + margin-bottom: 12px; + } + } + + @include mq($sm, max) { + width: 90.4%; + } + } + + &__content { + @include fontStyle(500, 14px, 16px, $white); + text-transform: uppercase; + + @include mq($lg, max) { + @include fontStyle(500, 14px, 16px, $primary-600); + } + + @include mq($xl, min) { + @include fontStyleResponsive(28px, 33px); + } + } +} diff --git a/desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx b/desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx index 45a42ad..b3c2197 100644 --- a/desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx +++ b/desafio-react-typescript/src/components/Header/components/HeaderBottom.tsx @@ -1,15 +1,36 @@ -import React from 'react'; +import React from "react"; +import styles from "./HeaderBottom.module.scss"; + +import close from "../../../assets/svgs/close-button.svg"; const HeaderBottom = () => { - return ( -
- -
- ) -} + return ( +
+
+

Entrar

+ +
+ +
+ ); +}; -export default HeaderBottom; \ No newline at end of file +export default HeaderBottom; diff --git a/desafio-react-typescript/src/components/Header/components/HeaderTop.module.scss b/desafio-react-typescript/src/components/Header/components/HeaderTop.module.scss index 26e90b2..78292fb 100644 --- a/desafio-react-typescript/src/components/Header/components/HeaderTop.module.scss +++ b/desafio-react-typescript/src/components/Header/components/HeaderTop.module.scss @@ -1,5 +1,5 @@ -@import "../../../styles/variaveis.scss"; -@import "../../../styles/mixins.scss"; +@import "../../../styles/all.scss"; + .headerTop { @include display(flex, row, center, space-between); @@ -66,7 +66,7 @@ padding: 8px 44px 8px 16px; @include borderStyle(2px, $primary-700, 5px); - @include fontStyle($Roboto, 400, 14px, 16px, $primary-500); + @include fontStyle(400, 14px, 16px, $primary-500); @include mq($lg, max) { height: 35px; @@ -102,7 +102,7 @@ } &__login { - @include fontStyle($Roboto, 400, 14px, 16px, $white); + @include fontStyle(400, 14px, 16px, $white); text-transform: uppercase; @include mq($lg, max) { diff --git a/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx b/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx index a10bf5c..73b4867 100644 --- a/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx +++ b/desafio-react-typescript/src/components/Header/components/HeaderTop.tsx @@ -3,16 +3,19 @@ import React from "react"; import logoM3Academy from "../../../assets/imgs/Logo-M3Academy.png"; import carrinho from "../../../assets/svgs/carrinho.svg"; import lupa from "../../../assets/svgs/lupa.svg"; -import menu from "../../../assets/svgs/menu-hamburguer.svg" +import menu from "../../../assets/svgs/menu-hamburguer.svg"; import styles from "./HeaderTop.module.scss"; const HeaderTop = () => { + return (
-
diff --git a/desafio-react-typescript/src/styles/all.scss b/desafio-react-typescript/src/styles/all.scss new file mode 100644 index 0000000..996eacd --- /dev/null +++ b/desafio-react-typescript/src/styles/all.scss @@ -0,0 +1,2 @@ +@import "./mixins.scss"; +@import "variaveis.scss"; \ No newline at end of file diff --git a/desafio-react-typescript/src/styles/global.scss b/desafio-react-typescript/src/styles/global.scss index 3463675..f6d6243 100644 --- a/desafio-react-typescript/src/styles/global.scss +++ b/desafio-react-typescript/src/styles/global.scss @@ -1,9 +1,10 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; + font-family: "Roboto", sans-serif; } input, @@ -21,6 +22,10 @@ a { text-decoration: none; } +ul { + list-style-type: none; +} + input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, diff --git a/desafio-react-typescript/src/styles/mixins.scss b/desafio-react-typescript/src/styles/mixins.scss index c287845..100e7d9 100644 --- a/desafio-react-typescript/src/styles/mixins.scss +++ b/desafio-react-typescript/src/styles/mixins.scss @@ -5,8 +5,7 @@ justify-content: $jc; } -@mixin fontStyle($fm, $fw, $fs, $lh, $fc) { - font-family: $fm; +@mixin fontStyle($fw, $fs, $lh, $fc) { font-weight: $fw; font-size: $fs; line-height: $lh; diff --git a/desafio-react-typescript/src/styles/variaveis.scss b/desafio-react-typescript/src/styles/variaveis.scss index 82ed3d7..ae83622 100644 --- a/desafio-react-typescript/src/styles/variaveis.scss +++ b/desafio-react-typescript/src/styles/variaveis.scss @@ -13,10 +13,6 @@ $primary-700: #F2F2F2; $primary-800: #F9F9F9; $primary-900: #FF0000; - -//Fonts -$Roboto: "Roboto"; - //media Queries $sm: 375px; $lg: 1024px;