diff --git a/server/src/wled_controller/static/css/components.css b/server/src/wled_controller/static/css/components.css
index f48e852..52df1c3 100644
--- a/server/src/wled_controller/static/css/components.css
+++ b/server/src/wled_controller/static/css/components.css
@@ -398,6 +398,7 @@ input:-webkit-autofill:focus {
.header-btn:focus-visible,
.tutorial-trigger-btn:focus-visible,
.tutorial-close-btn:focus-visible,
+.dashboard-action-btn:focus-visible,
.btn-expand-collapse:focus-visible,
.btn-filter-action:focus-visible,
.settings-toggle:focus-visible {
diff --git a/server/src/wled_controller/static/css/dashboard.css b/server/src/wled_controller/static/css/dashboard.css
index e2b95fd..2d6085f 100644
--- a/server/src/wled_controller/static/css/dashboard.css
+++ b/server/src/wled_controller/static/css/dashboard.css
@@ -202,6 +202,36 @@
gap: 4px;
}
+.dashboard-action-btn {
+ background: none;
+ border: none;
+ width: 28px;
+ height: 28px;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ border-radius: 4px;
+ transition: color 0.2s, background 0.2s;
+}
+
+.dashboard-action-btn.start {
+ color: var(--primary-color);
+}
+
+.dashboard-action-btn.start:hover {
+ background: color-mix(in srgb, var(--primary-color) 12%, transparent);
+}
+
+.dashboard-action-btn.stop {
+ color: var(--warning-color, #ffc107);
+}
+
+.dashboard-action-btn.stop:hover {
+ background: rgba(255, 193, 7, 0.12);
+}
+
.dashboard-autostart-btn {
background: none;
border: none;
diff --git a/server/src/wled_controller/static/js/core/icon-paths.js b/server/src/wled_controller/static/js/core/icon-paths.js
index 92dff65..4f9c879 100644
--- a/server/src/wled_controller/static/js/core/icon-paths.js
+++ b/server/src/wled_controller/static/js/core/icon-paths.js
@@ -69,3 +69,4 @@ export const rotateCw = '';
export const download = '';
export const undo2 = '';
+export const power = '';
diff --git a/server/src/wled_controller/static/js/core/icons.js b/server/src/wled_controller/static/js/core/icons.js
index 3e664f8..1531029 100644
--- a/server/src/wled_controller/static/js/core/icons.js
+++ b/server/src/wled_controller/static/js/core/icons.js
@@ -83,8 +83,8 @@ export const ICON_CLONE = _svg(P.copy);
export const ICON_EDIT = _svg(P.pencil);
export const ICON_TEST = _svg(P.flaskConical);
export const ICON_START = _svg(P.play);
-export const ICON_STOP = _svg(P.square);
-export const ICON_STOP_PLAIN = _svg(P.square);
+export const ICON_STOP = _svg(P.power);
+export const ICON_STOP_PLAIN = _svg(P.power);
export const ICON_PAUSE = _svg(P.pause);
export const ICON_SETTINGS = _svg(P.settings);
export const ICON_CALIBRATION = _svg(P.ruler);
diff --git a/server/src/wled_controller/static/js/features/dashboard.js b/server/src/wled_controller/static/js/features/dashboard.js
index d8854e6..d721bcc 100644
--- a/server/src/wled_controller/static/js/features/dashboard.js
+++ b/server/src/wled_controller/static/js/features/dashboard.js
@@ -268,9 +268,9 @@ function _updateProfilesInPlace(profiles) {
const active = (p.active_target_ids || []).length;
metricVal.textContent = p.is_active ? `${active}/${cnt}` : `${cnt}`;
}
- const btn = card.querySelector('.dashboard-target-actions .btn');
+ const btn = card.querySelector('.dashboard-target-actions .dashboard-action-btn');
if (btn) {
- btn.className = `btn btn-icon ${p.enabled ? 'btn-warning' : 'btn-success'}`;
+ btn.className = `dashboard-action-btn ${p.enabled ? 'stop' : 'start'}`;
btn.setAttribute('onclick', `dashboardToggleProfile('${p.id}', ${!p.enabled})`);
btn.innerHTML = p.enabled ? ICON_STOP_PLAIN : ICON_START;
}
@@ -464,7 +464,7 @@ export async function loadDashboard(forceFullRender = false) {
-
@@ -629,7 +629,7 @@ function renderDashboardTarget(target, isRunning, devicesMap = {}, cssSourceMap
★
- ${ICON_STOP_PLAIN}
+ ${ICON_STOP_PLAIN}
`;
} else {
@@ -644,7 +644,7 @@ function renderDashboardTarget(target, isRunning, devicesMap = {}, cssSourceMap
★
- ${ICON_START}
+ ${ICON_START}
`;
}
@@ -694,7 +694,7 @@ function renderDashboardProfile(profile) {
-
+
${profile.enabled ? ICON_STOP_PLAIN : ICON_START}