@necrolab/dashboard 0.4.220 → 0.5.1

package/src/components/icons/Eye.vue

@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+        <circle cx="12" cy="12" r="3"></circle>
+    </svg>
+</template>

package/src/components/icons/Key.vue

@@ -0,0 +1,21 @@
+<template>
+    <svg
+        width="16"
+        height="9"
+        viewBox="0 0 16 9"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        class="key-icon"
+    >
+        <path
+            d="M4.44791 5.89583C4.09843 5.89583 3.79936 5.77129 3.5507 5.52221C3.30161 5.27355 3.17707 4.97448 3.17707 4.625C3.17707 4.27552 3.30161 3.97624 3.5507 3.72716C3.79936 3.4785 4.09843 3.35417 4.44791 3.35417C4.79739 3.35417 5.09645 3.4785 5.34511 3.72716C5.5942 3.97624 5.71874 4.27552 5.71874 4.625C5.71874 4.97448 5.5942 5.27355 5.34511 5.52221C5.09645 5.77129 4.79739 5.89583 4.44791 5.89583ZM4.44791 8.4375C3.38888 8.4375 2.4887 8.06684 1.74739 7.32552C1.00607 6.5842 0.635406 5.68403 0.635406 4.625C0.635406 3.56597 1.00607 2.6658 1.74739 1.92448C2.4887 1.18316 3.38888 0.8125 4.44791 0.8125C5.15745 0.8125 5.80092 0.987239 6.3783 1.33672C6.95526 1.6862 7.41318 2.14688 7.75207 2.71875H13.3437L15.25 4.625L12.3906 7.48438L11.1198 6.53125L9.84895 7.48438L8.49869 6.53125H7.75207C7.41318 7.10313 6.95526 7.5638 6.3783 7.91328C5.80092 8.26276 5.15745 8.4375 4.44791 8.4375ZM4.44791 7.16667C5.04096 7.16667 5.56264 6.98663 6.01294 6.62656C6.46281 6.26649 6.76188 5.81111 6.91015 5.26042H8.89582L9.81718 5.91172L11.1198 4.94271L12.2476 5.81641L13.4391 4.625L12.8036 3.98958H6.91015C6.76188 3.43889 6.46281 2.98351 6.01294 2.62344C5.56264 2.26337 5.04096 2.08333 4.44791 2.08333C3.74895 2.08333 3.1506 2.33221 2.65285 2.82995C2.15511 3.32769 1.90624 3.92604 1.90624 4.625C1.90624 5.32396 2.15511 5.92231 2.65285 6.42005C3.1506 6.9178 3.74895 7.16667 4.44791 7.16667Z"
+            fill="currentColor"
+        />
+    </svg>
+</template>
+
+<style scoped>
+.key-icon {
+    @apply w-4 h-4;
+}
+</style>

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="#6E7084"
+            fill="currentColor"
         />
     </svg>
 </template>

package/src/components/icons/Mail.vue

@@ -1,7 +1,7 @@
 <template>
-    <svg width="19" height="19" viewBox="0 0 19 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-            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"
+            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"
             fill="white"
         />
     </svg>

package/src/components/icons/Pencil.vue

@@ -0,0 +1,21 @@
+<template>
+    <svg
+        width="19"
+        height="20"
+        viewBox="0 0 19 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        class="pencil-icon"
+    >
+        <path
+            d="M0.75 20V16.5H18.25V20H0.75ZM2.5 14.75V11.4688L10.4187 3.55004L13.7 6.83129L5.78125 14.75H2.5ZM4.25 13H5.0375L11.25 6.83129L10.4187 6.00004L4.25 12.2125V13ZM14.6844 5.86879L11.4031 2.58754L12.9781 1.01254C13.1385 0.837536 13.3427 0.753536 13.5906 0.760536C13.8385 0.768119 14.0427 0.852119 14.2031 1.01254L16.2594 3.06879C16.4198 3.2292 16.5 3.42987 16.5 3.67079C16.5 3.91112 16.4198 4.11879 16.2594 4.29379L14.6844 5.86879Z"
+            fill="currentColor"
+        />
+    </svg>
+</template>
+
+<style scoped>
+.pencil-icon {
+    @apply w-4 h-4;
+}
+</style>

package/src/components/icons/Play.vue

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

package/src/components/icons/Profile.vue

