Use flat buttons and power icon for dashboard start/stop actions

- Replace btn-icon with transparent flat dashboard-action-btn style
- Use Lucide power icon instead of square for stop/turn-off buttons
- Add accent-tinted hover backgrounds for start (green) and stop (amber)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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 {

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;

server/src/wled_controller/static/js/core/icon-paths.js

@@ -69,3 +69,4 @@ export const rotateCw     = '<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.
 export const rotateCcw    = '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>';
 export const download     = '<path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/>';
 export const undo2        = '<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5 5.5 5.5 0 0 1-5.5 5.5H11"/>';
+export const power        = '<path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" x2="12" y1="2" y2="12"/>';

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          = _svg(P.power);
-export const ICON_STOP_PLAIN    = _svg(P.square);
+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);

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) {
                             </div>
                         </div>
                         <div class="dashboard-target-actions">
-                            <button class="btn btn-icon ${isRunning ? 'btn-warning' : 'btn-success'}" onclick="${isRunning ? `dashboardStopTarget('${target.id}')` : `dashboardStartTarget('${target.id}')`}" title="${isRunning ? t('device.stop') : t('device.start')}">
+                            <button class="dashboard-action-btn ${isRunning ? 'stop' : 'start'}" onclick="${isRunning ? `dashboardStopTarget('${target.id}')` : `dashboardStartTarget('${target.id}')`}" title="${isRunning ? t('device.stop') : t('device.start')}">
                                 ${isRunning ? ICON_STOP_PLAIN : ICON_START}
                             </button>
                         </div>
@@ -629,7 +629,7 @@ function renderDashboardTarget(target, isRunning, devicesMap = {}, cssSourceMap
             </div>
             <div class="dashboard-target-actions">
                 <button class="dashboard-autostart-btn${target.auto_start ? ' active' : ''}" onclick="dashboardToggleAutoStart('${target.id}', ${!target.auto_start})" title="${target.auto_start ? t('autostart.toggle.enabled') : t('autostart.toggle.disabled')}">&#x2605;</button>
-                <button class="btn btn-icon btn-warning" onclick="dashboardStopTarget('${target.id}')" title="${t('device.button.stop')}">${ICON_STOP_PLAIN}</button>
+                <button class="dashboard-action-btn stop" onclick="dashboardStopTarget('${target.id}')" title="${t('device.button.stop')}">${ICON_STOP_PLAIN}</button>
             </div>
         </div>`;
     } else {
@@ -644,7 +644,7 @@ function renderDashboardTarget(target, isRunning, devicesMap = {}, cssSourceMap
             <div class="dashboard-target-metrics"></div>
             <div class="dashboard-target-actions">
                 <button class="dashboard-autostart-btn${target.auto_start ? ' active' : ''}" onclick="dashboardToggleAutoStart('${target.id}', ${!target.auto_start})" title="${target.auto_start ? t('autostart.toggle.enabled') : t('autostart.toggle.disabled')}">&#x2605;</button>
-                <button class="btn btn-icon btn-success" onclick="dashboardStartTarget('${target.id}')" title="${t('device.button.start')}">${ICON_START}</button>
+                <button class="dashboard-action-btn start" onclick="dashboardStartTarget('${target.id}')" title="${t('device.button.start')}">${ICON_START}</button>
             </div>
         </div>`;
     }
@@ -694,7 +694,7 @@ function renderDashboardProfile(profile) {
             </div>
         </div>
         <div class="dashboard-target-actions">
-            <button class="btn btn-icon ${profile.enabled ? 'btn-warning' : 'btn-success'}" onclick="dashboardToggleProfile('${profile.id}', ${!profile.enabled})" title="${profile.enabled ? t('profiles.action.disable') : t('profiles.status.active')}">
+            <button class="dashboard-action-btn ${profile.enabled ? 'stop' : 'start'}" onclick="dashboardToggleProfile('${profile.id}', ${!profile.enabled})" title="${profile.enabled ? t('profiles.action.disable') : t('profiles.status.active')}">
                 ${profile.enabled ? ICON_STOP_PLAIN : ICON_START}
             </button>
         </div>