Fix labels and colors not rendering properly (#7)

package.json

@@ -6,12 +6,12 @@
         "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
     },
     "devDependencies": {
-        "@vue/compiler-sfc": "^3.3.7",
+        "@vue/compiler-sfc": "^3.3.8",
         "laravel-mix": "^6.0.41",
         "mix-tailwindcss": "^1.3.0",
-        "sass": "^1.69.4",
+        "sass": "^1.69.5",
         "sass-loader": "^13.3.2",
         "tailwindcss": "^3.3.5",
-        "vue-loader": "^17.3.0"
+        "vue-loader": "^17.3.1"
     }
 }

resources/js/components/IconActionToolbar.vue

@@ -12,13 +12,13 @@
                 type="button"
                 @click.stop="() => $emit('click', uriKey)"
                 :class="{
-                    'dark:text-gray-400 dark:hover:text-primary-500': parentType === 'ActionSelector',
-                    'h-9 w-9': !isDetailView && !standalone,
+                    'dark:hover:text-primary-500': parentType === 'ActionSelector',
+                    'h-9 w-auto': !isDetailView && !standalone,
                     'hover:text-red-500': destructive && !isDetailView,
-                    'hover:text-primary-500': !destructive && !isDetailView,
-                    'rounded hover:bg-gray-200 dark:hover:bg-gray-800 focus:outline-none focus:ring px-3 hover:text-gray-400': standalone && isDetailView
+                    'dark:hover:text-primary-500 hover:text-primary-500': !destructive && !isDetailView,
+                    'rounded hover:bg-gray-200 dark:hover:bg-gray-800 focus:outline-none focus:ring px-3 hover:text-gray-500': standalone && isDetailView
                 }"
-                class="toolbar-button px-2 disabled:opacity-50 disabled:pointer-events-none">
+                class="toolbar-button dark:text-gray-400 text-gray-500 px-2 disabled:opacity-50 disabled:pointer-events-none">
 
                 <Icon v-if="typeof iconActionToolbar.icon !== 'string'" name="cube-transparent"/>
 
@@ -28,7 +28,7 @@
 
                 <Icon v-else-if="iconActionToolbar.icon" :name="iconActionToolbar.icon"/>
 
-                <div class="ml-1" v-if="iconActionToolbar.label">
+                <div class="ml-1 whitespace-nowrap" v-if="iconActionToolbar.label">
                     {{ iconActionToolbar.label }}
                 </div>
 

resources/js/tool.js

@@ -2,8 +2,6 @@ import ActionSelector from './components/ActionSelector.vue'
 import ActionDropdown from './components/ActionDropdown.vue'
 
 Nova.booting(app => {
-
     app.component('ActionSelector', ActionSelector)
     app.component('ActionDropdown', ActionDropdown)
-
 })