@@ -0,0 +1,18 @@
+<template>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1024 1024"
+        class="profile-icon"
+    >
+        <path
+            fill="currentColor"
+            d="M0 1024v-72.874521c0-149.917478 93.497315-353.841814 241.330575-402.948929l9.031614-2.998349 4.497524 8.117483a316.618401 316.618401 0 0 0 33.201237 48.485506l10.567354 12.688138-16.088705 4.387828c-118.178851 32.579628-201.986378 215.917734-206.88612 332.341454h872.519723c-4.899742-116.387154-99.457449-299.834957-217.6363-332.341454l-16.088705-4.387828 10.457658-12.578442a316.874358 316.874358 0 0 0 33.201237-48.485507l4.497524-8.117483 8.921918 2.888654c147.979521 49.107115 252.300146 252.994886 252.300147 402.948929V1024H0z m511.91334-365.652386a246.888491 246.888491 0 0 1-255.95667-255.95667V256.129989a246.888491 246.888491 0 0 1 255.95667-255.95667 246.888491 246.888491 0 0 1 255.956671 255.95667v146.260955a246.888491 246.888491 0 0 1-255.956671 255.95667z m182.826193-402.217625A182.826193 182.826193 0 1 0 329.087147 256.129989v146.260955a182.826193 182.826193 0 1 0 365.652386 0V256.129989z"
+        />
+    </svg>
+</template>
+
+<style scoped>
+.profile-icon {
+    @apply w-4 h-4;
+}
+</style>

package/src/components/icons/Reload.vue

@@ -1,8 +1,7 @@
 <template>
-    <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 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>
 </template>

package/src/components/icons/Sandclock.vue

@@ -13,14 +13,14 @@
             <g>
                 <g>
                     <path
-                        style="fill: #6e7084"
+                        fill="white"
                         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
-                        style="fill: #6e7084"
+                        fill="white"
                         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/Sell.vue

@@ -0,0 +1,21 @@
+<template>
+    <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        class="sell-icon"
+    >
+        <path
+            d="M9.68747 15.05C9.39997 15.3375 9.04372 15.4812 8.61872 15.4812C8.19372 15.4812 7.83747 15.3375 7.54997 15.05L0.949969 8.44995C0.812469 8.31245 0.70322 8.14995 0.62222 7.96245C0.54072 7.77495 0.499969 7.57495 0.499969 7.36245V1.99995C0.499969 1.58745 0.64697 1.2342 0.94097 0.940204C1.23447 0.646704 1.58747 0.499954 1.99997 0.499954H7.36247C7.57497 0.499954 7.77497 0.540454 7.96247 0.621454C8.14997 0.702954 8.31247 0.812454 8.44997 0.949954L15.05 7.5687C15.3375 7.8562 15.4812 8.2092 15.4812 8.6277C15.4812 9.0467 15.3375 9.39995 15.05 9.68745L9.68747 15.05ZM8.61872 14L13.9812 8.63745L7.36247 1.99995H1.99997V7.36245L8.61872 14ZM3.87497 4.99995C4.18747 4.99995 4.45297 4.89045 4.67147 4.67145C4.89047 4.45295 4.99997 4.18745 4.99997 3.87495C4.99997 3.56245 4.89047 3.29695 4.67147 3.07845C4.45297 2.85945 4.18747 2.74995 3.87497 2.74995C3.56247 2.74995 3.29697 2.85945 3.07847 3.07845C2.85947 3.29695 2.74997 3.56245 2.74997 3.87495C2.74997 4.18745 2.85947 4.45295 3.07847 4.67145C3.29697 4.89045 3.56247 4.99995 3.87497 4.99995Z"
+            fill="currentColor"
+        />
+    </svg>
+</template>
+
+<style scoped>
+.sell-icon {
+    @apply w-4 h-4;
+}
+</style>

package/src/components/icons/Spinner.vue

@@ -0,0 +1,42 @@
+<template>
+    <svg class="spinner" viewBox="0 0 50 50">
+        <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
+    </svg>
+</template>
+
+<style lang="scss" scoped>
+.spinner {
+    @apply mx-auto;
+    animation: rotate 2s linear infinite;
+    z-index: 2;
+    width: 30px;
+    height: 30px;
+    
+    & .path {
+        stroke: rgba(70, 198, 210, 100%);
+        stroke-linecap: round;
+        animation: dash 1.5s ease-in-out infinite;
+    }
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+    }
+    100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+    }
+}
+</style>

package/src/components/icons/SquareCheck.vue

@@ -0,0 +1,18 @@
+<template>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 448 512"
+        class="square-check-icon"
+    >
+        <path
+            fill="currentColor"
+            d="M64 80c-8.8 0-16 7.2-16 16V416c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V96c0-8.8-7.2-16-16-16H64zM0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
+        />
+    </svg>
+</template>
+
+<style scoped>
+.square-check-icon {
+    @apply w-4 h-4;
+}
+</style>

