style: reponsividade(home) e cor botões nos temas

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

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`

src/pages/Home/styles.ts

@@ -9,29 +9,54 @@ 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 {
     display: flex;
     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 {

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"