@necrolab/dashboard 0.5.15 → 0.5.17

package/src/components/Tasks/TaskView.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="table-component">
+    <div class="table-component relative box-border flex flex-col rounded-lg bg-dark-500 bg-clip-padding overflow-hidden shadow-sm">
         <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
@@ -9,50 +9,50 @@
                     :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>
+                    <h4 class="hidden lg:flex text-white">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="col-span-2 flex items-center justify-center" v-once>
+            <div class="col-span-2 flex items-center justify-center lg:col-span-3 xl:col-span-2" v-once>
                 <TicketIcon class="mr-0 lg:mr-3" />
-                <h4 class="hidden lg:flex">Tickets</h4>
+                <h4 class="hidden lg:flex text-white">Tickets</h4>
             </div>
             <div
-                class="col-span-5 flex items-center justify-center md:col-span-4 lg:col-span-5"
+                class="col-span-6 flex items-center justify-center md:col-span-5 lg:col-span-4 xl:col-span-5"
                 @click="ui.toggleSort('status')">
                 <StatusIcon class="mr-0 lg:mr-3" />
-                <h4 class="hidden lg:flex">Status</h4>
+                <h4 class="hidden lg:flex text-white">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="col-span-2 flex items-center justify-center lg:col-span-3" v-once>
+            <div class="col-span-1 flex items-center justify-end md:col-span-2 md:justify-center lg:col-span-3" v-once>
                 <ClickIcon class="mr-0 lg:mr-3" />
-                <h4 class="hidden lg:flex">Actions</h4>
+                <h4 class="hidden lg:flex text-white">Actions</h4>
             </div>
-            <div class="absolute right-5 top-3.5 hidden items-center lg:flex">
-                <h4 class="text-center text-xs">ID</h4>
+            <div class="absolute right-5 top-3.5 hidden items-center xl:flex">
+                <h4 class="text-center text-xs text-white">ID</h4>
             </div>
         </Header>
         <div
-            class="hidden-scrollbars stop-pan flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden"
+            class="hidden-scrollbars touch-pan-y 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" :preferEventName="props.preferEventName" :class="i % 2 == 1 ? 'table-row-even' : 'table-row-odd'" />
+            <div v-for="(task, i) in getTasksInOrder()" :key="task.taskId" class="shrink-0 min-h-14.5 md:min-h-17.25 has-[.event-details]:min-h-18.75 mobile-portrait:min-h-12.5 transition-colors duration-150 ease-in-out hover:!bg-dark-550">
+                <Task :task="task" :preferEventName="props.preferEventName" :class="getRowClass(i)" />
             </div>
             <div
                 v-if="getTasksInOrder().length === 0"
-                class="empty-state flex flex-col items-center justify-center py-8 text-center">
+                class="empty-state flex flex-col items-center justify-center py-8 text-center bg-dark-400 text-light-500 text-sm font-medium">
                 <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" />
+                    <TasksIcon class="mx-auto empty-state-icon" />
                     <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" />
+                    <TasksIcon class="mx-auto empty-state-icon" />
                     <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>
@@ -60,58 +60,28 @@
         </div>
     </div>
 </template>
-<style lang="scss" scoped>
-h4 {
-    @apply text-white;
-}
-
-.stop-pan {
-    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;
-    }
-
-    // Increase height when showing eventName to accommodate multi-line display (desktop only)
-    @media (min-width: 1024px) {
-        &:has(.event-details) {
-            min-height: 75px;
-        }
-    }
-
-    @media (max-width: 768px) {
-        min-height: 58px;
-    }
-
-    @media (max-width: 480px) and (orientation: portrait) {
-        min-height: 50px;
-    }
-}
-
-.empty-state {
-    @apply bg-dark-400;
-    font-size: 14px;
-    font-weight: 500;
-}
-</style>
 <script setup>
 import { computed, ref, onMounted, onUnmounted } from "vue";
-import { Table, Header } from "@/components/Table";
+import { Header } from "@/components/Table";
 import { EventIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon, UpIcon, TasksIcon } from "@/components/icons";
 import Task from "./Task.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
