Updated Alert for better UI.

Author: takielias

resources/views/common/alert.blade.php

@@ -3,18 +3,82 @@
         <div class="text-muted">{{Session('message')}}</div>
     </div>
 @elseif(Session::has('success'))
-    <div class="alert alert-success" role="alert">
-        <div class="text-muted">{{Session('success')}}</div>
+    <div class="alert alert-important alert-success alert-dismissible" role="alert">
+        <div class="d-flex">
+            <div>
+                <!-- Download SVG icon from http://tabler.io/icons/icon/check -->
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                     class="icon alert-icon icon-2">
+                    <path d="M5 12l5 5l10 -10"></path>
+                </svg>
+            </div>
+            <div>
+                {{Session('success')}}
+            </div>
+        </div>
+        <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+    </div>
+@elseif(Session::has('warning'))
+    <div class="alert alert-important alert-warning alert-dismissible" role="alert">
+        <div class="d-flex">
+            <div>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                     class="icon alert-icon icon-2">
+                    <path d="M12 9v4"></path>
+                    <path
+                        d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path>
+                    <path d="M12 16h.01"></path>
+                </svg>
+            </div>
+            <div>
+                {{Session('success')}}
+            </div>
+        </div>
+        <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
     </div>
 @elseif(Session::has('error'))
-    <div class="alert alert-danger" role="alert">
-        <div class="text-muted">{{Session('error')}}</div>
+    <div class="alert alert-important alert-danger alert-dismissible" role="alert">
+        <div class="d-flex">
+            <div>
+                <!-- Download SVG icon from http://tabler.io/icons/icon/alert-circle -->
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                     class="icon alert-icon icon-2">
+                    <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
+                    <path d="M12 8v4"></path>
+                    <path d="M12 16h.01"></path>
+                </svg>
+
+            </div>
+            <div>
+                {{Session('error')}}
+            </div>
+        </div>
+        <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
     </div>
 @endif
 @if ($errors->any())
     @foreach ($errors->all() as $error)
-        <div class="alert alert-danger" role="alert">
-            <div class="text-muted">{{$error}}</div>
+        <div class="alert alert-important alert-danger alert-dismissible" role="alert">
+            <div class="d-flex">
+                <div>
+                    <!-- Download SVG icon from http://tabler.io/icons/icon/alert-circle -->
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                         class="icon alert-icon icon-2">
+                        <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
+                        <path d="M12 8v4"></path>
+                        <path d="M12 16h.01"></path>
+                    </svg>
+
+                </div>
+                <div>
+                    {{$error}}
+                </div>
+            </div>
+            <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
         </div>
     @endforeach
 @endif