From a0fd6d68562b84e49cf4b5d8d03501311cee19fb Mon Sep 17 00:00:00 2001
From: Lukasz Raczylo <lukasz@raczylo.com>
Date: Mon, 5 Oct 2026 14:05:00 +0100
Subject: [PATCH] feat(ui): make the alert action button prominent

The action button was a small outline control that was easy to miss.
It is now a solid primary button with an icon. The spinner still
replaces the icon while the action runs.
---
 src/components/RowActions.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/RowActions.vue b/src/components/RowActions.vue
index 57f7c7b..24d9d37 100644
--- a/src/components/RowActions.vue
+++ b/src/components/RowActions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { faScrewdriverWrench, faSpinner } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
   AlertDialog,
@@ -44,14 +44,18 @@ function press(a: ActionDef): void {
   <div class="mt-2 flex flex-wrap items-center gap-2" data-test="row-actions">
     <template v-for="a in row.actions" :key="a.id">
       <Button
-        variant="outline"
-        size="xs"
+        size="sm"
+        class="font-semibold shadow-sm"
         :disabled="busy(a)"
         :aria-busy="busy(a)"
         :data-test="`action-${a.id}`"
         @click="press(a)"
       >
-        <FontAwesomeIcon v-if="busy(a)" :icon="faSpinner" spin aria-hidden="true" />
+        <FontAwesomeIcon
+          :icon="busy(a) ? faSpinner : faScrewdriverWrench"
+          :spin="busy(a)"
+          aria-hidden="true"
+        />
         {{ a.label }}
       </Button>
       <Badge v-if="busy(a)" variant="secondary" data-test="action-status">Sending</Badge>