+import { getRowClass } from "@/utils/tableHelpers";
 
 const props = defineProps({
-    tasks: { type: Object },
-    searchQuery: { type: String, default: "" },
-    preferEventName: { type: Boolean, default: false }
+    tasks: {
+        type: Object,
+        required: true
+    },
+    searchQuery: {
+        type: String,
+        default: ''
+    },
+    preferEventName: {
+        type: Boolean,
+        default: false
+    }
 });
 
 const shouldTaskShow = (task) => {
@@ -189,8 +159,11 @@ onUnmounted(() => {
 });
 
 const dynamicTableHeight = computed(() => {
+    // Detect PWA mode (standalone display)
+    const isPWA = window.matchMedia('(display-mode: standalone)').matches;
+
     // Calculate available space for table
-    const headerHeight = 55; // Header + navbar
+    const headerHeight = windowWidth.value >= 1024 ? 80 : 64; // Navbar padding (lg:pt-20 vs pt-16)
     const titleHeight = 45; // Tasks title and mobile controls
     const controlsHeight = windowWidth.value >= 650 ? 55 : 0; // Desktop controls
     // On desktop: stats + filters all in one row (45px)
@@ -203,9 +176,17 @@ const dynamicTableHeight = computed(() => {
             : ui.queueStats.show
               ? 130
               : 90; // Mobile: stats row + stacked filters
-    const utilitiesHeight = windowWidth.value <= 768 ? 180 : 160; // Increase mobile utilities space to prevent cutoff
-    const margins =
-        windowWidth.value >= 1024 ? 20 : windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 8 : 12;
+
+    // Reserve more space for UTILS on iPhone PWA to prevent overflow
+    const utilitiesHeight = isPWA && windowWidth.value <= 768
+        ? 260  // iPhone PWA: extra space for UTILS
+        : windowWidth.value > 1024
+            ? 200  // Desktop
+            : windowWidth.value <= 768
+                ? 220  // Mobile browser
+                : 180; // Tablet
+
+    const margins = windowWidth.value >= 1024 ? 30 : windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 8 : 12;
 
     const totalUsedSpace =
         headerHeight + titleHeight + controlsHeight + filtersAndStatsHeight + utilitiesHeight + margins;

package/src/components/Tasks/Utilities.vue

@@ -1,58 +1,24 @@
 <template>
-    <div class="utilities-wrapper grid grid-cols-1 gap-3 lg:grid-cols-1" v-if="ui.currentModule == 'TM'">
-        <div class="lg:justify-self-end">
-            <h4 class="hidden lg:block text-white opacity-40 uppercase font-medium mb-1">Utils</h4>
-            <div class="flex gap-3 justify-between lg:justify-start">
-                <button class="button-default w-44 bg-dark-400 flex items-center justify-center gap-x-2 utility-btn" @click="ui.toggleModal('scrape-venue')">
+    <div class="grid grid-cols-1 gap-3 mt-4 mb-6 md:mb-10" v-if="ui.currentModule == 'TM'">
+        <div>
+            <h4 class="hidden lg:block text-white opacity-40 uppercase font-medium mb-1 text-xs">Utils</h4>
+            <div class="flex gap-3 flex-wrap justify-between lg:justify-start">
+                <button class="btn-modal w-40 sm:w-44" @click="ui.toggleModal('scrape-venue')">
                     Scrape Venue
-                    <ScrapeIcon />
+                    <ScrapeIcon class="w-3.5 h-3.5 flex-shrink-0 ml-2" />
                 </button>
-                <button class="button-default w-44 bg-dark-400 flex items-center justify-center gap-x-2 utility-btn" @click="ui.toggleModal('check-stock')">
+                <button class="btn-modal w-40 sm:w-44" @click="ui.toggleModal('check-stock')">
                     Check Stock
-                    <BoxIcon />
+                    <BoxIcon class="w-3.5 h-3.5 flex-shrink-0 ml-2" />
                 </button>
             </div>
-            <h4 class="text-white opacity-40 uppercase font-medium block lg:hidden">Utils</h4>
+            <h4 class="text-white opacity-40 uppercase font-medium block lg:hidden text-xs text-center mt-2 px-4">Utils</h4>
         </div>
     </div>
 </template>
 <script setup>
-import { BoxIcon, ScrapeIcon, CameraIcon, GroupIcon } from "@/components/icons";
+import { BoxIcon, ScrapeIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 
 const ui = useUIStore();
 </script>
-<style lang="scss" scoped>
-.utilities-wrapper {
-    margin-bottom: 2rem;
-
-    // Add extra margin on mobile to prevent buttons from being cut off
-    @media (max-width: 768px) {
-        margin-top: 1rem;
-        margin-bottom: 2.5rem;
-    }
-}
-
-.utility-btn {
-    height: 42px;
-
-    @media (max-width: 768px) {
-        height: 40px;
-        font-size: 0.75rem;
-    }
-}
-
-button {
-    font-size: 0.75rem;
-
-    svg {
-        width: 14px;
-        height: 14px;
-        flex-shrink: 0;
-    }
-}
-
-h4 {
-    font-size: 12px;
-}
-</style>

package/src/components/Tasks/ViewTask.vue

@@ -96,10 +96,10 @@
                     label="Password">
                     {{ showPassword ? taskSnapshot.password : "••••••••" }}
                     <template #action>
-                        <button @click.stop="showPassword = !showPassword" class="flex items-center justify-center w-8 h-8 rounded transition-all hover:bg-dark-600">
+                        <button @click.stop="showPassword = !showPassword" class="flex items-center justify-center square-8 rounded transition-all hover:bg-dark-550">
                             <EyeToggle :visible="showPassword" />
                         </button>
-                        <button @click.stop="copy(taskSnapshot.password, 'Copied password')" class="copy-button flex items-center justify-center w-8 h-8 rounded transition-all hover:bg-dark-600 text-light-500 hover:text-light-300">
+                        <button @click.stop="copy(taskSnapshot.password, 'Copied password')" class="copy-button flex items-center justify-center square-8 rounded transition-all hover:bg-dark-550 text-light-500 hover:text-light-300">
                             <CopyIcon class="w-4 h-4" />
                         </button>
                     </template>
@@ -146,53 +146,32 @@
         <!-- Task Settings Toggles -->
         <SectionCard title="Task Settings" class="mb-4">
             <div class="grid grid-cols-2 gap-4 md:grid-cols-3">
-                <div class="toggle-item">
-                    <div class="toggle-label">
-                        <TimerIcon class="h-4 w-4" />
-                        <span>Smart Timer</span>
-                    </div>
+                <div class="flex flex-col items-center gap-2">
+                    <IconLabel :icon="TimerIcon" label="Smart Timer" />
                     <Switch v-model="toggles.smartTimer" disabled />
                 </div>
-                <div class="toggle-item">
-                    <div class="toggle-label">
-                        <GroupIcon class="h-4 w-4" />
-                        <span>Login Later</span>
-                    </div>
+                <div class="flex flex-col items-center gap-2">
+                    <IconLabel :icon="GroupIcon" label="Login Later" />
                     <Switch v-model="toggles.loginAfterCart" disabled />
                 </div>
-                <div class="toggle-item">
-                    <div class="toggle-label">
-                        <HandIcon class="h-4 w-4" />
-                        <span>Manual</span>
-                    </div>
+                <div class="flex flex-col items-center gap-2">
+                    <IconLabel :icon="HandIcon" label="Manual" />
                     <Switch v-model="toggles.manual" disabled />
                 </div>
-                <div class="toggle-item">
-                    <div class="toggle-label">
-                        <SavingsIcon class="h-4 w-4" />
-                        <span>Do Not Pay</span>
-                    </div>
+                <div class="flex flex-col items-center gap-2">
+                    <IconLabel :icon="SavingsIcon" label="Do Not Pay" />
                     <Switch v-model="toggles.doNotPay" disabled />
                 </div>
-                <div class="toggle-item">
-                    <div class="toggle-label">
-                        <LoyaltyIcon class="h-4 w-4" />
-                        <span>Presale Mode</span>
-                    </div>
+                <div class="flex flex-col items-center gap-2">
+                    <IconLabel :icon="LoyaltyIcon" label="Presale Mode" />
                     <Switch v-model="toggles.presaleMode" disabled />
                 </div>
-                <div class="toggle-item">
-                    <div class="toggle-label">
-                        <SkiIcon class="h-4 w-4" />
-                        <span>Quick Queue</span>
-                    </div>
+                <div class="flex flex-col items-center gap-2">
+                    <IconLabel :icon="SkiIcon" label="Quick Queue" />
                     <Switch v-model="toggles.quickQueue" disabled />
                 </div>
-                <div class="toggle-item">
-                    <div class="toggle-label">
-                        <SandclockIcon class="h-4 w-4" />
-                        <span>Aged Account</span>
-                    </div>
+                <div class="flex flex-col items-center gap-2">
+                    <IconLabel :icon="SandclockIcon" label="Aged Account" />
                     <Switch v-model="toggles.agedAccount" disabled />
                 </div>
             </div>
@@ -207,8 +186,12 @@ import Switch from "@/components/ui/controls/atomic/Switch.vue";
 import EyeToggle from "@/components/ui/controls/EyeToggle.vue";
 import InfoRow from "@/components/ui/InfoRow.vue";
 import SectionCard from "@/components/ui/SectionCard.vue";
+import IconLabel from "@/components/ui/IconLabel.vue";
 import { useUIStore } from "@/stores/ui";
 import { useCopyToClipboard } from "@/composables/useCopyToClipboard";
+import { useColorMapping } from "@/composables/useColorMapping";
+import { useDateFormatting } from "@/composables/useDateFormatting";
+import { useTicketPricing } from "@/composables/useTicketPricing";
 import {
     EyeIcon,
     StadiumIcon,
@@ -235,6 +218,9 @@ import {
 
 const ui = useUIStore();
 const { copy } = useCopyToClipboard();
+const { colorToClass } = useColorMapping();
+const { formatEventDate: formatDate } = useDateFormatting();
+const { isTotalPrice } = useTicketPricing();
 const showPassword = ref(false);
 
 const props = defineProps({
@@ -274,74 +260,4 @@ const toggles = computed(() => ({
     quickQueue: taskSnapshot.value.quickQueue,
     agedAccount: taskSnapshot.value.agedAccount
 }));
-
-const formatDate = (dateString) => {
-    if (!dateString) return "";
-    try {
-        const date = new Date(dateString);
-        const options = {
-            month: "short",
-            day: "numeric",
-            year: "numeric",
-            hour: "numeric",
-            minute: "2-digit",
-            hour12: true
-        };
-        return date.toLocaleString("en-US", options).replace(",", "");
-    } catch {
-        return dateString;
-    }
-};
-
-const isTotalPrice = (line, index, lines) => {
-    const trimmed = line.trim();
-    const nonEmptyLines = lines.filter((l) => l.trim());
-    const isLastLine = index === lines.lastIndexOf(nonEmptyLines[nonEmptyLines.length - 1]);
-    if (!isLastLine) return false;
-    // Match currency symbols ($, €, £, etc.) OR currency codes (USD, EUR, AUD, etc.)
-    const totalPricePattern = /^([$€£¥₹₽¢]|[A-Z]{3})\s*[\d,]+\.?\d*$/;
-    return totalPricePattern.test(trimmed) && !trimmed.includes("(");
-};
-
-const colorToClass = (color) => {
-    const colorMap = {
-        red: "bg-red-400",
-        green: "bg-green-400",
-        yellow: "bg-yellow-400",
-        blue: "bg-blue-400"
-    };
-    return colorMap[color?.toLowerCase()] || "bg-gray-400";
-};
 </script>
-
-<style lang="scss" scoped>
-.toggle-item {
-    @apply flex flex-col items-center gap-2;
-}
-
-.toggle-label {
-    @apply flex items-center gap-2 text-xs;
-    color: oklch(0.9 0 0);
-
-    svg {
-        color: oklch(0.9 0 0) !important;
-        width: 16px !important;
-        height: 16px !important;
-    }
-}
-
-.status-indicator {
-    @apply h-2 w-2 flex-shrink-0 rounded-full;
-}
-
-.info-icon {
-    @apply h-4 w-4 flex-shrink-0;
-    color: oklch(0.9 0 0) !important;
-
-    svg {
-        color: oklch(0.9 0 0) !important;
-        width: 16px !important;
-        height: 16px !important;
-    }
-}
-</style>

package/src/components/icons/Close.vue

@@ -5,17 +5,11 @@
         viewBox="0 0 17 17"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        class="close-icon"
+        class="w-4 h-4"
     >
         <path
             d="M2.20006 16.375L0.625061 14.8L6.92506 8.5L0.625061 2.2L2.20006 0.625L8.50006 6.925L14.8001 0.625L16.3751 2.2L10.0751 8.5L16.3751 14.8L14.8001 16.375L8.50006 10.075L2.20006 16.375Z"
             fill="currentColor"
         />
     </svg>
-</template>
-
-<style scoped>
-.close-icon {
-    @apply w-4 h-4;
-}
-</style>
+</template>

package/src/components/icons/Gear.vue

@@ -1,8 +1,8 @@
-<template>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-        <path
-            fill="#fff"
-            d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"
-        />
-    </svg>
-</template>
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path
+            fill="#fff"
+            d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"
+        />
+    </svg>
+</template>

package/src/components/icons/Hash.vue

@@ -0,0 +1,5 @@
+<template>
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10 3L8 21M16 3L14 21M4 8H20M3 16H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+</template>

package/src/components/icons/Key.vue

@@ -5,17 +5,11 @@
         viewBox="0 0 16 9"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        class="key-icon"
+        class="w-4 h-4"
     >
         <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>
+</template>

package/src/components/icons/Pencil.vue

@@ -5,17 +5,11 @@
         viewBox="0 0 19 20"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        class="pencil-icon"
+        class="w-4 h-4"
     >
         <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>
+</template>

package/src/components/icons/Profile.vue

@@ -2,17 +2,11 @@
     <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 1024 1024"
-        class="profile-icon"
+        class="w-4 h-4"
     >
         <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>
+</template>

package/src/components/icons/Sell.vue

@@ -5,17 +5,11 @@
         viewBox="0 0 16 16"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        class="sell-icon"
+        class="w-4 h-4"
     >
         <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>
+</template>

package/src/components/icons/Spinner.vue

@@ -1,19 +1,16 @@
 <template>
-    <svg class="spinner" viewBox="0 0 50 50">
+    <svg class="spinner mx-auto h-7.5 w-7.5" 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;
-    
+    animation: rotate 2s linear infinite;
+
     & .path {
-        stroke: rgba(70, 198, 210, 100%);
+        stroke: oklch(0.75 0.1 195);
         stroke-linecap: round;
         animation: dash 1.5s ease-in-out infinite;
     }

package/src/components/icons/Wildcard.vue

@@ -2,17 +2,11 @@
     <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 512 512"
-        class="wildcard-icon"
+        class="w-4 h-4"
     >
         <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>
+</template>

package/src/components/icons/index.js

@@ -47,8 +47,6 @@ 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";
@@ -56,6 +54,7 @@ import CheckIcon from "./Check.vue";
 import SpinnerIcon from "./Spinner.vue";
 import EyeIcon from "./Eye.vue";
 import CopyIcon from "./Copy.vue";
+import HashIcon from "./Hash.vue";
 
 export {
     EditIcon,
@@ -103,13 +102,12 @@ export {
     KeyIcon,
     PencilIcon,
     SellIcon,
-    SquareCheckIcon,
-    SquareUncheckIcon,
     WildcardIcon,
     ProfileIcon,
     CloseXIcon,
     CheckIcon,
     SpinnerIcon,
     EyeIcon,
-    CopyIcon
+    CopyIcon,
+    HashIcon
 };