package/src/components/icons/SquareUncheck.vue

@@ -0,0 +1,18 @@
+<template>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 448 512"
+        class="square-uncheck-icon"
+    >
+        <path
+            fill="currentColor"
+            d="M64 80c-8.8 0-16 7.2-16 16V416c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V96c0-8.8-7.2-16-16-16H64zM0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM152 232H296c13.3 0 24 10.7 24 24s-10.7 24-24 24H152c-13.3 0-24-10.7-24-24s10.7-24 24-24z"
+        />
+    </svg>
+</template>
+
+<style scoped>
+.square-uncheck-icon {
+    @apply w-4 h-4;
+}
+</style>

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="#6E7084"
+                fill="white"
             />
         </g>
     </svg>

package/src/components/icons/Wildcard.vue

@@ -0,0 +1,18 @@
+<template>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+        class="wildcard-icon"
+    >
+        <path
+            fill="currentColor"
+            d="M208 32c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32V172.9l122-70.4c15.3-8.8 34.9-3.6 43.7 11.7l16 27.7c8.8 15.3 3.6 34.9-11.7 43.7L352 256l122 70.4c15.3 8.8 20.5 28.4 11.7 43.7l-16 27.7c-8.8 15.3-28.4 20.6-43.7 11.7L304 339.1V480c0 17.7-14.3 32-32 32H240c-17.7 0-32-14.3-32-32V339.1L86 409.6c-15.3 8.8-34.9 3.6-43.7-11.7l-16-27.7c-8.8-15.3-3.6-34.9 11.7-43.7L160 256 38 185.6c-15.3-8.8-20.5-28.4-11.7-43.7l16-27.7C51.1 98.8 70.7 93.6 86 102.4l122 70.4V32z"
+        />
+    </svg>
+</template>
+
+<style scoped>
+.wildcard-icon {
+    @apply w-4 h-4;
+}
+</style>

package/src/components/icons/index.js

@@ -43,6 +43,19 @@ 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";
+import EyeIcon from "./Eye.vue";
+
 export {
     EditIcon,
     ConsoleIcon,
@@ -84,5 +97,17 @@ export {
     ReloadIcon,
     FilterIcon,
     SandclockIcon,
-    GearIcon
+    GearIcon,
+    CloseIcon,
+    KeyIcon,
+    PencilIcon,
+    SellIcon,
+    SquareCheckIcon,
+    SquareUncheckIcon,
+    WildcardIcon,
+    ProfileIcon,
+    CloseXIcon,
+    CheckIcon,
+    SpinnerIcon,
+    EyeIcon
 };

package/src/components/ui/Modal.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="modal-mask pt-14 ipadlg:py-1 overflow-y-scroll scrollable">
+    <div class="modal-mask scrollable overflow-y-auto" role="dialog" @touchmove.stop>
         <div class="component-modal" ref="target">
             <div class="modal-header">
                 <slot name="header" />
-                <button @click="ui.toggleModal()">
-                    <img src="@/assets/img/close.svg" />
+                <button @click="ui.toggleModal()" class="btn-icon border-none hover:bg-dark-400">
+                    <CloseIcon />
                 </button>
             </div>
             <div class="modal-body">
@@ -16,40 +16,134 @@
 <script setup>
 import { useUIStore } from "@/stores/ui";
 import { onClickOutside } from "@vueuse/core";
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
+import { CloseIcon } from "@/components/icons";
+
 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-full h-full flex duration-300 ease-in-out;
-    z-index: 9998;
-    background-color: #111111d6;
+    @apply fixed left-0 top-0 flex h-screen w-screen duration-300 ease-in-out;
+    z-index: 25000;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1rem;
+    padding-top: 3.5rem;
+    background-color: rgba(17, 17, 17, 0.85);
+    backdrop-filter: blur(4px);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 }
+
 .component-modal {
-    margin: auto;
     width: 640px;
-    // background: url('@/assets/img/background.svg') center center no-repeat;
+    margin-bottom: 10rem;
+    overflow-y: visible;
+    @apply flex flex-col rounded-lg bg-dark-300 px-5 py-5;
 
-    @apply bg-dark-300 px-5 py-5 rounded-lg  m-auto flex flex-col;
     .modal-header {
-        @apply flex text-white font-bold;
+        @apply flex font-bold text-white;
+
         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 {
-        width: 100vh !important;
-        height: 100% !important;
+        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
     }
 }
+
+// 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>