Move Clear All button inline with Download All

- Relocate to action buttons row
- Add red outline styling with solid fill on hover

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-05-14 09:11:09 -04:00
parent 7961dbfe39
commit 5e230a7bd2

View File

@@ -449,26 +449,9 @@
<h2 class="text-sm font-medium text-grey-500 uppercase tracking-wide"> <h2 class="text-sm font-medium text-grey-500 uppercase tracking-wide">
Images ({imagesStore.images.length}) Images ({imagesStore.images.length})
</h2> </h2>
<button
type="button"
class="
flex items-center gap-1.5
px-3 py-1.5
text-grey-500
hover:text-error hover:bg-error-light
rounded-md
text-sm font-medium
transition-colors duration-150
"
onclick={handleClearAll}
>
<Trash2 class="w-4 h-4" />
Clear All
</button>
</div> </div>
<!-- View mode toggle and download button --> <!-- View mode toggle and action buttons -->
<div class="flex flex-wrap items-center justify-between gap-3"> <div class="flex flex-wrap items-center justify-between gap-3">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-xs font-medium text-grey-500 uppercase tracking-wide">View:</span> <span class="text-xs font-medium text-grey-500 uppercase tracking-wide">View:</span>
@@ -512,25 +495,45 @@
</div> </div>
</div> </div>
{#if imagesStore.completeCount > 0} <div class="flex items-center gap-2">
<button <button
type="button" type="button"
class=" class="
flex items-center justify-center gap-2 flex items-center gap-1.5
px-4 py-2 px-4 py-2
bg-accent text-white text-error
border border-error
rounded-md rounded-md
text-sm font-medium text-sm font-medium
hover:bg-accent-hover hover:bg-error hover:text-white
focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2
transition-colors duration-150 transition-colors duration-150
" "
onclick={handleDownloadAll} onclick={handleClearAll}
> >
<Download class="w-4 h-4" /> <Trash2 class="w-4 h-4" />
Download All ({imagesStore.completeCount}) Clear All
</button> </button>
{/if}
{#if imagesStore.completeCount > 0}
<button
type="button"
class="
flex items-center justify-center gap-2
px-4 py-2
bg-accent text-white
rounded-md
text-sm font-medium
hover:bg-accent-hover
focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2
transition-colors duration-150
"
onclick={handleDownloadAll}
>
<Download class="w-4 h-4" />
Download All ({imagesStore.completeCount})
</button>
{/if}
</div>
</div> </div>
</div> </div>