grid in list view plazas

src/App.css

@@ -207,3 +207,12 @@
 #login_btn_fn:hover{
     background-color: var(--second)
 }
+
+.btn_plaza_common{
+    cursor:pointer;
+}
+
+.btn_plaza_common:hover{
+    color:var(--second) !important;
+}
+

src/Components/Puestos/GridMode.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import NotFound from '../../Images/not_found.png';
+
 import { 
     RemoveRedEye as RemoveRedEyeIcon,
     Edit as EditIcon,
@@ -18,7 +19,6 @@ export function GridMode(props){
             {
                 data.length ? 
                     data.map( plaza => {
-                        console.log('plaza', plaza)
                         return(
                             <Col key={plaza.id} lg="4" md="6" sm="6" xs="12" >
                                 <div className="panel">

src/Css/all.css

@@ -3,10 +3,6 @@
     outline: 0 !important;
     font-family: 'gudea' !important;
 }
-.row {
-    margin: 0 !important;
-    padding: 0;
-}
 @font-face {
     font-family: gudea;
     src: url("../Fonts/Gudea-Regular.ttf"); /* TTF file for CSS3 browsers */
@@ -314,7 +310,8 @@ li.nav-item {
     margin-bottom: 24px;
 }
 .body-table {
-    padding: 40px;
+    /* padding: 40px; */
+    padding: 15px;
     background: #24344d;
     border-radius: 2px;
     box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 -1px 0 rgba(0,0,0,.02); 
@@ -806,15 +803,16 @@ table.dataTable tbody th, table.dataTable tbody td {
 .add_producto {
     width: 150px;
     text-align: center;
-    margin-bottom: 40px;
+    /* margin-bottom: 40px; */
     float: right;
 }
 .btn_add_producto {
-    border: 1px solid #2ec5d3;
-    background: #2ec5d3;
-    border-radius: 20px;
+    border: 1px solid var(--second);
+    background: var(--second);
+    border-radius: 10px;
     color: #fff;
     font-size: 12px;
+    margin : 3px;
 }
 .btn_add_producto:hover {
     border: 1px solid #2ec5d3;
@@ -824,7 +822,7 @@ table.dataTable tbody th, table.dataTable tbody td {
 }
 .btn_add_producto span {
     display: block;
-    padding: 10px;
+    padding: 6px;
 }
 .modal-header {
     display: -ms-flexbox;

src/Pages/Puestos.jsx

@@ -18,6 +18,7 @@ import Mostrar from '../Components/Modal/MostrarPlaza';
 
 import { ListMode } from '../Components/Puestos/ListMode'
 import { GridMode } from '../Components/Puestos/GridMode'
+import { Add as AddIcon, } from '@mui/icons-material/'
 
 
 const Success =  () => toast.success('Plaza Agregada!!')
@@ -32,22 +33,22 @@ export function Puestos() {
         let rest = new Service("/plaza/getall")
 
         rest
-        .get(token)
-        .then(({data}) => {
-            let entries = data.map( e => {
-                return {
-                    nombre : e.nombrepuesto,
-                    description : e.notas,
-                    id : e.id,
-                    created: e.create_day,
-                    data: e
-                };
+            .get(token)
+            .then(({data}) => {
+                let entries = data.map( e => {
+                    return {
+                        nombre : e.nombrepuesto,
+                        description : e.notas,
+                        id : e.id,
+                        created: e.create_day,
+                        data: e
+                    };
+                })
+                setData(entries)
+            })
+            .catch((error) => {
+                console.log('error fetching data  ', error );
             })
-            setData(entries)
-        })
-        .catch((error) => {
-            console.log('error fetching data  ', error );
-        })
 
     },[token])
 
@@ -86,9 +87,9 @@ export function Puestos() {
         <div className="content-section">
             <div className="main">
                 <Box sx={{ width: '100%' }}>
-                    <Paper sx={{ width: '100%', mb: 2, padding : 2 }}>
+                    <Paper sx={{ width: '100%', mb: 2, padding : 2, height: '95vh' }}>
 
-                        <Row>
+                        <Row style={{paddingBottom : 15}}>
                             <Col md="2" sm="2" xs="2">
                                 <div className="breadcrumb-header">
                                     <Box sx={{ float : 'left',display: 'flex', flexDirection: 'column', alignItems: 'center', '& > :not(style) + :not(style)': { mt: 2 }, }} >
@@ -100,10 +101,14 @@ export function Puestos() {
                             </Col>
                             <Col md="10" sm='10' xs="10">
                                 <div className="add_producto">
-                                    <div onClick={() => setManual(true) } className="btn_add_producto"> <span >Agregar manual</span> </div>
+                                    <div onClick={() => setManual(true) } className="btn_add_producto"> 
+                                        <span className="btn_plaza_common" >Agregar manual <AddIcon/></span> 
+                                    </div>
                                 </div>
                                 <div onClick={() => setExpress(true) } className="add_producto">
-                                    <div className="btn_add_producto"> <span >Agregar express</span> </div>
+                                    <div className="btn_add_producto"> 
+                                        <span className="btn_plaza_common">Agregar express <AddIcon/></span> 
+                                    </div>
                                 </div>
                             </Col>
                         </Row>