Update empty notifications display

Better empty state page for notifications laravelio#1044
sparkison · Jun 11, 2024 · ca3cfda · ca3cfda
1 parent 738a1f4
commit ca3cfda
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/resources/views/livewire/notifications.blade.php b/resources/views/livewire/notifications.blade.php
@@ -39,9 +39,14 @@
 
                 {{ $notifications->links() }}
             @else
-                <p class="text-gray-600 text-base">
-                    You have no unread notifications
-                </p>
+                <div class="relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mx-auto h-12 w-12 text-gray-400">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.143 17.082a24.248 24.248 0 0 0 3.844.148m-3.844-.148a23.856 23.856 0 0 1-5.455-1.31 8.964 8.964 0 0 0 2.3-5.542m3.155 6.852a3 3 0 0 0 5.667 1.97m1.965-2.277L21 21m-4.225-4.225a23.81 23.81 0 0 0 3.536-1.003A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6.53 6.53m10.245 10.245L6.53 6.53M3 3l3.53 3.53" />
+                    </svg>
+                    <span class="mt-2 block text-sm font-semibold text-gray-900">
+                        You have no unread notifications
+                    </span>
+                </div>
             @endif
         </div>
     </div>