Updated the style of table buttons (#80)

resources/views/bar/buttons/reordering.blade.php

@@ -1,16 +1,11 @@
-<button
-    @class([
-        'flex items-center gap-1 px-3 py-2 bg-white border transition ease-in-out rounded-md shadow-sm h-full text-sm' => true,
-        'active:bg-neutral-100 dark:bg-neutral-800 dark:active:bg-neutral-900' => true,
-        'border-neutral-200 text-neutral-800 hover:text-neutral-500 focus:border-blue-300 active:text-neutral-800 dark:border-neutral-700 dark:focus:border-blue-600 dark:text-neutral-300 dark:hover:text-white dark:focus:border-blue-600 dark:active:text-white' => ! $this->reordering,
-        'border-blue-300 text-blue-500 dark:border-blue-600 dark:text-blue-500' => $this->reordering,
-    ])
-    title="{{ __('Reordering') }}"
-    aria-label="{{ __('Reordering') }}"
+<x-livewire-table::button
+    :title="__('Reordering')"
+    :aria-label="__('Reordering')"
     wire:click="$toggle('reordering')"
+    :active="$this->reordering"
 >
     <!-- Icon "queue-list" (outline) from https://heroicons.com -->
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
     </svg>
-</button>
+</x-livewire-table::button>

resources/views/bar/dropdowns/filters.blade.php

@@ -1,5 +1,5 @@
 @if($table['filters']->isNotEmpty())
-    <x-livewire-table::dropdown label="{{ __('Filters') }}" :count="count($this->filters)">
+    <x-livewire-table::dropdown label="{{ __('Filters') }}" :active="count($this->filters) > 0">
         <x-slot name="icon">
             <!-- Icon "adjustments-horizontal" (outline) from https://heroicons.com -->
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">

resources/views/components/button.blade.php

@@ -0,0 +1,17 @@
+@props(['active' => false])
+
+<button
+    {{
+        $attributes->class([
+            'flex items-center gap-1 relative px-3 py-2 bg-white border transition ease-in-out rounded-md shadow-sm h-full text-sm' => true,
+            'active:bg-neutral-100 dark:bg-neutral-800 dark:active:bg-neutral-900' => true,
+            'border-neutral-200 text-neutral-800 hover:text-neutral-500 focus:border-blue-300 active:text-neutral-800 dark:border-neutral-700 dark:focus:border-blue-600 dark:text-neutral-300 dark:hover:text-white dark:focus:border-blue-600 dark:active:text-white' => ! $active,
+            'border-blue-300 text-blue-500 dark:border-blue-600 dark:text-blue-500' => $active,
+        ])
+    }}
+>
+    {{ $slot }}
+    @if ($active)
+        <span class="absolute -right-1 -top-1 rounded-full shadow-sm bg-blue-500 dark:bg-blue-600 block w-2.5 h-2.5"></span>
+    @endif
+</button>

resources/views/components/dropdown.blade.php

@@ -1,19 +1,14 @@
-@props(['icon', 'label', 'count' => 0])
+@props(['icon', 'label', 'active' => false])
 
 <div class="md:relative z-10" x-data="{ show: false }">
-    <button
-        class="flex items-center gap-1 px-3 py-2 bg-white border border-neutral-200 text-neutral-800 hover:text-neutral-500 focus:border-blue-300 active:bg-neutral-100 active:text-neutral-800 transition ease-in-out rounded-md shadow-sm h-full text-sm dark:bg-neutral-800 dark:border-neutral-700 dark:focus:border-blue-600 dark:text-neutral-300 dark:hover:text-white dark:focus:border-blue-600 dark:active:bg-neutral-900 dark:active:text-white"
-        @if(isset($label))
-            title="{{ $label }}"
-            aria-label="{{ $label }}"
-        @endif
+    <x-livewire-table::button
+        :title="$label"
+        :aria-label="$label"
+        :active="$active"
         x-on:click="show = !show"
     >
         {{ $icon ?? '' }}
-        @if($count > 0)
-            <span class="bg-blue-500 text-white rounded-full px-2">{{ $count }}</span>
-        @endif
-    </button>
+    </x-livewire-table::button>
     <div
         class="w-full md:w-56 absolute right-0 text-black bg-white mt-2 shadow-xl rounded border border-neutral-200 overflow-y-auto max-h-56 dark:text-white dark:bg-neutral-800 dark:border-neutral-700"
         x-show="show"