From 55f56525724b05767c4a480e07b429108e0cf646 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Thu, 12 Feb 2026 14:05:51 +0100
Subject: [PATCH] Improve action button styling and structure across pages

Introduced a new design and layout for action buttons on AlertsPage, DashboardPage, and TargetsPage with consistent styles and added SVG icons. Updated styles.css to support these changes with reusable button classes for better maintainability and UI consistency.
---
 frontend/src/pages/AlertsPage.jsx    | 24 +++++++---
 frontend/src/pages/DashboardPage.jsx |  9 +++-
 frontend/src/pages/TargetsPage.jsx   | 33 +++++++++++--
 frontend/src/styles.css              | 72 ++++++++++++++++++++++++++++
 4 files changed, 128 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/AlertsPage.jsx b/frontend/src/pages/AlertsPage.jsx
index 5efcd73..3124986 100644
--- a/frontend/src/pages/AlertsPage.jsx
+++ b/frontend/src/pages/AlertsPage.jsx
@@ -442,12 +442,24 @@ export function AlertsPage() {
                       <td>{d.alert_threshold}</td>
                       <td>{d.enabled ? "Enabled" : "Disabled"}</td>
                       <td>
-                        <button type="button" className="secondary-btn small-btn" onClick={() => toggleDefinition(d)}>
-                          {d.enabled ? "Disable" : "Enable"}
-                        </button>{" "}
-                        <button type="button" className="danger-btn" onClick={() => removeDefinition(d.id)}>
-                          Delete
-                        </button>
+                        <div className="row-actions">
+                          <button type="button" className={`table-action-btn toggle ${d.enabled ? "enabled" : "disabled"}`} onClick={() => toggleDefinition(d)}>
+                            <span aria-hidden="true">
+                              <svg viewBox="0 0 24 24" width="13" height="13">
+                                <path d="M7 12h10M12 7v10" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" />
+                              </svg>
+                            </span>
+                            {d.enabled ? "Disable" : "Enable"}
+                          </button>
+                          <button type="button" className="table-action-btn delete" onClick={() => removeDefinition(d.id)}>
+                            <span aria-hidden="true">
+                              <svg viewBox="0 0 24 24" width="13" height="13">
+                                <path d="M6 7h12l-1 13H7L6 7zm3-3h6l1 2H8l1-2z" fill="currentColor" />
+                              </svg>
+                            </span>
+                            Delete
+                          </button>
+                        </div>
                       </td>
                     </tr>
                   ))}
diff --git a/frontend/src/pages/DashboardPage.jsx b/frontend/src/pages/DashboardPage.jsx
index 310a3fc..553db06 100644
--- a/frontend/src/pages/DashboardPage.jsx
+++ b/frontend/src/pages/DashboardPage.jsx
@@ -110,7 +110,14 @@ export function DashboardPage() {
                   <p><strong>DB:</strong> {t.dbname}</p>
                 </div>
                 <div className="target-actions">
-                  <Link className="details-btn" to={`/targets/${t.id}`}>Details <span aria-hidden="true">{"->"}</span></Link>
+                  <Link className="table-action-btn details" to={`/targets/${t.id}`}>
+                    <span aria-hidden="true">
+                      <svg viewBox="0 0 24 24" width="13" height="13">
+                        <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6zm10 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill="currentColor" />
+                      </svg>
+                    </span>
+                    Details
+                  </Link>
                 </div>
               </article>
             );
diff --git a/frontend/src/pages/TargetsPage.jsx b/frontend/src/pages/TargetsPage.jsx
index 867c16f..307d87f 100644
--- a/frontend/src/pages/TargetsPage.jsx
+++ b/frontend/src/pages/TargetsPage.jsx
@@ -339,9 +339,36 @@ export function TargetsPage() {
                     </span>
                   </td>
                   <td>
-                    <Link className="table-link" to={`/targets/${t.id}`}>Details</Link>{" "}
-                    {canManage && <button className="secondary-btn small-btn" onClick={() => startEdit(t)}>Edit</button>}
-                    {canManage && <button className="danger-btn" onClick={() => deleteTarget(t.id)}>Delete</button>}
+                    <div className="row-actions">
+                      <Link className="table-action-btn details" to={`/targets/${t.id}`}>
+                        <span aria-hidden="true">
+                          <svg viewBox="0 0 24 24" width="13" height="13">
+                            <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6zm10 3a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill="currentColor" />
+                          </svg>
+                        </span>
+                        Details
+                      </Link>
+                      {canManage && (
+                        <button className="table-action-btn edit" onClick={() => startEdit(t)}>
+                          <span aria-hidden="true">
+                            <svg viewBox="0 0 24 24" width="13" height="13">
+                              <path d="M3 17.25V21h3.75L19.81 7.94l-3.75-3.75L3 17.25zm2.92 2.33H5v-.92l10.06-10.06.92.92L5.92 19.58zM20.71 6.04a1 1 0 0 0 0-1.41L19.37 3.3a1 1 0 0 0-1.41 0l-1.13 1.12 3.75 3.75 1.13-1.13z" fill="currentColor" />
+                            </svg>
+                          </span>
+                          Edit
+                        </button>
+                      )}
+                      {canManage && (
+                        <button className="table-action-btn delete" onClick={() => deleteTarget(t.id)}>
+                          <span aria-hidden="true">
+                            <svg viewBox="0 0 24 24" width="13" height="13">
+                              <path d="M6 7h12l-1 13H7L6 7zm3-3h6l1 2H8l1-2z" fill="currentColor" />
+                            </svg>
+                          </span>
+                          Delete
+                        </button>
+                      )}
+                    </div>
                   </td>
                 </tr>
               ))}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 2e81812..9c8d07f 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -825,6 +825,78 @@ details[open] .collapse-chevron {
   font-weight: 600;
 }
 
+.row-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.table-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 10px;
+  padding: 6px 10px;
+  min-height: 32px;
+  font-weight: 650;
+  font-size: 13px;
+  border: 1px solid transparent;
+  color: #eaf4ff;
+  background: #132d54;
+  text-decoration: none;
+}
+
+.table-action-btn.details {
+  border-color: #47c4f6;
+  background: linear-gradient(180deg, #155c8f, #124a76);
+}
+
+.table-action-btn.details:hover {
+  border-color: #8ce8ff;
+  filter: brightness(1.06);
+}
+
+.table-action-btn.edit {
+  border-color: #4f8ed4;
+  background: linear-gradient(180deg, #184b7f, #143f69);
+}
+
+.table-action-btn.edit:hover {
+  border-color: #7ec3ff;
+  filter: brightness(1.06);
+}
+
+.table-action-btn.delete {
+  border-color: #d36a85;
+  background: linear-gradient(180deg, #5c1e32, #451626);
+}
+
+.table-action-btn.delete:hover {
+  border-color: #ff93ad;
+  filter: brightness(1.06);
+}
+
+.table-action-btn.toggle.enabled {
+  border-color: #d38f3a;
+  background: linear-gradient(180deg, #5a3513, #3f240f);
+}
+
+.table-action-btn.toggle.enabled:hover {
+  border-color: #f4be6a;
+  filter: brightness(1.06);
+}
+
+.table-action-btn.toggle.disabled {
+  border-color: #3f6ea9;
+  background: linear-gradient(180deg, #153963, #112d4d);
+}
+
+.table-action-btn.toggle.disabled:hover {
+  border-color: #77b1eb;
+  filter: brightness(1.06);
+}
+
 .danger-btn {
   margin-left: 8px;
   border-color: #7a2e43;