🔨 refac: button style

Author: henriquepw

src/pages/battlefield/index.tsx

@@ -1,9 +1,11 @@
 import React, { FC, useState } from 'react';
 
+import Button from '~/components/Button';
 import SearchRepository from '~/components/SearchRepository';
 import Layout from '~/Layout';
 
-import { Container, ButtonGroup, NextButton } from './styles';
+import { Container } from './styles';
+import { ButtonGroup } from '~/styles/button';
 
 const Battlefield: FC = () => {
   const [disabled, setDisabled] = useState(false);
@@ -14,10 +16,10 @@ const Battlefield: FC = () => {
         <h1>Select the battlefield repository</h1>
         <SearchRepository setDisabled={setDisabled} />
         <ButtonGroup>
-          <NextButton to="/">Back</NextButton>
-          <NextButton to="/fighters" disabled={disabled}>
+          <Button to="/">Back</Button>
+          <Button to="/fighters" disabled={disabled}>
             Next
-          </NextButton>
+          </Button>
         </ButtonGroup>
       </Container>
     </Layout>

src/pages/battlefield/styles.ts

@@ -1,7 +1,5 @@
 import styled from 'styled-components';
 
-import Button from '~/components/Button';
-
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -16,17 +14,3 @@ export const Container = styled.div`
     text-align: center;
   }
 `;
-
-export const ButtonGroup = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  margin: 80px 0 40px;
-
-  width: 100%;
-`;
-
-export const NextButton = styled(Button)`
-  padding: 0 24px;
-`;

src/pages/fighters/index.tsx

@@ -3,14 +3,14 @@ import React, { useContext } from 'react';
 import { useQuery } from '@apollo/react-hooks';
 import gql from 'graphql-tag';
 
+import Button from '~/components/Button';
 import Fighter from '~/components/Fighter';
 import Layout from '~/Layout';
 
 import RepositoryContext, { PullRequest } from '~/contexts/RepositoryContext';
 
-import { ButtonGroup, NextButton } from '../battlefield/styles';
-
 import { Container } from './styles';
+import { ButtonGroup } from '~/styles/button';
 
 interface QueryData {
   repository: {
@@ -81,10 +81,10 @@ function Fighters() {
             ))}
         </ul>
         <ButtonGroup>
-          <NextButton to="/battlefield">Back</NextButton>
-          <NextButton to="/result" disabled={ButtonIsDisabled}>
+          <Button to="/battlefield">Back</Button>
+          <Button to="/result" disabled={ButtonIsDisabled}>
             Next
-          </NextButton>
+          </Button>
         </ButtonGroup>
       </Container>
     </Layout>

src/pages/fighters/styles.ts

@@ -5,7 +5,6 @@ export const Container = styled.div`
   flex-direction: column;
   align-items: center;
 
-  padding: 24px;
   max-width: 829px;
   margin: 0 auto;
 

src/pages/index.tsx

@@ -4,7 +4,7 @@ import Home from '~/components/sections/Home';
 import Layout from '~/Layout';
 
 const IndexPage: FC = () => (
-  <Layout>
+  <Layout title="Home">
     <Home />
   </Layout>
 );

src/pages/result/styles.ts

@@ -8,7 +8,6 @@ export const Header = styled.header`
   justify-content: space-between;
 
   width: 100%;
-  max-width: 1170px;
 
   div {
     margin: 32px 0;

src/styles/button.ts

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export interface ButtonProps {
   secundary?: boolean;
@@ -64,3 +64,13 @@ export default css<ButtonProps>`
       box-shadow: none;
     `};
 `;
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  margin: 80px 0 40px;
+
+  width: 100%;
+`;

src/styles/global.ts

@@ -57,8 +57,9 @@ export default createGlobalStyle`
     position: relative;
 
     margin: 0 auto;
+    padding: 0 32px;
 
-    max-width: 1440;
+    max-width: 1234px;
     min-height: 100%;
   }