small UI improvements

Author: arukompas

public/app.css

@@ -537,3 +537,18 @@ html.dark {
         @apply outline-none ring-2 ring-emerald-500 dark:ring-emerald-700;
     }
 }
+
+button.button, a.button {
+    @apply block flex items-center w-full px-4 py-2 text-left text-sm outline-emerald-500 dark:outline-emerald-800 text-gray-900 dark:text-gray-200 rounded-md;
+    & > svg {
+        @apply w-4 h-4 text-gray-600 dark:text-gray-400;
+        &.spin {
+            // Spinner is slightly dimmer by default, especially because it's constantly spinning
+            // and it's also a little smaller in size
+            @apply text-gray-600;
+        }
+    }
+}
+button.button:hover, a.button:hover {
+    @apply bg-gray-50 dark:bg-gray-700;
+}

resources/css/app.scss

@@ -106,7 +106,7 @@ Alpine.store('fileViewer', {
                 }
             })
     },
-    checkBoxesVisibility:false,
+    checkBoxesVisibility: false,
     filesChecked: [],
     foldersOpen: [],
     foldersInView: [],

resources/js/app.js

@@ -32,6 +32,17 @@
         </div>
     </div>
 
+    <div class="grid grid-flow-col pr-4 mt-2" x-bind:class="[$store.fileViewer.filesChecked.length ? 'justify-between' : 'justify-end']" x-show="$store.fileViewer.checkBoxesVisibility">
+        <button x-show="$store.fileViewer.filesChecked.length" x-on:click.stop="if (confirm('Are you sure you want to delete selected log files? THIS ACTION CANNOT BE UNDONE.')) { $wire.call('deleteMultipleFiles', $store.fileViewer.filesChecked) }"
+                class="button inline-flex">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="w-5 mr-1" fill="currentColor"><use href="#icon-trashcan" /></svg>
+            Delete selected files
+        </button>
+        <button class="button inline-flex" x-on:click.stop="$store.fileViewer.showCheckBoxes(); $store.fileViewer.resetChecks()">
+            Cancel <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="w-5 ml-1" fill="currentColor"><use href="#icon-cross" /></svg>
+        </button>
+    </div>
+
     <div id="file-list-container" class="relative h-full overflow-hidden" x-cloak>
         <div class="pointer-events-none absolute z-10 top-0 h-4 w-full bg-gradient-to-b from-gray-100 dark:from-gray-900 to-transparent"></div>
         <div class="file-list" x-ref="fileList" x-on:scroll="(event) => $store.fileViewer.onScroll(event)">
@@ -98,14 +109,6 @@ class="dropdown w-48"
             </div>
 
             <div class="folder-files pl-3 ml-1 border-l border-gray-200 dark:border-gray-800" x-show="$store.fileViewer.isOpen(folder)">
-                <div class="grid grid-flow-col gap-x-32" x-show="$store.fileViewer.filesChecked.length">
-                    <button x-on:click.stop="if (confirm('Are you sure you want to delete selected log files? THIS ACTION CANNOT BE UNDONE.')) { $wire.call('deleteMultipleFiles', $store.fileViewer.filesChecked) }" class="pt-4 pb-3 inline-flex" >
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="w-5" fill="currentColor"><use href="#icon-trashcan" /></svg>&nbsp;<small>Delete Selected Files</small>
-                    </button>
-                    <button class="inline-flex pt-4 pb-3" x-on:click.stop="$store.fileViewer.showCheckBoxes(), $store.fileViewer.resetChecks()">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="w-5" fill="currentColor"><use href="#icon-cross" /></svg>
-                    </button>
-                </div>
                 @foreach($folder->files() as $logFile)
                     @include('log-viewer::partials.file-list-item', ['logFile' => $logFile])
                 @endforeach

resources/views/livewire/file-list.blade.php

@@ -8,18 +8,17 @@
     x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
     x-id="['dropdown-button']"
 >
-    @can('deleteLogFile', $logFile)
-    <div class="my-auto px-2" x-show="$store.fileViewer.checkBoxesVisibility">
-        <input 
-            type="checkbox"
-            x-init="$watch(`$store.fileViewer.isChecked('{{$logFile->identifier}}')`, (value) => {
-                $el.checked = value;
-            })"
-            x-on:click.stop="$store.fileViewer.checkBoxToggle('{{$logFile->identifier}}')"
-            value="{{$logFile->identifier}}" />
-    </div>
-    @endcan
     <div class="file-item grow">
+        @can('deleteLogFile', $logFile)
+        <div class="my-auto mr-2" x-show="$store.fileViewer.checkBoxesVisibility">
+            <input type="checkbox"
+                x-init="$watch(`$store.fileViewer.isChecked('{{$logFile->identifier}}')`, (value) => {
+                    $el.checked = value;
+                })"
+                x-on:click.stop="$store.fileViewer.checkBoxToggle('{{$logFile->identifier}}')"
+                value="{{$logFile->identifier}}" />
+        </div>
+        @endcan
         <p class="file-name">{{ $logFile->name }}</p>
         <span class="file-size">{{ $logFile->sizeFormatted() }}</span>
         <button type="button" class="file-dropdown-toggle"
@@ -60,7 +59,7 @@ class="dropdown w-48"
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><use href="#icon-trashcan" /></svg>
                 Delete
             </button>
-            <button x-on:click.stop="$store.fileViewer.showCheckBoxes()">
+            <button x-on:click.stop="$store.fileViewer.showCheckBoxes(); $store.fileViewer.checkBoxToggle('{{$logFile->identifier}}'); close($refs.button)">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><use href="#icon-trashcan" /></svg>
                 Delete Multiple
             </button>