feat: use tailwind, support dark theme

dist/css/entry.css

@@ -0,0 +1,78 @@
+.o1-right-1\.5 {
+    right: 0.375rem
+}
+.o1-right-1 {
+    right: 0.25rem
+}
+.o1-top-1 {
+    top: 0.25rem
+}
+.o1-right-2 {
+    right: 0.5rem
+}
+.o1-right-3 {
+    right: 0.75rem
+}
+.o1-top-2 {
+    top: 0.5rem
+}
+.o1-flex {
+    display: flex
+}
+.o1-min-h-0 {
+    min-height: 0px
+}
+.o1-rotate-90 {
+    --tw-rotate: 90deg;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.o1-rotate-\[-30\] {
+    --tw-rotate: -30;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.o1-rotate-180 {
+    --tw-rotate: 180deg;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.o1-rotate-\[\] {
+    --tw-rotate: ;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.o1-rotate-\[270deb\] {
+    --tw-rotate: 270deb;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.o1-rotate-\[270deg\] {
+    --tw-rotate: 270deg;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.o1-justify-end {
+    justify-content: flex-end
+}
+.o1-rounded-t-lg {
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem
+}
+.o1-text-gray-200 {
+    --tw-text-opacity: 1;
+    color: rgb(229 231 235 / var(--tw-text-opacity))
+}
+.o1-text-gray-600 {
+    --tw-text-opacity: 1;
+    color: rgb(75 85 99 / var(--tw-text-opacity))
+}
+.o1-opacity-60 {
+    opacity: 0.6
+}
+.hover\:o1-opacity-100:hover {
+    opacity: 1
+}
+.o1-dark .dark\:o1-border-gray-800 {
+    --tw-border-opacity: 1;
+    border-color: rgb(31 41 55 / var(--tw-border-opacity))
+}
+.o1-dark .dark\:o1-bg-gray-200 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(229 231 235 / var(--tw-bg-opacity))
+}
+

dist/mix-manifest.json

@@ -1,3 +1,4 @@
 {
-    "/js/entry.js": "/js/entry.js"
+    "/js/entry.js": "/js/entry.js",
+    "/css/entry.css": "/css/entry.css"
 }

resources/js/components/ActionButton.vue

@@ -0,0 +1,5 @@
+<template>
+  <button class="p-2 bg-white dark:bg-gray-800 flex items-center hover:bg-gray-200 rounded">
+    <slot />
+  </button>
+</template>

resources/js/components/DetachedFilter.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex detached-filter" :class="width">
+  <div class="relative flex h-auto opacity-100 nova-detached-filter" :class="width">
     <component
       :resource-name="resourceName"
       :key="filter.name"
@@ -10,28 +10,39 @@
       @change="$emit('handle-filter-changed', filter)"
     />
 
-    <svg
-      v-if="filter.withReset"
-      class="reset-filter-btn"
-      @click="$emit('reset-filter', filter)"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 512.004 512.004"
-      height="18"
-      width="20"
-    >
-      <!-- RESET FILTER ICON -->
-      <path
-        d="m361.183 0c-54.059 0-99.836 36.049-114.505 85.331h-192.948c-18.024 0-28.614 20.339-18.285 35.119.16.231-5.363-7.31 129.747 177.039 2.714 3.951 4.148 8.57 4.148 13.367v177.688c0 19.435 22.224 30.24 37.473 18.754l57.593-43.518c8.614-6.415 13.754-16.655 13.754-27.409v-125.515c0-4.798 1.435-9.417 4.149-13.369l46.497-63.451c76.139 21.439 151.81-36.022 151.81-114.791.001-65.752-53.577-119.245-119.433-119.245zm-103.192 279.919c-5.835 7.968-9.831 19.1-9.831 30.938 0 136.483.734 127.081-1.68 128.869-1.91 1.421 10.835-8.188-47.14 35.618v-164.488c0-11.012-3.327-21.608-9.622-30.646-.169-.242 4.923 6.71-120.835-164.88h172.938c-1.457 44.852 22.126 84.961 58.678 106.581zm103.192-71.428c-49.314 0-89.434-40.035-89.434-89.246 0-49.21 40.12-89.245 89.434-89.245 49.313 0 89.433 40.035 89.433 89.245.001 49.211-40.119 89.246-89.433 89.246z"
-      />
-      <path
-        d="m400.201 80.298c-5.854-5.864-15.35-5.872-21.213-.02l-17.805 17.773-17.805-17.773c-5.863-5.853-15.361-5.846-21.213.02-5.853 5.862-5.844 15.36.019 21.213l17.767 17.735-17.767 17.735c-5.863 5.853-5.872 15.351-.019 21.213 5.833 5.844 15.331 5.891 21.213.02l17.805-17.773 17.805 17.773c5.845 5.834 15.343 5.862 21.213-.02 5.853-5.862 5.844-15.36-.019-21.213l-17.767-17.735 17.767-17.735c5.863-5.853 5.872-15.351.019-21.213z"
-      />
-    </svg>
+    <div class="absolute o1-right-3 o1-top-1 flex">
+      <ActionButton class="p-1" @click="$emit('reset-filter', filter)" v-if="filter.withReset">
+        <ResetIcon />
+      </ActionButton>
+    </div>
   </div>
 </template>
 
 <script>
+import ActionButton from './ActionButton';
+import { ResetIcon } from './icons';
+
 export default {
+  components: { ActionButton, ResetIcon },
   props: ['filter', 'width', 'resourceName'],
 };
 </script>
+
+<style lang="scss">
+.nova-detached-filter {
+  h3 {
+    background-color: transparent;
+    text-transform: capitalize;
+    padding: 0.25rem 4rem 0 0.5rem;
+    font-size: 16px;
+    font-weight: 300;
+    font-family: Nunito, system-ui, BlinkMacSystemFont, -apple-system, sans-serif;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  > div:first-of-type {
+    width: 100%;
+  }
+}
+</style>