changes

resources/js/Pages/Imports/Partials/ActionsBar.vue

@@ -5,6 +5,9 @@ import {
   BeakerIcon,
   ArrowDownOnSquareIcon,
 } from "@heroicons/vue/24/outline";
+import { Button } from '@/Components/ui/button';
+import { Badge } from '@/Components/ui/badge';
+
 const props = defineProps({
   importId: [Number, String],
   isCompleted: Boolean,
@@ -17,47 +20,50 @@ const emits = defineEmits(["preview", "save-mappings", "process-import", "simula
 </script>
 <template>
   <div class="flex flex-wrap gap-2 items-center" v-if="!isCompleted">
-    <button
+    <Button
+      variant="secondary"
       @click.prevent="$emit('preview')"
       :disabled="!importId"
-      class="px-4 py-2 bg-gray-600 disabled:bg-gray-300 text-white rounded flex items-center gap-2"
     >
-      <EyeIcon class="h-4 w-4" />
+      <EyeIcon class="h-4 w-4 mr-2" />
       Predogled vrstic
-    </button>
-    <button
+    </Button>
+    <Button
+      variant="default"
+      class="bg-orange-600 hover:bg-orange-700"
       @click.prevent="$emit('save-mappings')"
       :disabled="!importId || processing || savingMappings || isCompleted"
-      class="px-4 py-2 bg-orange-600 disabled:bg-gray-300 text-white rounded flex items-center gap-2"
       title="Shrani preslikave za ta uvoz"
     >
       <span
         v-if="savingMappings"
-        class="inline-block h-4 w-4 border-2 border-white/70 border-t-transparent rounded-full animate-spin"
+        class="inline-block h-4 w-4 mr-2 border-2 border-white/70 border-t-transparent rounded-full animate-spin"
       ></span>
-      <ArrowPathIcon v-else class="h-4 w-4" />
+      <ArrowPathIcon v-else class="h-4 w-4 mr-2" />
       <span>Shrani preslikave</span>
-      <span
+      <Badge
         v-if="selectedMappingsCount"
-        class="ml-1 text-xs bg-white/20 px-1.5 py-0.5 rounded"
-        >{{ selectedMappingsCount }}</span
-      >
-    </button>
-    <button
+        variant="secondary"
+        class="ml-2 text-xs"
+      >{{ selectedMappingsCount }}</Badge>
+    </Button>
+    <Button
+      variant="default"
+      class="bg-purple-600 hover:bg-purple-700"
       @click.prevent="$emit('process-import')"
       :disabled="!canProcess"
-      class="px-4 py-2 bg-purple-600 disabled:bg-gray-300 text-white rounded flex items-center gap-2"
     >
-      <BeakerIcon class="h-4 w-4" />
+      <BeakerIcon class="h-4 w-4 mr-2" />
       {{ processing ? "Obdelava…" : "Obdelaj uvoz" }}
-    </button>
-    <button
+    </Button>
+    <Button
+      variant="default"
+      class="bg-blue-600 hover:bg-blue-700"
       @click.prevent="$emit('simulate')"
       :disabled="!importId || processing"
-      class="px-4 py-2 bg-blue-600 disabled:bg-gray-300 text-white rounded flex items-center gap-2"
     >
-      <ArrowDownOnSquareIcon class="h-4 w-4" />
+      <ArrowDownOnSquareIcon class="h-4 w-4 mr-2" />
       Simulacija vnosa
-    </button>
+    </Button>
   </div>
 </template>