From 12c25f77eef46c615bc10d0bbf09671781c1ff37 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Fri, 10 Oct 2025 11:40:39 -0400
Subject: [PATCH] Refactor profile and edit video modals to use base modal
 primitives

---
 components/edit-video-modal.html | 24 +++++++-----------------
 components/profile-modal.html    | 23 ++++-------------------
 2 files changed, 11 insertions(+), 36 deletions(-)

diff --git a/components/edit-video-modal.html b/components/edit-video-modal.html
index 2dc77244..5f953951 100644
--- a/components/edit-video-modal.html
+++ b/components/edit-video-modal.html
@@ -1,26 +1,17 @@
 <!-- components/edit-video-modal.html -->
 <div
   id="editVideoModal"
-  class="fixed inset-0 z-50 hidden"
-  style="background: transparent"
+  class="bv-modal hidden items-start md:items-center"
+  role="dialog"
+  aria-modal="true"
+  tabindex="-1"
 >
-  <div
-    id="editVideoModalOverlay"
-    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="editVideoModalOverlay" class="bv-modal-backdrop"></div>
 
   <div
-    class="relative modal-container h-full w-full flex items-start md:items-center justify-center overflow-y-auto z-20"
+    class="bv-modal__panel modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-4xl my-0 overflow-y-auto relative max-h-[90vh]"
+    tabindex="-1"
   >
-    <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-4xl my-0 rounded-lg overflow-y-auto relative"
-      style="max-height: 90vh"
-    >
       <div
         class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150 p-4 flex items-center justify-between"
       >
@@ -922,5 +913,4 @@
         </form>
       </div>
     </div>
-  </div>
 </div>
diff --git a/components/profile-modal.html b/components/profile-modal.html
index 68eb68c2..5302de1a 100644
--- a/components/profile-modal.html
+++ b/components/profile-modal.html
@@ -1,32 +1,18 @@
 <!-- components/profile-modal.html -->
 <div
   id="profileModal"
-  class="fixed inset-0 z-50 hidden"
+  class="bv-modal hidden items-start"
   role="dialog"
   aria-modal="true"
   aria-labelledby="profileModalTitle"
   tabindex="-1"
-  style="background: transparent"
 >
-  <!-- Overlay Layer with dark background and blur -->
-  <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 class="bv-modal-backdrop"></div>
 
-  <!-- Outer container with the same sizing approach as your other modals -->
   <div
-    class="modal-container relative h-full w-full flex items-start justify-center overflow-y-auto z-20"
+    class="bv-modal__panel modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 flex flex-col overflow-hidden relative max-h-[90vh]"
+    tabindex="-1"
   >
-    <!-- Inner content: wide layout, matching your video modal -->
-    <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative flex flex-col"
-      style="max-height: 90vh"
-    >
       <!-- Modal Header -->
       <div
         class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
@@ -618,5 +604,4 @@
         </button>
       </div>
     </div>
-  </div>
 </div>