From 7e92687f62ca0825a8b8358cd25a65e3748062f9 Mon Sep 17 00:00:00 2001
From: Diego Miyabara <diego.miyabara@hotmail.com>
Date: Fri, 10 Jul 2020 15:55:29 -0300
Subject: [PATCH] estilizacao home, grid e botoes

---
 src/components/Footer.js               |  2 +-
 src/components/Home.js                 | 36 +++++++++++++++-----------
 src/components/servicos/CardServico.js | 17 +++++++-----
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/components/Footer.js b/src/components/Footer.js
index 3b78382..b8347c1 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 const ContainerFooter = styled.div`
-height: 10vh;
+height: 50px;
 position: fixed;
 bottom: 0;
 background-color: #2B2D2F;
diff --git a/src/components/Home.js b/src/components/Home.js
index ea253a0..915a24f 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -7,7 +7,7 @@ const AreaHome = styled.div`
     width: 100vw;
     height: 38vh;
     display: grid;
-    grid-template-columns: 1fr  4fr 2fr 3fr;
+    grid-template-columns: 0.5fr 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr ;
     grid-gap: 0px 0px;
 `
@@ -18,6 +18,7 @@ const H2 = styled.h2`
    display: grid;
     grid-column: 2/3;
     font-weight: lighter;
+    align-items: center;
 `
 
 const H4 = styled.h4`
@@ -26,26 +27,31 @@ const H4 = styled.h4`
     font-family: 'helvetica';
     display: grid;
     grid-column: 2/4;
-    grid-row: 2/3;
+    grid-row: 2/4;
+
 `
 
 const ButtonHeader = styled.button`
-    height: 40px;
-    width: 200px;
-    background-color: black;
-    color: #FFF;
+    height: 80px;
+    width: 400px;
+    font-size: 1.2em;
+    font-weight: bold;
+    align-items: center;    
+    background-color: #FF7F50;
+    color: #2B2D2F;
     border: none;
-    border-radius: 10px;
+    border-radius: 5px;
     cursor: pointer;
     outline:none;
     :hover{
-        background-color: #FFEA52;
-        color: #474117;
+        background-color: #F83F2C;
+        color: #FFF;
     }
     display: grid;
-    grid-column: 4/4;
-    grid-row: 2/2;
+    grid-column: 4/5;
+    grid-row: 1/3;
     padding: 4px;
+    align-self: center;
 `
 
 class Home extends React.Component {
@@ -60,15 +66,15 @@ class Home extends React.Component {
         return (
             <div>
                 <AreaHome>
-                    <H2>O jeito mais esperto de	contratar um serviço</H2>
+                    <H2>O jeito mais esperto de	contratar um serviço!</H2>
                     <H4>Fale o que precisa, receba orçamentos e escolha o melhor.</H4>
-                    <ButtonHeader onClick={this.props.abrirServico}>QUERO UM PROFISSIONAL AGORA</ButtonHeader>
+                    <ButtonHeader onClick={this.props.abrirServico}>QUERO UM PROFISSIONAL AGORA!</ButtonHeader>
                 </AreaHome>
                 <hr />
                 <AreaHome>
                     <H2>Você é profissional?</H2>
-                    <H4>Venha, faça seu anúncio gratuito e amplie seus negócios e sua atuação no mercado</H4>
-                    <ButtonHeader onClick={this.props.abrirCriacaoDeServicos}>CADASTRAR MEUS SERVIÇOS</ButtonHeader>
+                    <H4>Venha, faça seu anúncio gratuito e amplie seus negócios e sua atuação no mercado.</H4>
+                    <ButtonHeader onClick={this.props.abrirCriacaoDeServicos}>CADASTRAR MEUS SERVIÇOS!</ButtonHeader>
                 </AreaHome>
             </div>
         )
diff --git a/src/components/servicos/CardServico.js b/src/components/servicos/CardServico.js
index 855ac3d..13a835c 100644
--- a/src/components/servicos/CardServico.js
+++ b/src/components/servicos/CardServico.js
@@ -7,7 +7,7 @@ const ContainerCard = styled.div`
 border: 1px solid #b2aeae;
 padding: 16px;
 width: 90%;
-height: 50vh;
+height: 100%;
 margin: 0 auto;
 display: grid;
 grid-row: repeat(7, 1fr);
@@ -16,11 +16,16 @@ grid-row: repeat(7, 1fr);
 const H2Card = styled.h2`
 margin: 0;
 padding: 0;
+padding-bottom: 10px;
+border-bottom: 1px solid black;
+text-align: center;
 `
 
 const H3Card = styled.h3`
 margin: 0;
 padding: 0;
+padding-bottom: 15px;
+padding-top: 8px;
 font-size: 16px;
 font-weight: 600;
 `
@@ -32,8 +37,8 @@ const ButtonCr = styled.button`
     width: 200px;
     background-color:  ${props => props.cor};
     color: ${props => props.texto};
-    border: none;
-    border-radius: 10px;
+    border: ${props => props.border};
+    border-radius: ${props => props.borderRadius};
     cursor: pointer;
     outline:none;
     :hover{
@@ -99,7 +104,7 @@ class CardServico extends React.Component {
        
                        {this.props.lista.map((servico) => {
        
-                           const renderizaBotao = servico.taken === true ? "Descandidatar-me" : "Candidatar-me"
+                           const renderizaBotao = servico.taken === true ? "DESCANDIDATAR-ME" : "CANDIDATAR-ME"
        
                            if (servico.taken) {
                                return (
@@ -111,7 +116,7 @@ class CardServico extends React.Component {
                                        <p>Pagamento: {servico.paymentMethods.map((metodo) => {
                                            return (`${metodo}; `)
                                        })}</p>
-                                       <ButtonCr cor={"#FFEA52"} hover={"black"} txt={"white"} texto={"black"} onClick={() => this.onClickDescandidatar(servico.id)}> {renderizaBotao} </ButtonCr>
+                                       <ButtonCr  border={"2px solid #FFEA52"} borderRadius={"none"} cor={"#FFF"} hover={"#FFEA52"} txt={"#FFF"} texto={"#000"} onClick={() => this.onClickDescandidatar(servico.id)}> {renderizaBotao} </ButtonCr>
                                    </ContainerCard>
                                )
                            } else {
@@ -124,7 +129,7 @@ class CardServico extends React.Component {
                                        <p>Pagamento: {servico.paymentMethods.map((metodo) => {
                                            return (`${metodo}; `)
                                        })}</p>
-                                       <ButtonCr cor={"black"} hover={"#FFEA52"} txt={"black"} texto={"white"} onClick={() => this.onClickCandidatar(servico.id)}> {renderizaBotao} </ButtonCr>
+                                       <ButtonCr  border={"none"} borderRadius={"10px"} cor={"black"} hover={"#FFEA52"} txt={"black"} texto={"white"} onClick={() => this.onClickCandidatar(servico.id)}> {renderizaBotao} </ButtonCr>
                                    </ContainerCard>
                                )
                            }