@necrolab/dashboard 0.4.61 → 0.4.208

package/src/components/Tasks/TaskView.vue

@@ -1,64 +1,58 @@
 <template>
-    <div class="table-component">
-        <Header class="grid-cols-10 gap-2 text-center lg:grid-cols-12">
-            <div class="col-span-1 flex items-center justify-start lg:col-span-2">
-                <Checkbox
-                    class="ml-2 mr-4 flex-shrink-0"
-                    :toggled="ui.mainCheckbox.tasks"
-                    @valueUpdate="ui.toggleMainCheckbox('tasks')"
-                    :isHeader="true" />
-                <div class="mx-auto hidden items-center lg:flex" @click="ui.toggleSort('eventId')">
-                    <EventIcon class="lg:mr-3" />
-                    <h4 class="hidden lg:flex">Event</h4>
+    <Table>
+        <Header class="text-center">
+            <div class="col-span-1 lg:col-span-2 flex">
+                <Checkbox class="mr-3" :toggled="ui.mainCheckbox.tasks" @valueUpdate="ui.toggleMainCheckbox('tasks')" />
+                <div class="mx-auto hidden md:flex items-center" @click="ui.toggleSort('eventId')">
+                    <EventIcon class="ipadlg:mr-3" />
+                    <h4 class="hidden ipadlg:flex">Event</h4>
                     <DownIcon v-if="ui.sortData.sortBy === 'eventId' && !ui.sortData.reversed" class="ml-1" />
                     <UpIcon v-if="ui.sortData.sortBy === 'eventId' && ui.sortData.reversed" class="ml-1" />
                 </div>
             </div>
-            <div class="flex-center col-span-2" v-once>
-                <TicketIcon class="mr-0 lg:mr-3" />
-                <h4 class="hidden lg:flex">Tickets</h4>
+            <div class="col-span-2 items-center justify-center hidden md:flex" v-once>
+                <CartIcon class="mr-0 ipadlg:mr-3" />
+
+                <h4 class="hidden ipadlg:flex">Quantity</h4>
+            </div>
+            <div class="col-span-2 flex items-center justify-center" v-once>
+                <TicketIcon class="mr-0 ipadlg:mr-3" />
+                <h4 class="hidden ipadlg:flex">Tickets</h4>
             </div>
-            <div class="flex-center col-span-5 md:col-span-4 lg:col-span-5" @click="ui.toggleSort('status')">
-                <StatusIcon class="mr-0 lg:mr-3" />
-                <h4 class="hidden lg:flex">Status</h4>
+            <div
+                class="col-span-6 md:col-span-4 lg:col-span-3 flex items-center justify-center"
+                @click="ui.toggleSort('status')"
+            >
+                <StatusIcon class="mr-0 ipadlg:mr-3" />
+                <h4 class="hidden ipadlg:flex">Status</h4>
                 <DownIcon v-if="ui.sortData.sortBy === 'status' && !ui.sortData.reversed" class="ml-1" />
                 <UpIcon v-if="ui.sortData.sortBy === 'status' && ui.sortData.reversed" class="ml-1" />
             </div>
-            <div class="flex-center col-span-2 lg:col-span-3" v-once>
-                <ClickIcon class="mr-0 lg:mr-3" />
-                <h4 class="hidden lg:flex">Actions</h4>
+            <div class="col-span-2 flex items-center justify-center" v-once>
+                <ClickIcon class="mr-0 ipadlg:mr-3" />
+                <h4 class="hidden ipadlg:flex">Actions</h4>
             </div>
-            <div class="absolute right-5 top-3.5 hidden items-center lg:flex" @click="ui.toggleSort('taskId')">
-                <h4 class="text-center text-xs">ID</h4>
+            <div class="absolute right-5 hidden md:flex items-center top-3,5" @click="ui.toggleSort('taskId')">
+                <h4 class="">ID</h4>
                 <DownIcon v-if="ui.sortData.sortBy === 'taskId' && !ui.sortData.reversed" class="ml-1" />
                 <UpIcon v-if="ui.sortData.sortBy === 'taskId' && ui.sortData.reversed" class="ml-1" />
             </div>
         </Header>
         <div
