Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): SSH Access sidebar icon — inline key SVG, theme-aware

Browse Source 
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>
This commit is contained in:
librelad 2026-05-26 20:20:16 +01:00
parent 0a25bd5a28
commit 1452c31839
1 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
containers/libreportal/frontend/js/components/config/config-sidebar.js
View File

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