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

18
frontend/src/pages/AlertsPage.jsx
View File

@@ -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)}>
<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="danger-btn" onClick={() => removeDefinition(d.id)}>
</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>
))}

9
frontend/src/pages/DashboardPage.jsx
View File

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

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

72
frontend/src/styles.css
View File

@@ -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;