From 88cb9e66c31787e383f16944b3a18ea67524f1f6 Mon Sep 17 00:00:00 2001 From: WillSimao Date: Fri, 30 Dec 2022 16:39:05 -0300 Subject: [PATCH 01/10] feat(Header): Estiliza componentes header --- react-ts/src/App.tsx | 12 ------- .../src/{App.css => Pages/Home/Home.scss} | 0 react-ts/src/Pages/Home/Home.tsx | 12 +++++++ react-ts/src/assets/images/cart-header.svg | 12 +++++++ react-ts/src/assets/images/icon-search.svg | 10 ++++++ react-ts/src/assets/images/logo-m3academy.svg | 9 ++++++ react-ts/src/components/Header/Header.scss | 11 +++++++ react-ts/src/components/Header/Header.tsx | 31 +++++++++++++++++++ .../components/InputSearch/InputSearch.scss | 28 +++++++++++++++++ .../components/InputSearch/InputSearch.tsx | 16 ++++++++++ react-ts/src/index.css | 5 --- react-ts/src/index.scss | 1 + react-ts/src/main.tsx | 6 ++-- react-ts/src/styles/common/Reset.scss | 9 ++++++ react-ts/src/styles/utils/Variables.scss | 14 +++++++++ 15 files changed, 156 insertions(+), 20 deletions(-) delete mode 100644 react-ts/src/App.tsx rename react-ts/src/{App.css => Pages/Home/Home.scss} (100%) create mode 100644 react-ts/src/Pages/Home/Home.tsx create mode 100644 react-ts/src/assets/images/cart-header.svg create mode 100644 react-ts/src/assets/images/icon-search.svg create mode 100644 react-ts/src/assets/images/logo-m3academy.svg create mode 100644 react-ts/src/components/Header/Header.scss create mode 100644 react-ts/src/components/Header/Header.tsx create mode 100644 react-ts/src/components/InputSearch/InputSearch.scss create mode 100644 react-ts/src/components/InputSearch/InputSearch.tsx delete mode 100644 react-ts/src/index.css create mode 100644 react-ts/src/index.scss create mode 100644 react-ts/src/styles/common/Reset.scss create mode 100644 react-ts/src/styles/utils/Variables.scss diff --git a/react-ts/src/App.tsx b/react-ts/src/App.tsx deleted file mode 100644 index fe4ac5d..0000000 --- a/react-ts/src/App.tsx +++ /dev/null @@ -1,12 +0,0 @@ - -import './App.css' - -function App() { - return ( -
-

test

-
- ) -} - -export default App diff --git a/react-ts/src/App.css b/react-ts/src/Pages/Home/Home.scss similarity index 100% rename from react-ts/src/App.css rename to react-ts/src/Pages/Home/Home.scss diff --git a/react-ts/src/Pages/Home/Home.tsx b/react-ts/src/Pages/Home/Home.tsx new file mode 100644 index 0000000..f1febf0 --- /dev/null +++ b/react-ts/src/Pages/Home/Home.tsx @@ -0,0 +1,12 @@ + +import './Home.scss' + +import Header from '../../components/Header/Header' + +const Home = () => { + return ( +
+ ) +} + +export default Home diff --git a/react-ts/src/assets/images/cart-header.svg b/react-ts/src/assets/images/cart-header.svg new file mode 100644 index 0000000..d9b4179 --- /dev/null +++ b/react-ts/src/assets/images/cart-header.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/react-ts/src/assets/images/icon-search.svg b/react-ts/src/assets/images/icon-search.svg new file mode 100644 index 0000000..5d36bf7 --- /dev/null +++ b/react-ts/src/assets/images/icon-search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/react-ts/src/assets/images/logo-m3academy.svg b/react-ts/src/assets/images/logo-m3academy.svg new file mode 100644 index 0000000..a33ab84 --- /dev/null +++ b/react-ts/src/assets/images/logo-m3academy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-ts/src/components/Header/Header.scss b/react-ts/src/components/Header/Header.scss new file mode 100644 index 0000000..2d08338 --- /dev/null +++ b/react-ts/src/components/Header/Header.scss @@ -0,0 +1,11 @@ +@import '../../styles/utils/Variables.scss'; + +.header { + padding: 22px 100px; + background-color: $color-black1; + &__wrapper-top { + display: flex; + align-items: center; + justify-content: space-between; + } +} \ No newline at end of file diff --git a/react-ts/src/components/Header/Header.tsx b/react-ts/src/components/Header/Header.tsx new file mode 100644 index 0000000..1864a24 --- /dev/null +++ b/react-ts/src/components/Header/Header.tsx @@ -0,0 +1,31 @@ +import './Header.scss'; + +import InputSearch from '../InputSearch/InputSearch'; +import logoM3 from '../../assets/images/logo-m3academy.svg'; + +const Header = () => { + return ( +
+
+ + + Logo m3academy + + + +
+ {/*
+ +
*/} +
+ ) +} + +export default Header \ No newline at end of file diff --git a/react-ts/src/components/InputSearch/InputSearch.scss b/react-ts/src/components/InputSearch/InputSearch.scss new file mode 100644 index 0000000..2fb604d --- /dev/null +++ b/react-ts/src/components/InputSearch/InputSearch.scss @@ -0,0 +1,28 @@ +@import '../../styles/utils/Variables.scss'; + +.wrapper-iconSearch { + display: flex; + align-items: center; + justify-content: end; + position: relative; + max-width: 264px; + width: 100%; + height: 32px; + border-radius: 5px; + &__input { + position: relative; + width: 100%; + padding: 8px 16px; + border: 2px solid #F2F2F2; + border-radius: 5px; + color: $color-grey1; + &::placeholder { + font-family: $font-family; + color: $color-grey1; + } + } + &__icon { + position: absolute; + margin-right: 16px; + } +} \ No newline at end of file diff --git a/react-ts/src/components/InputSearch/InputSearch.tsx b/react-ts/src/components/InputSearch/InputSearch.tsx new file mode 100644 index 0000000..bfdefa0 --- /dev/null +++ b/react-ts/src/components/InputSearch/InputSearch.tsx @@ -0,0 +1,16 @@ +import './InputSearch.scss'; + +import IconSearch from '../../assets/images/icon-Search.svg'; + + +const InputSearch = () => { + return ( +
+ + Icone de pesquisa +
+ ) +} + + +export default InputSearch; \ No newline at end of file diff --git a/react-ts/src/index.css b/react-ts/src/index.css deleted file mode 100644 index edf89c3..0000000 --- a/react-ts/src/index.css +++ /dev/null @@ -1,5 +0,0 @@ -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} \ No newline at end of file diff --git a/react-ts/src/index.scss b/react-ts/src/index.scss new file mode 100644 index 0000000..bf613e5 --- /dev/null +++ b/react-ts/src/index.scss @@ -0,0 +1 @@ +@import './styles/common/Reset.scss'; \ No newline at end of file diff --git a/react-ts/src/main.tsx b/react-ts/src/main.tsx index 791f139..202e68a 100644 --- a/react-ts/src/main.tsx +++ b/react-ts/src/main.tsx @@ -1,10 +1,10 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import App from './App' -import './index.css' +import Home from './Pages/Home/Home' +import './index.scss' ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - + , ) diff --git a/react-ts/src/styles/common/Reset.scss b/react-ts/src/styles/common/Reset.scss new file mode 100644 index 0000000..70b5fc1 --- /dev/null +++ b/react-ts/src/styles/common/Reset.scss @@ -0,0 +1,9 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + list-style: none; + a { + text-decoration: none; + } + } \ No newline at end of file diff --git a/react-ts/src/styles/utils/Variables.scss b/react-ts/src/styles/utils/Variables.scss new file mode 100644 index 0000000..e0a0b7f --- /dev/null +++ b/react-ts/src/styles/utils/Variables.scss @@ -0,0 +1,14 @@ +@import url('https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto:wght@400;500;700&display=swap'); + +// colors +$color-red1: #ff0000; + +$color-grey1: #c4c4c4; +$color-grey2: #b9b7b7; +$color-grey3: #c6c6c6c6; +$color-grey4: #7d7d7d; + +$color-black1: #000000; + +//fonts +$font-family: 'Roboto', sans-serif; -- 2.34.1 From b3bd0b2c028982e097a5ae5fbc982bd9f4e15cbb Mon Sep 17 00:00:00 2001 From: WillSimao Date: Mon, 2 Jan 2023 11:05:12 -0300 Subject: [PATCH 02/10] feat(Header): Finaliza header desktop 1280px --- react-ts/src/components/Header/Header.scss | 22 +++++++++++++++++- react-ts/src/components/Header/Header.tsx | 15 ++++++++---- .../src/components/UserAccount/UseAccount.tsx | 23 +++++++++++++++++++ .../components/UserAccount/UserAccount.scss | 21 +++++++++++++++++ react-ts/src/styles/utils/Variables.scss | 2 ++ 5 files changed, 77 insertions(+), 6 deletions(-) create mode 100644 react-ts/src/components/UserAccount/UseAccount.tsx create mode 100644 react-ts/src/components/UserAccount/UserAccount.scss diff --git a/react-ts/src/components/Header/Header.scss b/react-ts/src/components/Header/Header.scss index 2d08338..64d649b 100644 --- a/react-ts/src/components/Header/Header.scss +++ b/react-ts/src/components/Header/Header.scss @@ -1,11 +1,31 @@ @import '../../styles/utils/Variables.scss'; .header { - padding: 22px 100px; background-color: $color-black1; &__wrapper-top { + padding: 22px 100px; display: flex; align-items: center; justify-content: space-between; + border-bottom: 1px solid $color-grey1; + } + &__wrapper-botom { + padding: 14px 100px; + &__ul { + display: flex; + align-items: center; + column-gap: 55px; + &__li { + a { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-white1; + text-transform: uppercase; + } + } + } } } \ No newline at end of file diff --git a/react-ts/src/components/Header/Header.tsx b/react-ts/src/components/Header/Header.tsx index 1864a24..500ccf5 100644 --- a/react-ts/src/components/Header/Header.tsx +++ b/react-ts/src/components/Header/Header.tsx @@ -1,6 +1,7 @@ import './Header.scss'; import InputSearch from '../InputSearch/InputSearch'; +import UserAccount from '../UserAccount/UseAccount'; import logoM3 from '../../assets/images/logo-m3academy.svg'; const Header = () => { @@ -13,17 +14,21 @@ const Header = () => { + - {/*
-
) } diff --git a/react-ts/src/components/UserAccount/UseAccount.tsx b/react-ts/src/components/UserAccount/UseAccount.tsx new file mode 100644 index 0000000..cdbb1bf --- /dev/null +++ b/react-ts/src/components/UserAccount/UseAccount.tsx @@ -0,0 +1,23 @@ +import './UserAccount.scss'; + +import CartHeader from '../../assets/images/cart-header.svg'; + +const UserAccount = () => { + return ( +
+ +
+ ) +} + + +export default UserAccount; \ No newline at end of file diff --git a/react-ts/src/components/UserAccount/UserAccount.scss b/react-ts/src/components/UserAccount/UserAccount.scss new file mode 100644 index 0000000..3412ff8 --- /dev/null +++ b/react-ts/src/components/UserAccount/UserAccount.scss @@ -0,0 +1,21 @@ +@import '../../styles/utils/Variables.scss'; + + +.wrapper-userAccount { + &__ul { + display: flex; + column-gap: 55px; + align-items: center; + &__li-entrar { + a { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: $color-white1; + text-transform: uppercase; + } + } + } +} diff --git a/react-ts/src/styles/utils/Variables.scss b/react-ts/src/styles/utils/Variables.scss index e0a0b7f..208080c 100644 --- a/react-ts/src/styles/utils/Variables.scss +++ b/react-ts/src/styles/utils/Variables.scss @@ -1,6 +1,8 @@ @import url('https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto:wght@400;500;700&display=swap'); // colors +$color-white1: #ffffff; + $color-red1: #ff0000; $color-grey1: #c4c4c4; -- 2.34.1 From 6193e5f51ffc119175306502cfc16812990e51cd Mon Sep 17 00:00:00 2001 From: WillSimao Date: Mon, 2 Jan 2023 12:50:36 -0300 Subject: [PATCH 03/10] feat(header): Estiliza header 2500px --- react-ts/index.html | 6 +-- react-ts/src/assets/images/icon-m3.png | Bin 0 -> 263 bytes .../src/assets/images/logo-m3academy2500.svg | 9 ++++ react-ts/src/components/Header/Header.scss | 41 ++++++++++++++++++ react-ts/src/components/Header/Header.tsx | 10 +++-- .../components/InputSearch/InputSearch.scss | 24 ++++++++-- .../components/UserAccount/UserAccount.scss | 20 +++++++++ 7 files changed, 101 insertions(+), 9 deletions(-) create mode 100644 react-ts/src/assets/images/icon-m3.png create mode 100644 react-ts/src/assets/images/logo-m3academy2500.svg diff --git a/react-ts/index.html b/react-ts/index.html index e0d1c84..6ac84ad 100644 --- a/react-ts/index.html +++ b/react-ts/index.html @@ -1,10 +1,10 @@ - + - + - Vite + React + TS + INSTITUCIONAL - William Simão
diff --git a/react-ts/src/assets/images/icon-m3.png b/react-ts/src/assets/images/icon-m3.png new file mode 100644 index 0000000000000000000000000000000000000000..ba8ec13f7610120e42196ee0895878d0e3a16955 GIT binary patch literal 263 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbL!Q-Dv1E0CUg>OCcB?hC%PKvP6Z zg8YIR)Yv{Qe0=lLq-N7^E0TS5P951$6xQhBm=07B@9E+gB5`?bza`&c0|Dlhcc+S+ z3}5&2fB54AOn0Q^8g$rlR#aCuJP!@>a-Wr6aq^x3G7j`ii^mFr?XbhpY}snyJRWyWj!)5fRoCzy6))1zN@6>FVdQ&MBb@03erm A{r~^~ literal 0 HcmV?d00001 diff --git a/react-ts/src/assets/images/logo-m3academy2500.svg b/react-ts/src/assets/images/logo-m3academy2500.svg new file mode 100644 index 0000000..f57d95b --- /dev/null +++ b/react-ts/src/assets/images/logo-m3academy2500.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/react-ts/src/components/Header/Header.scss b/react-ts/src/components/Header/Header.scss index 64d649b..99da846 100644 --- a/react-ts/src/components/Header/Header.scss +++ b/react-ts/src/components/Header/Header.scss @@ -8,6 +8,18 @@ align-items: center; justify-content: space-between; border-bottom: 1px solid $color-grey1; + &__picture { + &__img1280 { + img { + display: block; + } + } + &__img2500 { + img { + display: none; + } + } + } } &__wrapper-botom { padding: 14px 100px; @@ -28,4 +40,33 @@ } } } +} + +@media only screen and (min-width: 2500px) { + .header { + &__wrapper-top { + &__picture { + &__img1280{ + img { + display: none; + } + } + &__img2500 { + img { + display: block; + } + } + } + } + &__wrapper-botom { + &__ul { + &__li { + a { + font-size: 28px; + line-height: 28px; + } + } + } + } + } } \ No newline at end of file diff --git a/react-ts/src/components/Header/Header.tsx b/react-ts/src/components/Header/Header.tsx index 500ccf5..c0a1703 100644 --- a/react-ts/src/components/Header/Header.tsx +++ b/react-ts/src/components/Header/Header.tsx @@ -2,15 +2,19 @@ import './Header.scss'; import InputSearch from '../InputSearch/InputSearch'; import UserAccount from '../UserAccount/UseAccount'; -import logoM3 from '../../assets/images/logo-m3academy.svg'; +import logoM31280 from '../../assets/images/logo-m3academy.svg'; +import logoM32500 from '../../assets/images/logo-m3academy2500.svg'; const Header = () => { return (
- - Logo m3academy + + Logo m3academy + + + Logo m3academy diff --git a/react-ts/src/components/InputSearch/InputSearch.scss b/react-ts/src/components/InputSearch/InputSearch.scss index 2fb604d..e83d3b7 100644 --- a/react-ts/src/components/InputSearch/InputSearch.scss +++ b/react-ts/src/components/InputSearch/InputSearch.scss @@ -5,19 +5,23 @@ align-items: center; justify-content: end; position: relative; - max-width: 264px; + max-width: 236px; width: 100%; height: 32px; border-radius: 5px; &__input { position: relative; width: 100%; - padding: 8px 16px; + height: 100%; + padding: 0 16px; border: 2px solid #F2F2F2; border-radius: 5px; color: $color-grey1; + font-family: $font-family; + font-weight: 400; + font-size: 14px; + line-height: 16px; &::placeholder { - font-family: $font-family; color: $color-grey1; } } @@ -25,4 +29,18 @@ position: absolute; margin-right: 16px; } +} + +@media only screen and (min-width: 2500px) { + .wrapper-iconSearch { + max-width: 515.62px; + height: 57px; + &__input { + font-size: 28px; + line-height: 33px; + } + &__icon { + width: 35.15px; + } + } } \ No newline at end of file diff --git a/react-ts/src/components/UserAccount/UserAccount.scss b/react-ts/src/components/UserAccount/UserAccount.scss index 3412ff8..a24f71f 100644 --- a/react-ts/src/components/UserAccount/UserAccount.scss +++ b/react-ts/src/components/UserAccount/UserAccount.scss @@ -19,3 +19,23 @@ } } } + +@media only screen and (min-width: 2500px) { + .wrapper-userAccount { + &__ul { + &__li-entrar { + a { + font-size: 28px; + line-height: 33px; + } + } + &__li-cart { + a { + img { + width: 54.68px; + } + } + } + } + } +} \ No newline at end of file -- 2.34.1 From 2f566464a224c6e7775b260336bdfbc97ade7a2b Mon Sep 17 00:00:00 2001 From: WillSimao Date: Wed, 4 Jan 2023 10:03:34 -0300 Subject: [PATCH 04/10] feat(Header): Inicia menu mobile --- react-ts/package-lock.json | 77 +++++++++++++++++++ react-ts/package.json | 2 + react-ts/src/Pages/Home/Home.scss | 0 react-ts/src/Pages/Home/Home.tsx | 7 +- react-ts/src/assets/images/CloseMobile.svg | 4 + react-ts/src/assets/images/OpenMobile.svg | 5 ++ .../{Header.scss => Header.module.scss} | 11 +++ react-ts/src/components/Header/Header.tsx | 28 +++---- .../HeaderMobile/HeaderMobile.module.scss | 17 ++++ .../components/HeaderMobile/HeaderMobile.tsx | 30 ++++++++ ...putSearch.scss => InputSearch.module.scss} | 8 ++ .../components/InputSearch/InputSearch.tsx | 8 +- .../MenuMobile/Component.module.scss | 44 +++++++++++ .../components/MenuMobile/ComponentMobile.tsx | 32 ++++++++ .../MenuMobile/MenuMobile.module.scss | 13 ++++ .../src/components/MenuMobile/MenuMobile.tsx | 25 ++++++ .../src/components/UserAccount/UseAccount.tsx | 12 +-- ...erAccount.scss => UserAccount.module.scss} | 10 +++ 18 files changed, 306 insertions(+), 27 deletions(-) delete mode 100644 react-ts/src/Pages/Home/Home.scss create mode 100644 react-ts/src/assets/images/CloseMobile.svg create mode 100644 react-ts/src/assets/images/OpenMobile.svg rename react-ts/src/components/Header/{Header.scss => Header.module.scss} (88%) create mode 100644 react-ts/src/components/HeaderMobile/HeaderMobile.module.scss create mode 100644 react-ts/src/components/HeaderMobile/HeaderMobile.tsx rename react-ts/src/components/InputSearch/{InputSearch.scss => InputSearch.module.scss} (86%) create mode 100644 react-ts/src/components/MenuMobile/Component.module.scss create mode 100644 react-ts/src/components/MenuMobile/ComponentMobile.tsx create mode 100644 react-ts/src/components/MenuMobile/MenuMobile.module.scss create mode 100644 react-ts/src/components/MenuMobile/MenuMobile.tsx rename react-ts/src/components/UserAccount/{UserAccount.scss => UserAccount.module.scss} (83%) diff --git a/react-ts/package-lock.json b/react-ts/package-lock.json index d99aae9..3de805e 100644 --- a/react-ts/package-lock.json +++ b/react-ts/package-lock.json @@ -14,7 +14,9 @@ "devDependencies": { "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", + "@types/react-modal": "^3.13.1", "@vitejs/plugin-react": "^3.0.0", + "react-modal": "^3.16.1", "sass": "^1.57.1", "typescript": "^4.9.3", "vite": "^4.0.0" @@ -800,6 +802,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-modal": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz", + "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", @@ -1061,6 +1072,12 @@ "node": ">=0.8.0" } }, + "node_modules/exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==", + "dev": true + }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -1298,6 +1315,15 @@ "node": ">=0.10.0" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", @@ -1346,6 +1372,17 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dev": true, + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -1369,6 +1406,37 @@ "react": "^18.2.0" } }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true + }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", + "dev": true + }, + "node_modules/react-modal": { + "version": "3.16.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz", + "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==", + "dev": true, + "dependencies": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + }, + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", + "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -1599,6 +1667,15 @@ } } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dev": true, + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", diff --git a/react-ts/package.json b/react-ts/package.json index 74f5946..1cf4c69 100644 --- a/react-ts/package.json +++ b/react-ts/package.json @@ -15,7 +15,9 @@ "devDependencies": { "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", + "@types/react-modal": "^3.13.1", "@vitejs/plugin-react": "^3.0.0", + "react-modal": "^3.16.1", "sass": "^1.57.1", "typescript": "^4.9.3", "vite": "^4.0.0" diff --git a/react-ts/src/Pages/Home/Home.scss b/react-ts/src/Pages/Home/Home.scss deleted file mode 100644 index e69de29..0000000 diff --git a/react-ts/src/Pages/Home/Home.tsx b/react-ts/src/Pages/Home/Home.tsx index f1febf0..943722c 100644 --- a/react-ts/src/Pages/Home/Home.tsx +++ b/react-ts/src/Pages/Home/Home.tsx @@ -1,11 +1,12 @@ - -import './Home.scss' - import Header from '../../components/Header/Header' +import HeaderMobile from '../../components/HeaderMobile/HeaderMobile' const Home = () => { return ( + <>
+ + ) } diff --git a/react-ts/src/assets/images/CloseMobile.svg b/react-ts/src/assets/images/CloseMobile.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/react-ts/src/assets/images/CloseMobile.svg @@ -0,0 +1,4 @@ + + + + diff --git a/react-ts/src/assets/images/OpenMobile.svg b/react-ts/src/assets/images/OpenMobile.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/react-ts/src/assets/images/OpenMobile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/react-ts/src/components/Header/Header.scss b/react-ts/src/components/Header/Header.module.scss similarity index 88% rename from react-ts/src/components/Header/Header.scss rename to react-ts/src/components/Header/Header.module.scss index 99da846..c782af5 100644 --- a/react-ts/src/components/Header/Header.scss +++ b/react-ts/src/components/Header/Header.module.scss @@ -41,6 +41,17 @@ } } } +@media only screen and (max-width: 1024px) { + .header { + display: none; + &__wrapper-top { + padding: 25px 16px; + } + &__wrapper-botom { + display: none; + } + } +} @media only screen and (min-width: 2500px) { .header { diff --git a/react-ts/src/components/Header/Header.tsx b/react-ts/src/components/Header/Header.tsx index c0a1703..3bdea0e 100644 --- a/react-ts/src/components/Header/Header.tsx +++ b/react-ts/src/components/Header/Header.tsx @@ -1,34 +1,34 @@ -import './Header.scss'; +import styles from './Header.module.scss'; import InputSearch from '../InputSearch/InputSearch'; import UserAccount from '../UserAccount/UseAccount'; import logoM31280 from '../../assets/images/logo-m3academy.svg'; -import logoM32500 from '../../assets/images/logo-m3academy2500.svg'; +import logoM32500 from '../../assets/images/logo-m3academy2500.svg'; const Header = () => { return ( -
-
- - - Logo m3academy +
+ -
-