From 1452c31839bbba6685092e43fcb8726684a7e39c Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Tue, 26 May 2026 20:20:16 +0100
Subject: [PATCH] =?UTF-8?q?fix(admin):=20SSH=20Access=20sidebar=20icon=20?=
 =?UTF-8?q?=E2=80=94=20inline=20key=20SVG,=20theme-aware?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous `<img src="/icons/config/security.svg">` icon hardcoded
`stroke="#1e90ff"` (dodger blue) rather than `currentColor`, so on
themes where it should pick up the sidebar foreground colour it just
disappeared or visually clashed. The other Tools / admin sidebar items
(Overview, System, Peers) all use inline SVGs with `stroke=currentColor`
and follow the theme correctly.

Switched SSH Access to an inline key icon in the same style — circle
shackle bottom-left, shaft going up-right to a notched bit. Matches the
'what is this thing' framing: an SSH access page is fundamentally about
managing keys.

security.svg itself is left untouched (might be used elsewhere).

Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../frontend/js/components/config/config-sidebar.js          | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/containers/libreportal/frontend/js/components/config/config-sidebar.js b/containers/libreportal/frontend/js/components/config/config-sidebar.js
index 8024a1c..9d81402 100755
--- a/containers/libreportal/frontend/js/components/config/config-sidebar.js
+++ b/containers/libreportal/frontend/js/components/config/config-sidebar.js
@@ -124,7 +124,10 @@ class ConfigSidebar {
     const sshItem = document.createElement('div');
     sshItem.className = 'category';
     sshItem.setAttribute('data-category', 'ssh-access');
-    sshItem.innerHTML = '<img src="/icons/config/security.svg" alt="SSH Access" style="width: 20px; height: 20px; margin-right: 8px;"/> SSH Access';
+    // Inline key icon (currentColor so it follows the theme — security.svg
+    // hardcodes a fixed blue stroke and so visually goes missing on certain
+    // themes; the other Tools/admin items all use inline SVGs).
+    sshItem.innerHTML = '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:8px;vertical-align:middle"><circle cx="7.5" cy="15.5" r="5.5"></circle><line x1="11" y1="12" x2="21" y2="2"></line><line x1="17" y1="6" x2="20" y2="9"></line><line x1="14" y1="9" x2="17" y2="12"></line></svg> SSH Access';
     sshItem.addEventListener('click', function () {
       window.history.pushState({}, '', window.adminPath('ssh-access'));
       document.querySelectorAll('.category').forEach(function (item) { item.classList.remove('active'); });