Refactor legacy modals to shared primitives

components/bug-fix-form.html

@@ -1,67 +1,51 @@
-<!-- components/bug-fix-form.html 
+<!-- components/bug-fix-form.html
 //    https://bitvid.network?modal=bug => open bugFixModal
 //    Admin: npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe
-//    Form: 
-//    Responses: 
+//    Form:
+//    Responses:
 -->
-<div
-  id="bugFixModal"
-  class="fixed inset-0 z-50 hidden"
-  style="background: transparent"
->
-  <!-- Dark/blur overlay -->
-  <div
-    class="absolute inset-0 z-10"
-    style="
-      background-color: rgba(0, 0, 0, 0.9);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-    "
-  ></div>
+<div id="bugFixModal" class="bv-modal hidden items-start justify-center overflow-y-auto">
+  <div class="bv-modal-backdrop" data-dismiss></div>
 
   <div
-    class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
+    class="bv-modal__panel relative my-0 w-full max-w-[90%] overflow-hidden rounded-lg bg-gray-900 lg:max-w-6xl"
   >
+    <!-- Header bar (sticky) with updated title styling -->
     <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+      class="sticky top-0 flex items-center justify-between border-b border-gray-700 bg-gradient-to-b from-black/80 to-transparent p-4"
     >
-      <!-- Header bar (sticky) with updated title styling -->
-      <div
-        class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between border-b border-gray-700"
+      <h2 class="pb-2 text-3xl font-extrabold tracking-wide text-white">
+        Bug Fix Form
+      </h2>
+      <button
+        id="closeBugFixModal"
+        class="flex h-10 w-10 items-center justify-center rounded-full bg-black/50 transition-all duration-200 backdrop-blur hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
       >
-        <h2 class="text-3xl font-extrabold text-white tracking-wide pb-2">
-          Bug Fix Form
-        </h2>
-        <button
-          id="closeBugFixModal"
-          class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 text-gray-300"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="w-6 h-6 text-gray-300"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
-        </button>
-      </div>
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    </div>
 
-      <div class="p-6">
-        <div class="w-full" style="height: 80vh">
-          <iframe
-            src="./components/iframe_forms/iframe-bug-fix-form.html"
-            class="w-full h-full"
-            frameborder="0"
-            style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
-          ></iframe>
-        </div>
+    <div class="p-6">
+      <div class="w-full" style="height: 80vh">
+        <iframe
+          src="./components/iframe_forms/iframe-bug-fix-form.html"
+          class="h-full w-full"
+          frameborder="0"
+          style="border: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2)"
+        ></iframe>
       </div>
     </div>
   </div>