Update more modal designs

resources/views/components/modal-header.blade.php

@@ -1,13 +1,19 @@
 @props(['title'])
-<div class="flex flex-shrink-0 items-center justify-between rounded-t-md p-4 bg-rose-600">
-    <!--Modal title-->
-    <h5 class="text-xl font-medium leading-normal text-white">
-        {{ $title }}
-    </h5>
-    <!--Close button-->
-    <button type="button" class="box-content text-white rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none" data-te-modal-dismiss aria-label="Close">
-        <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-        </svg>
+<div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
+    <div>
+        <h2
+            id="modalGenresLabel"
+            class="text-xl font-semibold text-neutral-900 dark:text-white"
+        >
+            {{ $title }} 
+        </h2>
+    </div>
+
+    <button
+        type="button"
+        data-te-modal-dismiss
+        class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
+    >
+        ✕
     </button>
 </div>