Improve search layout

Signed-off-by: Henrique V. Ehrenfried <hvehrenfried@inf.ufpr.br>

src/Components/SearchExpansionPanel/ExpansionPanel.css

+.MuiAccordionActions-root{
+    display: block !important;
+}
+.MuiListItemIcon-root{
+    min-width: 30px !important;
+}
+

src/Components/SearchExpansionPanel/SearchExpansionPanel.js

@@ -13,6 +13,8 @@ import { TextField } from "@material-ui/core";
 import Grid from '@material-ui/core/Grid'; 
 import CircularProgress from '@material-ui/core/CircularProgress';
 
+import './ExpansionPanel.css'
+
 const ExpansionPanel = withStyles({
   root: {
     border: "1px solid rgba(0, 0, 0, .125)",
@@ -101,7 +103,7 @@ export default function SearchExpansionPanel(props) {
                 style={{
                   fontSize: "18px",
                   textTransform: "uppercase",
-                  fontWeight: "500"
+                  fontWeight: "500",
                 }}
               >
                 Filtros

src/Pages/Search.js

@@ -141,7 +141,7 @@ export default function Search(props) {
   return (
     <div style={{ backgroundColor: "#f4f4f4" }}>
       <Principal>
-        <BreadCrumbsDiv>
+        <BreadCrumbsDiv style={{margin:"15px 2%", }}>
           <StyledBreadCrumbs>
             <Link to="/">Página Inicial</Link>
             <span>Busca</span>
@@ -152,7 +152,7 @@ export default function Search(props) {
           <HeaderFilters elevation={4} square>
             <Grid container spacing={0} style={{ height: "100%" }}>
               <Grid item xs style={{display:"flex", flexDirection:"column", justifyContent:"center", paddingLeft:20}}>
-                <div style={{ marginRight:5 }}>
+                <div style={{ marginRight:5, marginTop:15 }}>
                   <div className="textInfo">
                     <span  style={{ fontWeight:"bold" }}>
                       MOSTRAR
@@ -171,7 +171,7 @@ export default function Search(props) {
               {
                 optionResult === "User" ? null :
                   <Grid item xs style={{display: "flex", flexDirection: "column", justifyContent: "center", paddingRight: 20,}}>
-                    <div style={{marginLeft:5}}>
+                    <div style={{marginLeft:5, marginTop:15}}>
                       <div className="textInfo">
                         <span style={{ fontWeight:"bold" }}>
                           ORDENAR POR
@@ -187,14 +187,15 @@ export default function Search(props) {
                     </div>
                   </Grid>
               }
+              <Grid item xs={12}>
+                <div style={{display: "flex", flexDirection: "column", justifyContent: "center" }}>
+                  <div style={{textAlign: "center", paddingTop: 10, fontWeight:"bolder"}}>
+                    Exibindo {totalResults === 0 ? 0 : resultsPerPage} resultados de {totalResults} encontrados
+                  </div>
+                </div>
+              </Grid>
             </Grid>
           </HeaderFilters>
-
-          <div style={{display: "flex", flexDirection: "column", justifyContent: "center" }}>
-            <div style={{textAlign: "center", paddingTop: 10, paddingBottom:30, fontWeight:"bolder"}}>
-              Exibindo {totalResults === 0 ? 0 : resultsPerPage} resultados de {totalResults} encontrados
-            </div>
-          </div>
         
           {
             isloading ? <LoadingSpinner text="Carregando..." /> :
@@ -238,15 +239,19 @@ export default function Search(props) {
 
                 optionResult === "LearningObject" ? (
                   <GridBuscaResource container spacing={2}>
-                    <Grid item xs={12} md={3}>
-                      <Paper elevation={4} square>
-                          <SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} />
-                      </Paper>
+                    <Grid item xs={12} md={2}>
+                      <Grid container >
+                        <Grid item xs={12}>
+                          <Paper elevation={4} square>
+                              <SearchExpansionPanel onChange={collectStuff} onFiltering={isFiltering} />
+                          </Paper>
+                        </Grid>
+                      </Grid>
                     </Grid>
                     <Grid item xs>
                       <Grid container spacing={2}>
                         {resultsResource.map((card) => (
-                          <Grid item  xs key={card.id}>
+                          <Grid item xs={12} sm={6} md={4} lg={3} key={card.id}>
                             <ResourceCardFunction
                               avatar={card.publisher.avatar}
                               id={card.id}
@@ -391,7 +396,7 @@ const GridBuscaUser = styled(Grid)`
 `;
 
 const HeaderFilters = styled(Paper)`
-  height: 110px;
+  height: 150px;
   text-align: center;
   background-color: #fff;
   margin-bottom: 30px;