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

feat: adiciona sass

Browse Source
This commit is contained in:
Patrick Reis Santos 2023-01-04 20:13:04 -03:00
parent fb76694140
commit 13c9e61343
14 changed files with 105 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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"

4
src/components/footer/footer.jsx
View File

@ -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 (
<div className={style.footer}>

0
src/components/footer/footer.module.css → src/components/footer/footer.module.scss
View File

0
src/components/form/custom-form.module.css → src/components/form/custom-form.module.scss
View File

2
src/components/form/custom-form.tsx
View File

@ -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";

0
src/components/header-menu/header-menu.module.css → src/components/header-menu/header-menu.module.scss
View File

2
src/components/header-menu/header-menu.tsx
View File

@ -1,4 +1,4 @@
import style from "./header-menu.module.css";
import style from "./header-menu.module.scss";
export function HeaderMenu() {
return (
<div className={style.headerMenu}>

12
src/components/header/header.module.css → src/components/header/header.module.scss
View File

@ -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;

34
src/components/header/header.tsx
View File

@ -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 (
<header className={style.header}>
<div className={style.headerContainer}>
<div className={style.headerLogo}>
<img src={logoM3} alt="" />
</div>
<div className={style.headerSearch}>
<input
type="text"
placeholder="Buscar..."
className={style.headerSearchPlaceholder}
/>
<img className={style.searchIcon} src={searchIcon} alt="" />
</div>
<div className={style.headerSafebuy}>
<span className={style.safeBuySpan}>ENTRAR</span>
<img src={cartBuy} alt="" />
<div className={style.headerMainContainer}>
<div className={style.headerContainer}>
<div className={style.headerLogo}>
<img src={logoM3} alt="" />
</div>
<div className={style.headerSearch}>
<input
type="text"
placeholder="Buscar..."
className={style.headerSearchPlaceholder}
/>
<img className={style.searchIcon} src={searchIcon} alt="" />
</div>
<div className={style.headerSafebuy}>
<span className={style.safeBuySpan}>ENTRAR</span>
<img src={cartBuy} alt="" />
</div>
</div>
</div>
</header>

0
src/components/info-agencia/info-agencia.module.css → src/components/info-agencia/info-agencia.module.scss
View File

5
src/components/info-agencia/info-agencia.tsx
View File

@ -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() {
</a>
</div>
<span>www.loremipsum.com</span>
{/* <div>
<img src={youtube} alt="" />
</div> */}
</div>
</div>
);

0
src/components/main/main-content.module.css → src/components/main/main-content.module.scss
View File

2
src/components/main/main-content.tsx
View File

@ -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";