catalogo y producto page

pages/editar/productos/index.vue

@@ -5,7 +5,7 @@
         <h1 class="title">
           Productos
           <button
-            class="ml-4 mb-1 btn btn-outline-primary btn-sm"
+            class="btn-add"
             @click="redirectToNewProduct"
           >
             +
@@ -14,7 +14,7 @@
       </BCol>
     </BRow>
     <BRow>
-      <BCol class="d-flex flex-row-reverse">
+      <BCol class="d-flex flex-row-reverse mb-3">
         <button class="btn btn-secondary" :disabled="selectedItemsIndexes.length === 0" @click="desactivateProducts">
           Desactivar
         </button>
@@ -26,7 +26,7 @@
         </div>
       </BCol>
     </BRow>
-    <BRow>
+    <BRow class="table-consumo">
       <template v-if="products">
         <v-data-table
           v-model="selectedItemsIndexes"
@@ -37,9 +37,10 @@
           :search="search"
           :loading="loading"
           loading-text="Cargando productos..."
+          rounded
         >
           <template #top>
-            <v-toolbar flat color="white">
+            <v-toolbar flat color="#FDFCFB" rounded>
               <!-- Search -->
               <v-text-field
                 v-model="search"
@@ -257,21 +258,46 @@ export default {
   margin-top: 40px;
   margin-bottom: 80px;
 }
+
 .title {
-  color: $color-navy;
-  font-size: $xxl;
-  margin-bottom: 60px;
+  font-size: $h2;
+  color: $color-primary;
+  margin-bottom: 10px;
   @include mobile {
     margin-top: 70px;
   }
 }
-v-toolbar {
-  padding: 0;
+.table-consumo {
+  background-color: $color-bg-light;
+  width: 100%;
+  border-radius: 1rem;
+  
+  .v-toolbar {
+    padding: 0 16px;
+    margin: 10px 0;
+  }
 }
+
 .selected-products {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-items: center;
 }
+
+.btn-add {
+  background: $color-button;
+  color: #fff;
+  padding: 0rem 0.75rem;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  text-transform: uppercase;
+  &:hover {
+    background: white;
+    color: $color-button;
+    border: 1px solid $color-button;
+  }
+}
 </style>