diff --git a/package-lock.json b/package-lock.json index efdd52a..f9b0a27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2791,11 +2791,18 @@ "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==" }, "axios": { - "version": "0.19.2", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz", - "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==", + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", "requires": { - "follow-redirects": "1.5.10" + "follow-redirects": "^1.10.0" + }, + "dependencies": { + "follow-redirects": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", + "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==" + } } }, "axobject-query": { diff --git a/package.json b/package.json index d612798..8b704bd 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", "@unform/core": "^2.1.3", - "axios": "^0.19.2", + "axios": "^0.21.1", "polished": "^3.6.5", "react": "^16.13.1", "react-dom": "^16.13.1", @@ -23,7 +23,7 @@ "react-spring": "^8.0.27", "react-switch": "^5.0.1", "react-transition-group": "^4.4.1", - "styled-components": "^5.1.1", + "styled-components": "^5.3.0", "typescript": "~3.7.2", "uuidv4": "^6.1.1" }, diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts index 262fefa..e8322d1 100644 --- a/src/components/Header/styles.ts +++ b/src/components/Header/styles.ts @@ -7,6 +7,7 @@ export const Container = styled.header` display: flex; justify-content: space-between; align-items: center; + `; export const LogoContainer = styled.div` @@ -16,11 +17,15 @@ export const LogoContainer = styled.div` h1 { font-size: 30px; + } `; export const LogoImage = styled.div` margin-right: 10px; + @media (max-width: 1199.98px) { + padding-left: 20px; + } `; export const ActionContainer = styled.div` diff --git a/src/pages/Home/styles.ts b/src/pages/Home/styles.ts index 388411c..0e8d915 100644 --- a/src/pages/Home/styles.ts +++ b/src/pages/Home/styles.ts @@ -9,11 +9,30 @@ export const Title = styled.section` flex-direction: column; align-items: center; justify-content: center; + @media (min-width: 992px) and (max-width: 1199.98px) { + + } h1 { font-size: 48px; color: ${(props) => props.theme.colors.text}; margin-bottom: 50px; + + // Dispositivos small (telefones em modo paisagem, com 576px ou mais) + @media (max-width: 767.98px) { + margin-left: 20px; + font-size:40px; + } + + // Dispositivos médios (tablets com 768px ou mais) + @media (min-width: 768px) and (max-width: 991.98px) { + margin-left: 20px; + } + + // Dispositivos large (desktops com 992px ou mais) + @media (min-width: 992px) and (max-width: 1199.98px) { + margin-left: 20px; + } } a { @@ -21,17 +40,23 @@ export const Title = styled.section` align-items: center; justify-content: center; text-decoration: none; - background-color: #3a3a3a; + background-color: ${(props) => props.theme.colors.text}; border-radius: 10px; border: 0; padding: 16px; width: 240px; font-weight: 500; - color: #a8a8b3; + color: ${(props) => props.theme.colors.primary}; transition: all 0.2s ease-in-out; + + @media (max-width: 550.98px) { + margin-left: 20px; + + } &:hover { - background-color: ${shade(0.2, '#3A3A3A')}; + background-color: ${shade(0.2, '#535353')}; + color: #fff; } svg { diff --git a/yarn.lock b/yarn.lock index f0930dd..9549b39 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1076,6 +1076,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.8.7": + version "7.14.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6" + integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.10.4", "@babel/template@^7.4.0", "@babel/template@^7.8.6": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278" @@ -1749,6 +1756,13 @@ "@types/history" "*" "@types/react" "*" +"@types/react-transition-group@^4.4.1": + version "4.4.1" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.1.tgz#e1a3cb278df7f47f17b5082b1b3da17170bd44b1" + integrity sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@^16.9.0": version "16.9.43" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.43.tgz#c287f23f6189666ee3bebc2eb8d0f84bcb6cdb6b" @@ -3798,6 +3812,11 @@ csstype@^2.5.7: resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f" integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A== +csstype@^3.0.2: + version "3.0.8" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340" + integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw== + cyclist@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9" @@ -4059,6 +4078,14 @@ dom-converter@^0.2: dependencies: utila "~0.4" +dom-helpers@^5.0.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-serializer@0: version "0.2.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" @@ -9281,6 +9308,16 @@ react-switch@^5.0.1: dependencies: prop-types "^15.6.2" +react-transition-group@^4.4.1: + version "4.4.1" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9" + integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"