Added disableBgTexture option to modals

src/components/utilities/Accordion.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mb-4 flex flex-col gap-3">
-    <div @click="toggle" class="p-3 bg-gray-100 bg-opacity-50 rounded hover:bg-gray-200 text-white font-default cursor-pointer">
+    <div @click="toggle" class="p-3 bg-gray-200 bg-opacity-50 rounded hover:bg-gray-300 text-white font-default cursor-pointer">
       <slot name="header" />
     </div>
     <transition enter-active-class="transition-all duration-300 ease-in-out" leave-active-class="transition-all duration-300 ease-in-out" enter-from-class="opacity-0 max-h-0" enter-to-class="opacity-100 max-h-96" leave-from-class="opacity-100 max-h-96" leave-to-class="opacity-0 max-h-0">

src/components/utilities/Modal.vue

@@ -3,7 +3,13 @@
     <div v-if="isModalOpenRef" class="fixed border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
       <!-- Header -->
       <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative">
-        <div class="rounded-t absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-center bg-cover opacity-90" />
+        <div
+          :class="{
+            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': !disableBgTexture,
+            'bg-gray-700': disableBgTexture
+          }"
+          class="rounded-t absolute w-full h-full top-0 left-0"
+        />
         <div class="relative z-10">
           <slot name="modalHeader" />
         </div>
@@ -19,7 +25,13 @@
 
       <!-- Body -->
       <div class="overflow-hidden grow relative">
-        <div class="rounded-b absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center opacity-90" />
+        <div
+          :class="{
+            'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': !disableBgTexture,
+            'bg-gray-700': disableBgTexture
+          }"
+          class="rounded-b absolute w-full h-full top-0 left-0"
+        />
         <div class="relative z-10 h-full">
           <slot name="modalBody" />
         </div>
@@ -41,6 +53,7 @@ interface ModalProps {
   modalPositionY?: number
   modalWidth?: number
   modalHeight?: number
+  disableBgTexture?: boolean
 }
 
 interface Position {
@@ -58,7 +71,8 @@ const props = withDefaults(defineProps<ModalProps>(), {
   modalPositionX: 0,
   modalPositionY: 0,
   modalWidth: 500,
-  modalHeight: 280
+  modalHeight: 280,
+  disableBgTexture: false
 })
 
 const emit = defineEmits<{