Merge pull request 'Ajustes vista de catalogo' (#49) from feat/clean-catalog-mobile into main

Reviewed-on: #49

src/components/CatalogueImagesManagement.vue

@@ -80,55 +80,67 @@
       </v-col>
     </v-row>
 
-    <v-dialog v-model="dialog.show" max-width="500" persistent>
+    <v-dialog v-model="dialog.show" max-width="520" persistent>
-      <v-card>
+      <v-card elevation="2" rounded="lg">
-        <v-card-title>
+        <v-card-title class="text-h6 font-weight-bold pa-6 pb-0">
+          <v-icon :icon="dialog.isEdit ? 'mdi-pencil' : 'mdi-plus-circle-outline'" class="mr-2" color="primary" />
           {{ dialog.isEdit ? 'Editar' : 'Agregar' }} Imagen de Catálogo
         </v-card-title>
-        <v-card-text>
+        <v-divider class="mt-3" />
+        <v-card-text class="pa-6">
           <v-form ref="formRef">
-            <v-select
+            <v-label class="font-weight-medium mb-1 d-block">Producto</v-label>
+            <v-autocomplete
               v-model="form.product"
               :items="productOptions"
-              label="Producto"
+              placeholder="Buscar producto…"
               :rules="[(v) => !!v || 'Seleccione un producto']"
               item-title="name"
               item-value="id"
               variant="outlined"
               :disabled="dialog.isEdit"
-              class="mb-3"
+              class="mb-5"
+              clearable
+              prepend-inner-icon="mdi-package-variant-closed"
+              density="comfortable"
             />
 
+            <v-label class="font-weight-medium mb-1 d-block">Imagen</v-label>
             <v-file-input
               ref="fileInputRef"
-              label="Imagen"
               accept="image/*"
               :rules="[(v) => !!v || 'Seleccione una imagen']"
               variant="outlined"
               prepend-icon="mdi-camera"
-              class="mb-3"
+              prepend-inner-icon="mdi-image-outline"
+              class="mb-5"
               @update:model-value="onFileSelected"
+              density="comfortable"
+              hide-details="auto"
             />
 
             <v-img
               v-if="form.preview"
               :src="form.preview"
-              max-height="200"
+              max-height="220"
               contain
-              class="mb-3 rounded"
+              class="rounded-lg border mt-2"
             />
           </v-form>
         </v-card-text>
-        <v-card-actions>
+        <v-divider />
+        <v-card-actions class="pa-4">
           <v-spacer />
-          <v-btn variant="text" @click="closeDialog">Cancelar</v-btn>
+          <v-btn variant="tonal" @click="closeDialog">Cancelar</v-btn>
           <v-btn
             color="primary"
             variant="elevated"
             :loading="submitting"
             :disabled="submitting"
             @click="submitForm"
+            class="ml-2"
           >
+            <v-icon start :icon="dialog.isEdit ? 'mdi-content-save' : 'mdi-upload'" />
             {{ dialog.isEdit ? 'Actualizar' : 'Agregar' }}
           </v-btn>
         </v-card-actions>