-            class="hidden-scrollbars stop-pan flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden"
-            :style="{ maxHeight: dynamicTableHeight }">
-            <div v-for="(task, i) in getTasksInOrder()" :key="task.taskId" class="task-row-container">
-                <Task :task="task" :class="i % 2 == 1 ? 'table-row-even' : 'table-row-odd'" />
+            class="flex flex-col divide-y-2 divide-border overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan max-h-big tasks-table-height"
+        >
+            <div v-for="(task, i) in getTasksInOrder()" :key="i">
+                <Task :task="task" :class="[i % 2 == 1 ? 'bg-dark-500' : 'bg-dark-550']" />
             </div>
             <div
                 v-if="getTasksInOrder().length === 0"
-                class="empty-state flex flex-col items-center justify-center py-8 text-center">
-                <div
-                    v-if="
-                        !ui.queueStats.queued && !ui.queueStats.sleeping && ui.queueStats.nextQueuePasses.length === 0
-                    ">
-                    <TasksIcon class="mx-auto mb-3 h-12 w-12 text-dark-400 opacity-50" />
-                    <p class="text-sm text-light-400">No tasks yet</p>
-                    <p class="mt-1 text-xs text-light-500">Create tasks to get started</p>
-                </div>
-                <div v-else>
-                    <TasksIcon class="mx-auto mb-3 h-12 w-12 text-dark-400 opacity-50" />
-                    <p class="text-sm text-light-400">No tasks match current filters</p>
-                    <p class="mt-1 text-xs text-light-500">Adjust filters to see tasks</p>
-                </div>
+                class="flex justify-center text-light-400 py-2 bg-dark-500 border-b-2 border-border"
+            >
+                <span v-if="ui.queueStats.total === 0"> No tasks yet.</span>
+                <span v-else>{{ ui.queueStats.total }} hidden task{{ ui.queueStats.total === 1 ? "" : "s" }}</span>
             </div>
         </div>
