From 9afe9b15eac5b9b82d892ea39e76ed2eea77118d Mon Sep 17 00:00:00 2001 From: Matheus Date: Thu, 19 Jan 2023 03:20:24 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20ajustes=20na=20configura=C3=A7=C3=A3o?= =?UTF-8?q?=20e=20header=20completo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 43 ++++++++++ package.json | 3 + public/index.html | 25 +++--- src/assets/img/Logo-M3.png | Bin 0 -> 2974 bytes src/assets/svg/cart.svg | 12 +++ src/assets/svg/search.svg | 3 + .../Footer/{footer.sass => footer.scss} | 0 src/components/Header/header.tsx | 30 ++++++- src/components/Header/headerBottom.tsx | 26 ++++++ src/components/Header/headerStyle.module.scss | 74 ++++++++++++++++++ .../{Header/header.sass => Main/main.scss} | 0 src/react-app-env.d.ts | 2 + src/{components/Main/main.sass => styles/App} | 0 src/styles/App.css | 41 +--------- 14 files changed, 206 insertions(+), 53 deletions(-) create mode 100644 src/assets/img/Logo-M3.png create mode 100644 src/assets/svg/cart.svg create mode 100644 src/assets/svg/search.svg rename src/components/Footer/{footer.sass => footer.scss} (100%) create mode 100644 src/components/Header/headerBottom.tsx create mode 100644 src/components/Header/headerStyle.module.scss rename src/components/{Header/header.sass => Main/main.scss} (100%) rename src/{components/Main/main.sass => styles/App} (100%) diff --git a/package-lock.json b/package-lock.json index d96c573..45ecb5d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,9 @@ "react-scripts": "5.0.1", "typescript": "^4.9.4", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "sass": "^1.57.1" } }, "node_modules/@adobe/css-tools": { @@ -8634,6 +8637,12 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz", + "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==", + "devOptional": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -14517,6 +14526,23 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "node_modules/sass": { + "version": "1.57.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", + "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", + "devOptional": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", @@ -22986,6 +23012,12 @@ "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.18.tgz", "integrity": "sha512-eAPNpsj7Ax1q6Y/3lm2PmlwRcFzpON7HSNQ3ru5WQH1/PSpnyed/HpNOELl2CxLKoj4r+bAHgdyKqW5gc2Se1A==" }, + "immutable": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz", + "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==", + "devOptional": true + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -27033,6 +27065,17 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "sass": { + "version": "1.57.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", + "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", + "devOptional": true, + "requires": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + } + }, "sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", diff --git a/package.json b/package.json index 06a3712..4598d22 100644 --- a/package.json +++ b/package.json @@ -39,5 +39,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "sass": "^1.57.1" } } diff --git a/public/index.html b/public/index.html index 0eb6c96..153310f 100644 --- a/public/index.html +++ b/public/index.html @@ -1,28 +1,23 @@ - + + + + + - - - - + + + + + React App diff --git a/src/assets/img/Logo-M3.png b/src/assets/img/Logo-M3.png new file mode 100644 index 0000000000000000000000000000000000000000..d7524ec3c22d35380f9dcf88ca6b67986b1673bf GIT binary patch literal 2974 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 Ur3(w^b^rhX07*qoM6N<$g3bP&DF6Tf literal 0 HcmV?d00001 diff --git a/src/assets/svg/cart.svg b/src/assets/svg/cart.svg new file mode 100644 index 0000000..fd775ad --- /dev/null +++ b/src/assets/svg/cart.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/svg/search.svg b/src/assets/svg/search.svg new file mode 100644 index 0000000..80fc2f2 --- /dev/null +++ b/src/assets/svg/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Footer/footer.sass b/src/components/Footer/footer.scss similarity index 100% rename from src/components/Footer/footer.sass rename to src/components/Footer/footer.scss diff --git a/src/components/Header/header.tsx b/src/components/Header/header.tsx index d79eb23..cdcf34e 100644 --- a/src/components/Header/header.tsx +++ b/src/components/Header/header.tsx @@ -1,7 +1,35 @@ import React from 'react'; +import Logo from '../../assets/img/Logo-M3.png'; +import Search from '../../assets/svg/search.svg'; +import Cart from '../../assets/svg/cart.svg'; + +import styles from './headerStyle.module.scss'; + +import { HeaderBottom } from "./headerBottom"; const Header = () => { - return
+ return ( +
+
+
+ + Logo da M3 academy + +
+ + +
+ < HeaderBottom /> +
+ ) } export { Header }; \ No newline at end of file diff --git a/src/components/Header/headerBottom.tsx b/src/components/Header/headerBottom.tsx new file mode 100644 index 0000000..c33d268 --- /dev/null +++ b/src/components/Header/headerBottom.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import styles from './headerStyle.module.scss'; + +interface text{ + text: string; +} + +const Links = (props: text) => { + const { text } = props; + return ( + {text} + ) +} + +const HeaderBottom = () => { + return( +
+ + + +
+ ) +}; + +export { HeaderBottom } \ No newline at end of file diff --git a/src/components/Header/headerStyle.module.scss b/src/components/Header/headerStyle.module.scss new file mode 100644 index 0000000..664ce20 --- /dev/null +++ b/src/components/Header/headerStyle.module.scss @@ -0,0 +1,74 @@ +.conteiner { + background-color: black; + width: 100%; + + .conteiner-header { + display: flex; + height: 76px; + justify-content: space-between; + align-items: center; + padding: 0px 100px; + width: 100%; + + .conteiner-search { + display: flex; + background-color: white; + border: 2px solid #F2F2F2; + border-radius: 5px; + padding: 5px 16px; + height: 32px; + width: 24.445%; + + .search-input, .search-input::placeholder{ + font-family: 'Roboto', sans-serif; + font-weight: 400; + font-size: 14px; + border: 0; + line-height: 16px; + color: #C6C6C6; + width: 100%; + } + + .search-img { + height: 18px; + width: 18px; + } + } + + .conteiner-cart { + width: 12.594%; + + .cart-text{ + display: flex; + align-items: center; + justify-content: space-between; + text-transform: uppercase; + font-family: 'Roboto', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: white; + } + } + + } + + .conteiner-bottom { + border-top: 1px solid #C4C4C4; + height: 44px; + display: flex; + align-items: center; + padding: 0 100px; + + .bottom-item{ + color: white; + font-family: 'Roboto'; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + text-decoration: none; + margin-right: 55px; + } + } +} \ No newline at end of file diff --git a/src/components/Header/header.sass b/src/components/Main/main.scss similarity index 100% rename from src/components/Header/header.sass rename to src/components/Main/main.scss diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 6431bc5..ba00239 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -1 +1,3 @@ /// + +declare module '*.scss'; \ No newline at end of file diff --git a/src/components/Main/main.sass b/src/styles/App similarity index 100% rename from src/components/Main/main.sass rename to src/styles/App diff --git a/src/styles/App.css b/src/styles/App.css index 74b5e05..d94d416 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -1,38 +1,5 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +* { + box-sizing: border-box; + padding: 0; + margin: 0; }