From 685d309bd68dc1504b675683ffa979f76dcd6f1c Mon Sep 17 00:00:00 2001 From: Matheus Noronha Date: Wed, 7 Sep 2022 22:54:50 -0300 Subject: [PATCH 1/2] V0.3 Migrando para o Styled Components --- package-lock.json | 90 ++++++++++++++++++++++++ package.json | 1 + src/App.js | 4 +- src/components/Header/Header.js | 7 +- src/components/Header/Header.module.css | 35 ++------- src/components/Header/Logo/Marca.js | 2 +- src/components/Header/StylesHeader.js | 37 ++++++++++ src/components/Header/menu/Menu.js | 24 +++---- src/components/Main/Main.js | 2 +- src/components/Main/StyleMain.js | 8 +++ src/images/LogoSite.svg | 78 ++++++++++++++++++++ src/images/blue.png | Bin 0 -> 4361365 bytes 12 files changed, 236 insertions(+), 52 deletions(-) create mode 100644 src/components/Header/StylesHeader.js create mode 100644 src/components/Main/StyleMain.js create mode 100644 src/images/LogoSite.svg create mode 100644 src/images/blue.png diff --git a/package-lock.json b/package-lock.json index 1fe4279..2e4a471 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1368,6 +1368,29 @@ "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz", "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==" }, + "@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "requires": { + "@emotion/memoize": "^0.8.0" + } + }, + "@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "@eslint/eslintrc": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz", @@ -3505,6 +3528,23 @@ "@babel/helper-define-polyfill-provider": "^0.3.1" } }, + "babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -3748,6 +3788,11 @@ "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==" }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha512-W2lPwkBkMZwFlPCXhIlYgxu+7gC/NUlCtdK652DAJ1JdgV0sTrvuPFshNPrFa1TY2JOkLhgdeEBplB4ezEa+xg==" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -4098,6 +4143,11 @@ "postcss-selector-parser": "^6.0.9" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" + }, "css-declaration-sorter": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz", @@ -4202,6 +4252,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", + "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -5986,6 +6046,14 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -10462,6 +10530,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -10765,6 +10838,23 @@ "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz", "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==" }, + "styled-components": { + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.5.tgz", + "integrity": "sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", diff --git a/package.json b/package.json index e473b94..572f5d6 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "styled-components": "^5.3.5", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.js b/src/App.js index 9477a11..ece4c79 100644 --- a/src/App.js +++ b/src/App.js @@ -6,8 +6,8 @@ function App() { return (
-
-
+ {/*
+
*/}
); } diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 3eff37c..b5e033f 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -2,14 +2,15 @@ import React from 'react' import styles from './Header.module.css' import Marca from './Logo/Marca'; import Menu from './menu/Menu'; +import { HeaderContainer } from './StylesHeader'; const Header = () => { return ( -
-
+
+ -
+
) } diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css index 80b9575..c199985 100644 --- a/src/components/Header/Header.module.css +++ b/src/components/Header/Header.module.css @@ -2,34 +2,11 @@ margin: 0; padding: 0; box-sizing: border-box; + background-color: blue; + color: white; } -section > header{ - display: flex; - justify-content: space-around; - align-items: center; - padding: 0 2%; - border: 1px solid rgba(255, 192, 203, 0.422); - margin-bottom: 8px; -} - -section > header > h1{ - color: pink; -} - -section > header > img{ - width: 150px; - height: 80px; -} - -section >header > nav{ - display: flex; - flex-direction: row; - gap: 8px; - justify-content: space-around; -} - -section >header > nav > a{ - font-size: 18px; -} - +.Container{ + padding: 0 6%; + margin: 8px 0; +} \ No newline at end of file diff --git a/src/components/Header/Logo/Marca.js b/src/components/Header/Logo/Marca.js index 59cd24b..217683b 100644 --- a/src/components/Header/Logo/Marca.js +++ b/src/components/Header/Logo/Marca.js @@ -1,5 +1,5 @@ import React from 'react' -import LogoSite from '../../../images/LogoSite.png' +import LogoSite from '../../../images/LogoSite.svg' const Marca = () => { return ( diff --git a/src/components/Header/StylesHeader.js b/src/components/Header/StylesHeader.js new file mode 100644 index 0000000..dd8ef15 --- /dev/null +++ b/src/components/Header/StylesHeader.js @@ -0,0 +1,37 @@ +import styled from "styled-components"; + +export const HeaderContainer = styled.header` + display: flex; + justify-content: space-around; + align-items: center; + padding: 0 2%; + border: 1px solid rgba(255, 192, 203, 0.422); + border-radius: 18px; + box-shadow: -2px 2px 5px rgba(255, 192, 203, 0.422); + margin-bottom: 8px; + + & img{ + width: 150px; + height: 80px; + } + + & nav{ + display: flex; + flex-direction: row; + gap: 8px; + justify-content: space-around; + background-color: none; + + & a{ + font-size: 18px; + cursor: pointer; + color: white; + background-color: none; + + :hover{ + border-bottom: 1px solid white; + } + } + + } +`; \ No newline at end of file diff --git a/src/components/Header/menu/Menu.js b/src/components/Header/menu/Menu.js index 2e27e12..087d92e 100644 --- a/src/components/Header/menu/Menu.js +++ b/src/components/Header/menu/Menu.js @@ -2,22 +2,14 @@ import React from 'react' const Menu = () => { return ( -