- fix to empty states (#163)

* #150 - changed the default colour for empty states

* #150 - added empty states for user requests

* #31 - amended text for empty states - employee

resources/js/Pages/VacationRequest/Index.vue

@@ -176,7 +176,14 @@
               colspan="100%"
               class="py-4 text-xl leading-5 text-center text-gray-700"
             >
-              Brak danych
+              <EmptyState>
+                <template #title>
+                  Brak wniosków
+                </template>
+                <template #text>
+                  Nie znaleziono wniosków o danym statusie
+                </template>
+              </EmptyState>
             </td>
           </tr>
         </tbody>
@@ -195,6 +202,7 @@ import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } f
 import { reactive, watch } from 'vue'
 import { debounce } from 'lodash'
 import { Inertia } from '@inertiajs/inertia'
+import EmptyState from '@/Shared/Feedbacks/EmptyState'
 
 const props = defineProps({
   requests: Object,

resources/js/Shared/Feedbacks/EmptyState.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-center my-5">
+  <div class="text-center my-5 text-gray-500">
     <slot name="head">
       <SearchIcon class="mx-auto w-12 h-12" />
     </slot>
@@ -8,7 +8,7 @@
         No search result
       </slot>
     </h3>
-    <p class="text-sm text-gray-500">
+    <p class="text-sm">
       <slot name="text">
         Try a different search query
       </slot>

resources/js/Shared/Widgets/PendingVacationRequests.vue

@@ -52,7 +52,7 @@
             </div>
           </li>
           <li v-if="! requests.length">
-            <EmptyState class="text-gray-700">
+            <EmptyState>
               <template #head>
                 <CollectionIcon class="mx-auto w-12 h-12" />
               </template>

resources/js/Shared/Widgets/UserVacationRequests.vue

@@ -38,7 +38,7 @@
           </li>
           <li v-if="! requests.length">
             <p class="py-2">
-              <EmptyState class="text-gray-700">
+              <EmptyState>
                 <template #head>
                   <CollectionIcon class="mx-auto w-12 h-12" />
                 </template>
@@ -46,7 +46,7 @@
                   Brak wniosków
                 </template>
                 <template #text>
-                  Nie ma oczekujących wniosków
+                  Nie utworzono jeszcze wniosku
                 </template>
               </EmptyState>
             </p>