changes UI

resources/js/Components/PersonInfo/PersonInfoEmailsTab.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { PlusIcon, DottedMenu, EditIcon, TrashBinIcon } from "@/Utilities/Icons";
+import { DottedMenu, EditIcon, TrashBinIcon, PlusIcon } from "@/Utilities/Icons";
 import Dropdown from "../Dropdown.vue";
 
 const props = defineProps({
@@ -17,17 +17,7 @@ const handleDelete = (id, label) => emit('delete', id, label);
 </script>
 
 <template>
-  <div class="flex justify-end mb-3" v-if="edit">
-    <button
-      @click="handleAdd"
-      class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all"
-      title="Dodaj email"
-    >
-      <PlusIcon size="sm" />
-      <span>Dodaj email</span>
-    </button>
-  </div>
-  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-3">
+  <div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
     <template v-if="getEmails(person).length">
       <div
         class="rounded-lg p-4 bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow"
@@ -89,7 +79,15 @@ const handleDelete = (id, label) => emit('delete', id, label);
         </p>
       </div>
     </template>
-    <p v-else class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200">
+    <button
+      v-if="edit"
+      @click="handleAdd"
+      class="rounded-lg p-4 bg-white border-2 border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition-all flex items-center justify-center min-h-[120px]"
+      title="Dodaj email"
+    >
+      <PlusIcon class="h-8 w-8 text-gray-400" />
+    </button>
+    <p v-else-if="!edit && !getEmails(person).length" class="col-span-full p-4 text-sm text-gray-500 text-center bg-gray-50 rounded-lg border border-gray-200">
       Ni e-poštnih naslovov.
     </p>
   </div>