nessi/NexaPG
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases 13 Activity

Improve action button styling and structure across pages

Browse Source 
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.
This commit is contained in:
Sascha Nesterovic
2026-02-12 14:05:51 +01:00
parent d4f176c731
commit 55f5652572
4 changed files with 128 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/pages/TargetsPage.jsx
View File

@@ -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>
))}