-    </div>
+    </Table>
 </template>
 <style lang="scss" scoped>
 h4 {
@@ -69,35 +63,25 @@ h4 {
     touch-action: pan-y pan-up pan-down;
 }
 
-.task-row-container {
-    min-height: 69px;
-    flex-shrink: 0;
-    transition: background-color 0.15s ease;
-
-    &:hover {
-        @apply bg-dark-550 !important;
-    }
-
-    @media (max-width: 768px) {
-        min-height: 58px;
-    }
+.tasks-table-height {
+    max-height: 33rem !important;
+}
 
-    @media (max-width: 480px) and (orientation: portrait) {
-        min-height: 50px;
+@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
+    .tasks-table-height {
+        max-height: 45vh !important;
     }
 }
 
-.empty-state {
-    @apply bg-dark-400;
-    color: #969696;
-    font-size: 14px;
-    font-weight: 500;
+@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
+    .tasks-table-height {
+        max-height: 58vh !important;
+    }
 }
 </style>
 <script setup>
-import { computed, ref, onMounted, onUnmounted } from "vue";
 import { Table, Header } from "@/components/Table";
-import { EventIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon, UpIcon, TasksIcon } from "@/components/icons";
+import { EventIcon, CartIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon, UpIcon } from "@/components/icons";
 import Task from "./Task.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
@@ -108,7 +92,7 @@ const props = defineProps({
 
 const shouldTaskShow = (task) => {
     if (ui.taskFilter === "All") return true;
-    else if (ui.taskFilter === "Checkout") return task.expirationTime;
+    else if (ui.taskFilter === "Checkout") return task.expirationTime || task.noCartholds;
     else return true;
 };
 
@@ -139,48 +123,4 @@ const getTasksInOrder = () => {
     });
     return out;
 };
-
-// Dynamic height calculation to prevent page scrolling
-const windowHeight = ref(window.innerHeight);
-const windowWidth = ref(window.innerWidth);
-
-const updateDimensions = () => {
-    windowHeight.value = window.innerHeight;
-    windowWidth.value = window.innerWidth;
-};
-
-onMounted(() => {
-    window.addEventListener("resize", updateDimensions);
-});
-
-onUnmounted(() => {
-    window.removeEventListener("resize", updateDimensions);
-});
-
-const dynamicTableHeight = computed(() => {
-    // Calculate available space for table
-    const headerHeight = 60; // Header + navbar
-    const titleHeight = 50; // Tasks title and mobile controls
-    const statsHeight = 50; // Queue stats
-    const controlsHeight = windowWidth.value >= 650 ? 60 : 0; // Desktop controls
-    const filtersHeight = 50; // Event dropdown and filter toggle
-    const utilitiesHeight = windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 150 : 200; // Reduce utilities height in mobile portrait
-    const margins =
-        windowWidth.value >= 1024 ? 40 : windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 15 : 20; // Reduce margins in mobile portrait
-
-    const totalUsedSpace =
-        headerHeight + titleHeight + statsHeight + controlsHeight + filtersHeight + utilitiesHeight + margins;
-    const availableHeight = windowHeight.value - totalUsedSpace;
-
-    // Calculate row height based on screen size
-    const rowHeight = windowWidth.value <= 768 ? 58 : 69; // Mobile vs desktop row height
-    const minRowsToShow = 2; // Always show at least 2 rows
-    const minHeight = minRowsToShow * rowHeight;
-
-    // Calculate how many complete rows can fit
-    const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight) + 1;
-    const exactHeight = maxCompleteRows * rowHeight;
-
-    return exactHeight + "px";
-});
 </script>

package/src/components/Tasks/Utilities.vue

@@ -1,14 +1,16 @@
 <template>
-    <div class="grid grid-cols-1 gap-3 lg:grid-cols-1" v-if="ui.currentModule == 'TM'">
+    <div class="grid grid-cols-1 gap-3 lg:grid-cols-1" v-once>
         <div class="lg:justify-self-end">
             <h4 class="hidden lg:block text-white opacity-40 uppercase font-medium">Utils</h4>
-            <div class="flex gap-3 justify-between lg:justify-start">
+            <div class="flex gap-3">
                 <button class="button-default active:opacity-50 w-44" @click="ui.toggleModal('scrape-venue')">
-                    <ScrapeIcon />Scrape Venue
+                    <ScrapeIcon />
+                    Scrape Venue
                 </button>
                 <button class="button-default w-44" @click="ui.toggleModal('check-stock')">
                     <BoxIcon />Check Stock
                 </button>
+                <!-- Mobile Label -->
             </div>
             <h4 class="text-white opacity-40 uppercase font-medium block lg:hidden">Utils</h4>
         </div>
@@ -22,10 +24,9 @@ const ui = useUIStore();
 </script>
 <style lang="scss" scoped>
 button {
-    @apply bg-dark-400 text-xs flex items-center justify-center gap-x-2 border border-dark-650 hover:border-dark-700;
     height: 50px;
+    @apply bg-dark-400 text-xs flex items-center justify-center gap-x-2 hover:opacity-70;
 }
-
 h4 {
     font-size: 12px;
 }

package/src/components/icons/Bag.vue

@@ -2,7 +2,7 @@
     <svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
             d="M1.95833 17.4167C1.52292 17.4167 1.15004 17.2618 0.839708 16.952C0.529903 16.6416 0.375 16.2688 0.375 15.8334V6.33335C0.375 5.89794 0.529903 5.52533 0.839708 5.21552C1.15004 4.90519 1.52292 4.75002 1.95833 4.75002H3.54167C3.54167 3.65488 3.92774 2.72124 4.69988 1.9491C5.47149 1.17749 6.40486 0.791687 7.5 0.791687C8.59514 0.791687 9.52878 1.17749 10.3009 1.9491C11.0725 2.72124 11.4583 3.65488 11.4583 4.75002H13.0417C13.4771 4.75002 13.85 4.90519 14.1603 5.21552C14.4701 5.52533 14.625 5.89794 14.625 6.33335V15.8334C14.625 16.2688 14.4701 16.6416 14.1603 16.952C13.85 17.2618 13.4771 17.4167 13.0417 17.4167H1.95833ZM1.95833 15.8334H13.0417V6.33335H1.95833V15.8334ZM7.5 11.0834C8.59514 11.0834 9.52878 10.6973 10.3009 9.92515C11.0725 9.15353 11.4583 8.22016 11.4583 7.12502H9.875C9.875 7.78474 9.6441 8.34551 9.18229 8.80731C8.72049 9.26912 8.15972 9.50002 7.5 9.50002C6.84028 9.50002 6.27951 9.26912 5.81771 8.80731C5.3559 8.34551 5.125 7.78474 5.125 7.12502H3.54167C3.54167 8.22016 3.92774 9.15353 4.69988 9.92515C5.47149 10.6973 6.40486 11.0834 7.5 11.0834ZM5.125 4.75002H9.875C9.875 4.0903 9.6441 3.52953 9.18229 3.06773C8.72049 2.60592 8.15972 2.37502 7.5 2.37502C6.84028 2.37502 6.27951 2.60592 5.81771 3.06773C5.3559 3.52953 5.125 4.0903 5.125 4.75002Z"
-            fill="currentColor"
+            fill="#6E7084"
         />
     </svg>
 </template>

package/src/components/icons/Loyalty.vue

@@ -2,7 +2,7 @@
     <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
             d="M9.29168 12.854L12.0625 10.0831C12.2076 9.93799 12.3232 9.76646 12.4093 9.56855C12.4948 9.37063 12.5375 9.15952 12.5375 8.93521C12.5375 8.4866 12.3792 8.10396 12.0625 7.7873C11.7458 7.47063 11.3632 7.3123 10.9146 7.3123C10.6639 7.3123 10.4166 7.38487 10.1728 7.53C9.92844 7.67514 9.63473 7.91924 9.29168 8.2623C8.89584 7.89285 8.58577 7.64216 8.36147 7.51021C8.13716 7.37827 7.90626 7.3123 7.66876 7.3123C7.22015 7.3123 6.83751 7.47063 6.52084 7.7873C6.20418 8.10396 6.04584 8.4866 6.04584 8.93521C6.04584 9.15952 6.08859 9.37063 6.17409 9.56855C6.26012 9.76646 6.3757 9.93799 6.52084 10.0831L9.29168 12.854ZM10.2813 15.9415C9.97779 16.2449 9.60175 16.3967 9.15314 16.3967C8.70452 16.3967 8.32848 16.2449 8.02501 15.9415L1.05834 8.9748C0.913205 8.82966 0.797885 8.65813 0.712385 8.46021C0.626357 8.2623 0.583344 8.05119 0.583344 7.82688V2.16646C0.583344 1.73105 0.73851 1.35817 1.04884 1.04784C1.35865 0.738033 1.73126 0.58313 2.16668 0.58313H7.82709C8.0514 0.58313 8.26251 0.62588 8.46043 0.71138C8.65834 0.797408 8.82987 0.912991 8.97501 1.05813L15.9417 8.04459C16.2451 8.34806 16.3969 8.72067 16.3969 9.16242C16.3969 9.6047 16.2451 9.97757 15.9417 10.281L10.2813 15.9415ZM9.15314 14.8331L14.8136 9.17271L7.82709 2.16646H2.16668V7.82688L9.15314 14.8331ZM4.14584 5.33313C4.4757 5.33313 4.75595 5.21755 4.98659 4.98638C5.21776 4.75574 5.33334 4.47549 5.33334 4.14563C5.33334 3.81577 5.21776 3.53552 4.98659 3.30488C4.75595 3.07371 4.4757 2.95813 4.14584 2.95813C3.81598 2.95813 3.53573 3.07371 3.30509 3.30488C3.07393 3.53552 2.95834 3.81577 2.95834 4.14563C2.95834 4.47549 3.07393 4.75574 3.30509 4.98638C3.53573 5.21755 3.81598 5.33313 4.14584 5.33313Z"
-            fill="currentColor"
+            fill="#6E7084"
         />
     </svg>
 </template>

package/src/components/icons/Mail.vue

@@ -1,7 +1,7 @@
 <template>
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="19" height="19" viewBox="0 0 19 11" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-            d="M3.54165 15.2083C3.19217 15.2083 2.893098 15.084 2.644438 14.8353C2.395355 14.5863 2.270813 14.287 2.270813 13.9375V6.3125C2.270813 5.96302 2.395355 5.66395 2.644438 5.41529C2.893098 5.16621 3.19217 5.04166 3.54165 5.04166H16.7083C17.0578 5.04166 17.3571 5.16621 17.6062 5.41529C17.8548 5.66395 17.9791 5.96302 17.9791 6.3125V13.9375C17.9791 14.287 17.8548 14.5863 17.6062 14.8353C17.3571 15.084 17.0578 15.2083 16.7083 15.2083H3.54165ZM10.125 10.7604L3.54165 7.58333V13.9375H16.7083V7.58333L10.125 10.7604ZM10.125 9.48958L16.7083 6.3125H3.54165L10.125 9.48958ZM3.54165 7.58333V6.3125V13.9375V7.58333Z"
+            d="M1.54165 10.7083C1.19217 10.7083 0.893098 10.584 0.644438 10.3353C0.395355 10.0863 0.270813 9.78698 0.270813 9.4375V1.8125C0.270813 1.46302 0.395355 1.16395 0.644438 0.915289C0.893098 0.666206 1.19217 0.541664 1.54165 0.541664H11.7083C12.0578 0.541664 12.3571 0.666206 12.6062 0.915289C12.8548 1.16395 12.9791 1.46302 12.9791 1.8125V9.4375C12.9791 9.78698 12.8548 10.0863 12.6062 10.3353C12.3571 10.584 12.0578 10.7083 11.7083 10.7083H1.54165ZM6.62498 6.26041L1.54165 3.08333V9.4375H11.7083V3.08333L6.62498 6.26041ZM6.62498 4.98958L11.7083 1.8125H1.54165L6.62498 4.98958ZM1.54165 3.08333V1.8125V9.4375V3.08333Z"
             fill="white"
         />
     </svg>

package/src/components/icons/Play.vue

@@ -1,7 +1,7 @@
 <template>
-    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-            d="M1.5 11.2311V0.73114L9.75 5.98114L1.5 11.2311ZM3 8.49364L6.9375 5.98114L3 3.46864V8.49364Z"
+            d="M0 11.2311V0.73114L8.25 5.98114L0 11.2311ZM1.5 8.49364L5.4375 5.98114L1.5 3.46864V8.49364Z"
             fill="white"
         />
     </svg>

package/src/components/icons/Reload.vue

@@ -1,7 +1,8 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M23 4v6h-6" />
-        <path d="M1 20v-6h6" />
-        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="15" fill="white">
+        <path
+            fill="white"
+            d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V448c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352H176c17.7 0 32-14.3 32-32s-14.3-32-32-32H48.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"
+        />
     </svg>
 </template>

package/src/components/icons/Sandclock.vue

@@ -13,14 +13,14 @@
             <g>
                 <g>
                     <path
-                        fill="white"
+                        style="fill: #6e7084"
                         d="M16.192,5.224V4.487h-8.77v0.737c0,0,1.334,3.713,3.838,5.428v1.785c0,0-2.761,2.686-3.838,5.775
 				v0.842h8.77v-0.842c-1.399-3.41-3.837-5.775-3.837-5.775v-1.785C15.759,7.726,16.192,5.224,16.192,5.224z"
                     />
                 </g>
                 <g>
                     <path
-                        fill="white"
+                        style="fill: #6e7084"
                         d="M19.353,3.856V2.529h1.258V0H3.002v2.529h1.259v1.327c0,2.025,3.634,7.555,3.804,7.955
 				c-0.167,0.397-3.804,5.929-3.804,7.946v1.325H3.002v2.53h17.609v-2.53h-1.258v-1.325c0-2.025-3.635-7.521-3.829-7.951
 				C15.718,11.376,19.353,5.88,19.353,3.856z M18.096,19.757v1.325H5.519v-1.325c0-1.455,3.854-7.222,3.854-7.951

package/src/components/icons/Stadium.vue

@@ -6,7 +6,7 @@
         <g mask="url(#mask0_16_241)">
             <path
                 d="M2.37499 5.54165V2.37498L5.54166 3.95831L2.37499 5.54165ZM14.25 5.54165V2.37498L17.4167 3.95831L14.25 5.54165ZM8.70833 4.74998V1.58331L11.875 3.16665L8.70833 4.74998ZM8.70833 17.4166C7.70555 17.3903 6.77218 17.3079 5.9082 17.1696C5.0437 17.0308 4.29162 16.8559 3.65195 16.6448C3.01176 16.4337 2.50694 16.1896 2.13749 15.9125C1.76805 15.6354 1.58333 15.3451 1.58333 15.0416V7.91665C1.58333 7.58678 1.79127 7.27988 2.20716 6.99594C2.62252 6.71252 3.18645 6.46183 3.89895 6.24385C4.61145 6.02641 5.4493 5.85488 6.4125 5.72927C7.37569 5.60419 8.40486 5.54165 9.49999 5.54165C10.5951 5.54165 11.6243 5.60419 12.5875 5.72927C13.5507 5.85488 14.3885 6.02641 15.101 6.24385C15.8135 6.46183 16.3775 6.71252 16.7928 6.99594C17.2087 7.27988 17.4167 7.58678 17.4167 7.91665V15.0416C17.4167 15.3451 17.2319 15.6354 16.8625 15.9125C16.493 16.1896 15.9885 16.4337 15.3488 16.6448C14.7086 16.8559 13.9565 17.0308 13.0926 17.1696C12.2281 17.3079 11.2944 17.3903 10.2917 17.4166V14.25H8.70833V17.4166ZM9.49999 8.70831C10.7799 8.70831 11.885 8.63231 12.8155 8.48031C13.7454 8.32884 14.4875 8.15415 15.0417 7.95623C15.0417 7.89026 14.5403 7.73509 13.5375 7.49073C12.5347 7.2469 11.1889 7.12498 9.49999 7.12498C7.81111 7.12498 6.46527 7.2469 5.46249 7.49073C4.45972 7.73509 3.95833 7.89026 3.95833 7.95623C4.51249 8.15415 5.25481 8.32884 6.18529 8.48031C7.11523 8.63231 8.22013 8.70831 9.49999 8.70831ZM7.12499 15.7146V12.6666H11.875V15.7146C12.9305 15.609 13.7948 15.4538 14.4677 15.2491C15.1406 15.0448 15.5958 14.8635 15.8333 14.7052V9.34165C15.1076 9.63192 14.1972 9.86283 13.1021 10.0344C12.0069 10.2059 10.8062 10.2916 9.49999 10.2916C8.19374 10.2916 6.99305 10.2059 5.89791 10.0344C4.80277 9.86283 3.89236 9.63192 3.16666 9.34165V14.7052C3.40416 14.8635 3.85937 15.0448 4.53229 15.2491C5.2052 15.4538 6.06944 15.609 7.12499 15.7146Z"
-                fill="white"
+                fill="#6E7084"
             />
         </g>
     </svg>

package/src/components/icons/index.js

@@ -43,18 +43,6 @@ import ReloadIcon from "./Reload.vue";
 import FilterIcon from "./Filter.vue";
 import SandclockIcon from "./Sandclock.vue";
 import GearIcon from "./Gear.vue";
-import CloseIcon from "./Close.vue";
-import KeyIcon from "./Key.vue";
-import PencilIcon from "./Pencil.vue";
-import SellIcon from "./Sell.vue";
-import SquareCheckIcon from "./SquareCheck.vue";
-import SquareUncheckIcon from "./SquareUncheck.vue";
-import WildcardIcon from "./Wildcard.vue";
-import ProfileIcon from "./Profile.vue";
-import CloseXIcon from "./CloseX.vue";
-import CheckIcon from "./Check.vue";
-import SpinnerIcon from "./Spinner.vue";
-
 export {
     EditIcon,
     ConsoleIcon,
@@ -96,16 +84,5 @@ export {
     ReloadIcon,
     FilterIcon,
     SandclockIcon,
-    GearIcon,
-    CloseIcon,
-    KeyIcon,
-    PencilIcon,
-    SellIcon,
-    SquareCheckIcon,
-    SquareUncheckIcon,
-    WildcardIcon,
-    ProfileIcon,
-    CloseXIcon,
-    CheckIcon,
-    SpinnerIcon
+    GearIcon
 };

package/src/components/ui/Modal.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="modal-mask pt-14 md:py-1 overflow-y-scroll scrollable" @touchmove.prevent>
-        <div class="component-modal" ref="target" @touchmove.stop>
+    <div class="modal-mask pt-14 ipadlg:py-1 overflow-y-scroll scrollable">
+        <div class="component-modal" ref="target">
             <div class="modal-header">
                 <slot name="header" />
-                <button @click="ui.toggleModal()" class="btn-icon border-none hover:bg-dark-400">
-                    <CloseIcon />
+                <button @click="ui.toggleModal()">
+                    <img src="@/assets/img/close.svg" />
                 </button>
             </div>
             <div class="modal-body">
@@ -16,132 +16,40 @@
 <script setup>
 import { useUIStore } from "@/stores/ui";
 import { onClickOutside } from "@vueuse/core";
-import { ref, onMounted, onUnmounted } from "vue";
-import { CloseIcon } from "@/components/icons";
-
+import { ref } from "vue";
 const ui = useUIStore();
 const target = ref(null);
 
-// Store original body styles
-let originalOverflow = "";
-let originalPosition = "";
-let originalTop = "";
-let scrollY = 0;
-
-onMounted(() => {
-    // Lock body scroll
-    scrollY = window.scrollY;
-    originalOverflow = document.body.style.overflow;
-    originalPosition = document.body.style.position;
-    originalTop = document.body.style.top;
-
-    document.body.style.overflow = "hidden";
-    document.body.style.position = "fixed";
-    document.body.style.top = `-${scrollY}px`;
-    document.body.style.width = "100%";
-});
-
-onUnmounted(() => {
-    // Restore body scroll
-    document.body.style.overflow = originalOverflow;
-    document.body.style.position = originalPosition;
-    document.body.style.top = originalTop;
-    document.body.style.width = "";
-    window.scrollTo(0, scrollY);
-});
-
 onClickOutside(target, (event) => {
     if (event.target.classList.contains("modal-mask")) ui.toggleModal();
 });
 </script>
 <style lang="scss" scoped>
 .modal-mask {
-    @apply fixed top-0 left-0 w-screen h-screen flex duration-300 ease-in-out;
-    z-index: 25000;
-    background-color: rgba(17, 17, 17, 0.85);
-    backdrop-filter: blur(4px);
-    align-items: center;
-    justify-content: center;
-    padding: 1rem;
+    @apply fixed top-0 left-0 w-full h-full flex duration-300 ease-in-out;
+    z-index: 9998;
+    background-color: #111111d6;
 }
-
 .component-modal {
+    margin: auto;
     width: 640px;
-    max-height: calc(100vh - 8rem); // Ensure bottom margin on desktop
-    margin-bottom: 3rem;
-    overflow-y: auto; // Make scrollable when content is too tall
-    @apply bg-dark-300 px-5 py-5 rounded-lg flex flex-col;
+    // background: url('@/assets/img/background.svg') center center no-repeat;
 
+    @apply bg-dark-300 px-5 py-5 rounded-lg  m-auto flex flex-col;
     .modal-header {
         @apply flex text-white font-bold;
-
         button {
             @apply ml-auto;
         }
     }
-
     .modal-body {
         @apply flex flex-col;
-        flex: 1;
     }
 }
-
 @media (max-width: 810px) {
-    .modal-mask {
-        align-items: flex-start; // Start from top on mobile
-        justify-content: center;
-        padding: 1rem;
-        padding-top: 3rem;
-        padding-bottom: 2rem; // Ensure bottom space
-    }
-
-    .component-modal {
-        width: calc(100vw - 2rem);
-        margin-bottom: 6rem; // Increased bottom margin for better button access
-    }
-
-    .modal-body {
-        padding-bottom: 4rem; // Increased padding for create button accessibility
-        overflow-y: auto; // Allow scrolling on mobile
-        flex: 1;
-        min-height: 0;
-    }
-}
-
-/* iPhone portrait mode - extra spacing for create button */
-@media (max-width: 480px) and (orientation: portrait) {
-    .modal-mask {
-        padding-bottom: 3rem !important; // Extra bottom padding for iPhone
-    }
-
     .component-modal {
-        margin-bottom: 3rem !important; // Even more bottom margin for iPhone portrait
-        max-height: calc(100vh - 12rem) !important; // Ensure modal doesn't get too tall
-    }
-
-    .modal-body {
-        padding-bottom: 1rem !important; // Extra padding for create button on iPhone
+        width: 100vh !important;
+        height: 100% !important;
     }
 }
-
-// iPhone landscape mode - proper modal centering with consistent spacing
-// @media (max-height: 500px) and (orientation: landscape) {
-//     .modal-mask {
-//         padding: 1rem 1rem 4rem 1rem !important;
-//         align-items: center !important;
-//         justify-content: center !important;
-//         padding-bottom: 3rem !important; // Extra padding for create button on iPhone
-//     }
-
-//     .component-modal {
-//         max-height: calc(100vh - 10rem) !important;
-//         overflow-y: auto !important;
-//         margin: 0 !important;
-//         margin-bottom: 30px;
-//     }
-
-//     .modal-body {
-//         padding-bottom: 1rem !important;
-//     }
-// }
 </style>