Add styling to flash messages & use Alpine.js

far1h · far1h · commit 83b4b5e80a92 · 2024-10-13T09:09:29.000+07:00
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -7,20 +7,26 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Laravel 10 Task List App</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="//unpkg.com/alpinejs" defer></script>
+
     <style type="text/tailwindcss">
         .btn {
             @apply rounded-md px-2 py-1 text-center font-medium shadow-sm ring-1 ring-slate-700/10 hover:bg-slate-50 text-slate-700
         }
+
         .link {
             @apply font-medium text-gray-700 underline decoration-pink-500
         }
+
         label {
             @apply block uppercase text-slate-700 mb-2
         }
+
         input,
         textarea {
             @apply shadow-sm appearance-none border w-full py-2 px-3 text-slate-700 leading-tight focus:outline-none
         }
+
         .error {
             @apply text-red-500 text-sm
         }
@@ -30,12 +36,23 @@
 
 <body class="container mx-auto mt-10 mb-10 max-w-lg">
     <h1 class="text-2xl mb-4">@yield('title')</h1>
-    <div>
+    <di x-data="{ flash: true }">
         @if (session()->has('success'))
+        <div x-show="flash"
+        class="relative mb-10 rounded border border-green-400 bg-green-100 px-4 py-3 text-lg text-green-700"
+            role="alert">
+            <strong class="font-bold">Success!</strong>
             <div>{{ session('success') }}</div>
+            <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    @click="flash = false" stroke="currentColor" class="h-6 w-6 cursor-pointer">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </span>
+        </div>
         @endif
         @yield('content')
-    </div>
+        </div>
 </body>
 
 </html>
