update

src/assets/css/style.css

@@ -959,10 +959,6 @@ select {
   top: 50%;
 }
 
-.top-16 {
-  top: 4rem;
-}
-
 .top-3 {
   top: 0.75rem;
 }
@@ -975,6 +971,10 @@ select {
   top: 100%;
 }
 
+.top-16 {
+  top: 4rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -1064,10 +1064,6 @@ select {
   margin-bottom: 2rem;
 }
 
-.me-1 {
-  margin-inline-end: 0.25rem;
-}
-
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -1140,6 +1136,10 @@ select {
   margin-top: 1.5rem;
 }
 
+.me-1 {
+  margin-inline-end: 0.25rem;
+}
+
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -1316,10 +1316,6 @@ select {
   width: 1.5rem;
 }
 
-.w-72 {
-  width: 18rem;
-}
-
 .w-8 {
   width: 2rem;
 }
@@ -1352,6 +1348,10 @@ select {
   width: 1px;
 }
 
+.w-72 {
+  width: 18rem;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1537,6 +1537,10 @@ select {
   gap: 0.25rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1545,10 +1549,6 @@ select {
   gap: 0.75rem;
 }
 
-.gap-4 {
-  gap: 1rem;
-}
-
 .gap-x-6 {
   -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
@@ -1637,10 +1637,6 @@ select {
   border-radius: 0.25rem;
 }
 
-.rounded-2xl {
-  border-radius: 1rem;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1657,6 +1653,10 @@ select {
   border-radius: 0.75rem;
 }
 
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
 .rounded-l-full {
   border-top-left-radius: 9999px;
   border-bottom-left-radius: 9999px;
@@ -1732,15 +1732,15 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-transparent {
+  border-color: transparent;
+}
+
 .border-primary-500 {
   --tw-border-opacity: 1;
   border-color: rgb(3 91 113 / var(--tw-border-opacity));
 }
 
-.border-transparent {
-  border-color: transparent;
-}
-
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1751,11 +1751,6 @@ select {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
 .bg-gray-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -1865,6 +1860,11 @@ select {
   background-color: rgb(204 204 0 / var(--tw-bg-opacity));
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-100 {
   --tw-bg-opacity: 1;
 }
@@ -1901,10 +1901,6 @@ select {
   fill: #4b5563;
 }
 
-.fill-green-600 {
-  fill: #16a34a;
-}
-
 .fill-primary-500 {
   fill: #035b71;
 }
@@ -1913,10 +1909,18 @@ select {
   fill: #cc0000;
 }
 
+.fill-secondary-600 {
+  fill: #007b8d;
+}
+
 .fill-white {
   fill: #fff;
 }
 
+.fill-green-600 {
+  fill: #16a34a;
+}
+
 .stroke-white {
   stroke: #fff;
 }
@@ -2357,6 +2361,11 @@ select {
   color: rgb(204 0 0 / var(--tw-text-opacity));
 }
 
+.text-secondary-600 {
+  --tw-text-opacity: 1;
+  color: rgb(0 123 141 / var(--tw-text-opacity));
+}
+
 .text-slate-600 {
   --tw-text-opacity: 1;
   color: rgb(71 85 105 / var(--tw-text-opacity));
@@ -2414,10 +2423,6 @@ select {
   opacity: 1;
 }
 
-.opacity-25 {
-  opacity: 0.25;
-}
-
 .opacity-30 {
   opacity: 0.3;
 }
@@ -2430,6 +2435,10 @@ select {
   opacity: 0.5;
 }
 
+.opacity-25 {
+  opacity: 0.25;
+}
+
 .opacity-75 {
   opacity: 0.75;
 }
@@ -2669,16 +2678,6 @@ select {
   background-color: rgb(205 222 227 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-primary-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(154 189 198 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-primary-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(2 73 90 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-red-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 0 0 / var(--tw-bg-opacity));
@@ -2694,6 +2693,16 @@ select {
   background-color: rgb(255 255 0 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(154 189 198 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-primary-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 73 90 / var(--tw-bg-opacity));
+}
+
 .hover\:text-gray-500:hover {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -2855,6 +2864,11 @@ select {
   border-color: rgb(104 157 170 / var(--tw-border-opacity));
 }
 
+.disabled\:bg-primary-400:disabled {
+  --tw-bg-opacity: 1;
+  background-color: rgb(53 124 141 / var(--tw-bg-opacity));
+}
+
 .disabled\:bg-primary-200:disabled {
   --tw-bg-opacity: 1;
   background-color: rgb(154 189 198 / var(--tw-bg-opacity));
@@ -2865,11 +2879,6 @@ select {
   background-color: rgb(104 157 170 / var(--tw-bg-opacity));
 }
 
-.disabled\:bg-primary-400:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgb(53 124 141 / var(--tw-bg-opacity));
-}
-
 .disabled\:text-primary-300:disabled {
   --tw-text-opacity: 1;
   color: rgb(104 157 170 / var(--tw-text-opacity));

src/components/CommandPalettes.vue

@@ -1,13 +1,13 @@
 <template>
-    <TransitionRoot :show="command.open" as="template" @after-leave="onQueryChange('')" appear>
+    <TransitionRoot :show="command.open" @after-leave="onQueryChange('')" appear>
         <Dialog as="div" class="relative z-10" @close="command.closeCommand">
-            <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
+            <TransitionChild enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
                 leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
                 <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-25 backdrop-blur" />
             </TransitionChild>
 
             <div class="fixed inset-0 z-10 p-4 overflow-y-auto sm:p-6 md:p-20">
-                <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 scale-95"
+                <TransitionChild enter="ease-out duration-300" enter-from="opacity-0 scale-95"
                     enter-to="opacity-100 scale-100" leave="ease-in duration-200" leave-from="opacity-100 scale-100"
                     leave-to="opacity-0 scale-95">
                     <!-- max-w-2xl mx-auto overflow-hidden transition-all transform bg-white bg-opacity-80 divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl ring-0 ring-black ring-opacity-5 -->