Merge pull request #19 from SamGCM/style

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 {