From 13c9e613430c895ce73acf65131b9f034884c57f Mon Sep 17 00:00:00 2001 From: Patrick Date: Wed, 4 Jan 2023 20:13:04 -0300 Subject: [PATCH] feat: adiciona sass --- package-lock.json | 70 +++++++++++++++++++ package.json | 2 + src/components/footer/footer.jsx | 4 +- .../{footer.module.css => footer.module.scss} | 0 ...orm.module.css => custom-form.module.scss} | 0 src/components/form/custom-form.tsx | 2 +- ...enu.module.css => header-menu.module.scss} | 0 src/components/header-menu/header-menu.tsx | 2 +- .../{header.module.css => header.module.scss} | 12 ++-- src/components/header/header.tsx | 34 ++++----- ...ia.module.css => info-agencia.module.scss} | 0 src/components/info-agencia/info-agencia.tsx | 5 +- ...nt.module.css => main-content.module.scss} | 0 src/components/main/main-content.tsx | 2 +- 14 files changed, 105 insertions(+), 28 deletions(-) rename src/components/footer/{footer.module.css => footer.module.scss} (100%) rename src/components/form/{custom-form.module.css => custom-form.module.scss} (100%) rename src/components/header-menu/{header-menu.module.css => header-menu.module.scss} (100%) rename src/components/header/{header.module.css => header.module.scss} (91%) rename src/components/info-agencia/{info-agencia.module.css => info-agencia.module.scss} (100%) rename src/components/main/{main-content.module.css => main-content.module.scss} (100%) diff --git a/package-lock.json b/package-lock.json index 0960203..f00751e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "sass": "^1.57.1", + "scss": "^0.2.4", "typescript": "^4.9.4", "web-vitals": "^2.1.4", "yup": "^0.32.11" @@ -8659,6 +8661,11 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz", + "integrity": "sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ==" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -12041,6 +12048,14 @@ "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==" }, + "node_modules/ometa": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/ometa/-/ometa-0.2.2.tgz", + "integrity": "sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng==", + "engines": { + "node": ">= 0.2.0" + } + }, "node_modules/on-finished": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", @@ -14549,6 +14564,22 @@ "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==", + "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", @@ -14627,6 +14658,17 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/scss": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/scss/-/scss-0.2.4.tgz", + "integrity": "sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A==", + "dependencies": { + "ometa": "0.2.2" + }, + "engines": { + "node": ">= 0.2.0" + } + }, "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -23058,6 +23100,11 @@ "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz", "integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ==" }, + "immutable": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz", + "integrity": "sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ==" + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -25496,6 +25543,11 @@ "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==" }, + "ometa": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/ometa/-/ometa-0.2.2.tgz", + "integrity": "sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng==" + }, "on-finished": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", @@ -27115,6 +27167,16 @@ "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==", + "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", @@ -27155,6 +27217,14 @@ "ajv-keywords": "^3.5.2" } }, + "scss": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/scss/-/scss-0.2.4.tgz", + "integrity": "sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A==", + "requires": { + "ometa": "0.2.2" + } + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", diff --git a/package.json b/package.json index ff14880..d02c6cf 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "sass": "^1.57.1", + "scss": "^0.2.4", "typescript": "^4.9.4", "web-vitals": "^2.1.4", "yup": "^0.32.11" diff --git a/src/components/footer/footer.jsx b/src/components/footer/footer.jsx index 8270420..016ef88 100644 --- a/src/components/footer/footer.jsx +++ b/src/components/footer/footer.jsx @@ -1,3 +1,5 @@ +import style from "./footer.module.scss"; + import boleto from "./assets/Boleto.png"; import diners from "./assets/Diners.png"; import elo from "./assets/Elo.png"; @@ -10,8 +12,6 @@ import vtexPci from "./assets/vtex-pci.png"; import vtex from "./assets/vtex.png"; import line from "./assets/Line.png"; -import style from "./footer.module.css"; - export function Footer() { return (
diff --git a/src/components/footer/footer.module.css b/src/components/footer/footer.module.scss similarity index 100% rename from src/components/footer/footer.module.css rename to src/components/footer/footer.module.scss diff --git a/src/components/form/custom-form.module.css b/src/components/form/custom-form.module.scss similarity index 100% rename from src/components/form/custom-form.module.css rename to src/components/form/custom-form.module.scss diff --git a/src/components/form/custom-form.tsx b/src/components/form/custom-form.tsx index c659013..5dd425a 100644 --- a/src/components/form/custom-form.tsx +++ b/src/components/form/custom-form.tsx @@ -1,4 +1,4 @@ -import style from "./custom-form.module.css"; +import style from "./custom-form.module.scss"; import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik"; import { string } from "yup"; diff --git a/src/components/header-menu/header-menu.module.css b/src/components/header-menu/header-menu.module.scss similarity index 100% rename from src/components/header-menu/header-menu.module.css rename to src/components/header-menu/header-menu.module.scss diff --git a/src/components/header-menu/header-menu.tsx b/src/components/header-menu/header-menu.tsx index 76bae64..fb87dbc 100644 --- a/src/components/header-menu/header-menu.tsx +++ b/src/components/header-menu/header-menu.tsx @@ -1,4 +1,4 @@ -import style from "./header-menu.module.css"; +import style from "./header-menu.module.scss"; export function HeaderMenu() { return (
diff --git a/src/components/header/header.module.css b/src/components/header/header.module.scss similarity index 91% rename from src/components/header/header.module.css rename to src/components/header/header.module.scss index 1891479..96e1c79 100644 --- a/src/components/header/header.module.css +++ b/src/components/header/header.module.scss @@ -8,18 +8,18 @@ height: 76px; } +.headerMainContainer { + width: 2500px; + max-width: 100%; +} + .headerContainer { display: flex; align-items: center; justify-content: space-between; - width: 1077px; - /* width: 78.13%; */ + margin: 0 100px 0 100px; } -/* .headerLogo { - margin-left: 100px; -} */ - .headerSearch { display: flex; align-items: center; diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index b3c05be..6b7b3a7 100644 --- a/src/components/header/header.tsx +++ b/src/components/header/header.tsx @@ -1,4 +1,4 @@ -import style from "./header.module.css"; +import style from "./header.module.scss"; import logoM3 from "./assets/logo.png"; import cartBuy from "./assets/cart1.png"; import searchIcon from "./assets/lupa.png"; @@ -6,21 +6,23 @@ import searchIcon from "./assets/lupa.png"; export function Header() { return (
-
-
- -
-
- - -
-
- ENTRAR - +
+
+
+ +
+
+ + +
+
+ ENTRAR + +
diff --git a/src/components/info-agencia/info-agencia.module.css b/src/components/info-agencia/info-agencia.module.scss similarity index 100% rename from src/components/info-agencia/info-agencia.module.css rename to src/components/info-agencia/info-agencia.module.scss diff --git a/src/components/info-agencia/info-agencia.tsx b/src/components/info-agencia/info-agencia.tsx index f8be76b..d85b4df 100644 --- a/src/components/info-agencia/info-agencia.tsx +++ b/src/components/info-agencia/info-agencia.tsx @@ -1,4 +1,4 @@ -import style from "./info-agencia.module.css"; +import style from "./info-agencia.module.scss"; import facebook from "./assets/facebook.png"; import instagram from "./assets/instagram.png"; import twitter from "./assets/twitter.png"; @@ -55,6 +55,9 @@ export function InfoAgencia() {
www.loremipsum.com + {/*
+ +
*/}
); diff --git a/src/components/main/main-content.module.css b/src/components/main/main-content.module.scss similarity index 100% rename from src/components/main/main-content.module.css rename to src/components/main/main-content.module.scss diff --git a/src/components/main/main-content.tsx b/src/components/main/main-content.tsx index be32ed6..7b4e66d 100644 --- a/src/components/main/main-content.tsx +++ b/src/components/main/main-content.tsx @@ -1,4 +1,4 @@ -import style from "./main-content.module.css"; +import style from "./main-content.module.scss"; import { CustomForm } from "../form/custom-form"; import { useState } from "react";