From 0be25f0529e34f583c0c1a5114babb94951524b6 Mon Sep 17 00:00:00 2001
From: Kaueny Alves <63555634+Kaueny-Alves@users.noreply.github.com>
Date: Wed, 27 May 2020 17:22:38 -0300
Subject: [PATCH 1/2] =?UTF-8?q?altera=C3=A7=C3=B5es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                      | 1 -
 src/components/Filter/Filter.js | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index c8325d6..ff33f1e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -110,7 +110,6 @@ class App extends React.Component {
          funcaoMax={this.atualizarMaximo}
          funcaoMin={this.atualizarMinimo}
          funcaoRegex={this.atualizarRegex}
-
       />
       <GridProdutos listaProdutos={this.state.produtos}></GridProdutos>
       <Carrinho></Carrinho>
diff --git a/src/components/Filter/Filter.js b/src/components/Filter/Filter.js
index 4f52772..581032f 100644
--- a/src/components/Filter/Filter.js
+++ b/src/components/Filter/Filter.js
@@ -11,8 +11,12 @@ const BarraLateral = styled.div`
 function Filter(props) {
   const { funcaoMax, funcaoMin, funcaoRegex } = props;
   return <BarraLateral>
+    <h1>Pesquisar Produtos:</h1>
+    <label>Valor Máximo:</label>
     <input placeholder="Maximo" type="number" onChange={funcaoMax} />
+    <label>Valor Mínimo':</label>
     <input placeholder="Minimo" type="number" onChange={funcaoMin} />
+    <label>Buscar Produto:</label>
     <input placeholder="Pesquisar" onChange={funcaoRegex} />
   </BarraLateral>;
 }

From e888d59350a695822110f7912074c72e73b7b0ef Mon Sep 17 00:00:00 2001
From: Kaueny Alves <63555634+Kaueny-Alves@users.noreply.github.com>
Date: Wed, 27 May 2020 18:49:18 -0300
Subject: [PATCH 2/2] Filtro-Estilizado

---
 src/components/Filter/Filter.js | 37 ++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/components/Filter/Filter.js b/src/components/Filter/Filter.js
index 581032f..77bb695 100644
--- a/src/components/Filter/Filter.js
+++ b/src/components/Filter/Filter.js
@@ -2,22 +2,39 @@ import React from "react";
 import styled from "styled-components";
 
 const BarraLateral = styled.div`
-    display:flex;
-    flex-direction: column;
-    border: 1px solid orange;
+  display:flex;
+  flex-direction: column;
+  padding: 5px;
+  font-family: Roboto;
+  border: 1px solid black;
+  margin: 30px 20px 0px 20px;
+
+`
+const SeçãoFiltro = styled.div`
+  margin: 10px 5px;
+`
+
+const Title = styled.h3`
+margin: 10px 5px;
 `
 
 
 function Filter(props) {
   const { funcaoMax, funcaoMin, funcaoRegex } = props;
   return <BarraLateral>
-    <h1>Pesquisar Produtos:</h1>
-    <label>Valor Máximo:</label>
-    <input placeholder="Maximo" type="number" onChange={funcaoMax} />
-    <label>Valor Mínimo':</label>
-    <input placeholder="Minimo" type="number" onChange={funcaoMin} />
-    <label>Buscar Produto:</label>
-    <input placeholder="Pesquisar" onChange={funcaoRegex} />
+    <Title>FILTROS</Title>
+    <SeçãoFiltro>
+     <label>Valor Máximo</label> <br />
+     <input type="number" onChange={funcaoMax} />
+    </SeçãoFiltro>
+    <SeçãoFiltro>
+     <label>Valor Mínimo</label> <br />
+     <input type="number" onChange={funcaoMin} />
+    </SeçãoFiltro>
+    <SeçãoFiltro>
+     <label>Buscar Produtos</label> <br />
+     <input onChange={funcaoRegex} />
+    </SeçãoFiltro>
   </BarraLateral>;
 }