chore: update deps (#3412)

Co-authored-by: Miloš Paunović <[email protected]>

Author: elevatebart

components/common/Modal.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+const show = defineModel<boolean>("show")
+const modalRef = useTemplateRef<HTMLDialogElement>("modalRef")
+
+function popModal() {
+  if (!modalRef.value) return;
+  modalRef.value.showModal();
+}
+
+function closeModal() {
+  if (!modalRef.value) return;
+  modalRef.value.close();
+}
+
+watch(
+  show,
+  (newVal) => {
+    if (newVal) {
+      popModal();
+    } else {
+      closeModal();
+    }
+  },
+  { immediate: true }
+);
+
+</script>
+
+<template>
+    <teleport to="body">
+        <dialog ref="modalRef" v-bind="$attrs">
+            <slot/>
+        </dialog>
+    </teleport>
+</template>
+
+<style scoped>
+dialog {
+    border: none;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 0;
+    overflow: auto;
+    animation: fadeOut 1s forwards;
+    display: inline-block;
+    width: 90%;
+
+    @media screen and (min-width: 820px) {
+        width: 800px;
+    }
+
+    &::backdrop {
+        background-color: #26282d;
+        backdrop-filter: blur(2px);
+        opacity: .5;
+    }
+    &::backdrop {
+        animation: fadeOutHalf 1s forwards;
+    }
+
+    &[open] {
+        animation: fadeIn 1s forwards;
+        &::backdrop {
+            animation: fadeInHalf 1s forwards;
+        }
+    }
+}
+
+/* Keyframes for dialog and popover elements */
+@keyframes fadeIn {
+  from { opacity: 0 }
+  to { opacity: 1 }
+}
+@keyframes fadeOut {
+  from { opacity: 1 }
+  to { opacity: 0 }
+}
+@keyframes fadeInHalf {
+  from { opacity: 0 }
+  to { opacity: .5 }
+}
+@keyframes fadeOutHalf {
+  from { opacity: .5 }
+  to { opacity: 0 }
+}
+</style>

components/videos/TutorialsList.vue

@@ -75,8 +75,6 @@
                                                 :video="video"
                                                 :getYMD="getYMD"
                                                 @click="openVideoModal(video)"
-                                                data-bs-toggle="modal"
-                                                data-bs-target="#youtube-video"
                                             />
                                         </div>
                                     </div>
@@ -111,18 +109,8 @@
                 </div>
             </div>
         </div>
-        <div
-            v-on="{
-                'show.bs.modal': () => (videoVisible = true),
-                'hidden.bs.modal': () => (videoVisible = false),
-            }"
-            class="modal fade"
-            tabindex="-1"
-            role="dialog"
-            id="youtube-video"
-            ref="youtubeVideoModal"
-            aria-labelledby="youtube-video"
-            aria-hidden="true"
+        <Modal
+            v-model:show="videoVisible"
         >
             <div class="modal-dialog modal-lg modal-dialog-centered">
                 <div class="modal-content">
@@ -146,11 +134,13 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </Modal>
     </div>
 </template>
 
 <script setup lang="ts">
+import Modal from '../common/Modal.vue'
+
 interface Category {
   name: string
 }
@@ -171,7 +161,6 @@ interface TutorialVideoResponse {
   total: number
 }
 
-const { $bootstrap } = useNuxtApp()
 const config = useRuntimeConfig()
 const route = useRoute()
 const router = useRouter()
@@ -260,13 +249,12 @@ function changePage(pageNo: number): void {
 }
 
 function closeModal(): void {
-  if (process.client && youtubeVideoModal.value) {
-    const modal = $bootstrap.Modal.getInstance(youtubeVideoModal.value)
-    modal?.hide()
-  }
+    videoVisible.value = false
+    visibleVideoData.value = {} as VideoData
 }
 
 function openVideoModal(video: VideoData): void {
+  videoVisible.value = true
   visibleVideoData.value = video
 }
 
@@ -323,6 +311,7 @@ watch(tutorialVideo, (newVal) => {
     .modal-header {
         background-color: $black-2;
         border-bottom-color: $black-2;
+        padding: 1rem;
         padding-bottom: 0;
         padding-top: 5px;
         display: flex;
@@ -331,11 +320,13 @@ watch(tutorialVideo, (newVal) => {
             background: transparent;
             border: none;
             color: $white;
+            outline: $black-5 dotted 1px;
         }
     }
 
     .modal-body {
         background-color: $black-2;
+        padding: 1rem;
     }
 
     .right-side-bar {