From 45704931abbac851e2d23ebbd5c0799545c2e70c Mon Sep 17 00:00:00 2001
From: Giorgio Ravera <giorgio.ravera@gmail.com>
Date: Fri, 5 Jun 2026 20:08:19 +0200
Subject: [PATCH] Review css

---
 frontend/css/layout.css | 94 ++++++++++++++++++++++++++++++-----------
 frontend/js/index.js    |  6 +--
 2 files changed, 73 insertions(+), 27 deletions(-)

diff --git a/frontend/css/layout.css b/frontend/css/layout.css
index 74f299f..289ff5b 100644
--- a/frontend/css/layout.css
+++ b/frontend/css/layout.css
@@ -43,6 +43,24 @@ body {
     align-items: center;
 }
 
+.topbar .navbar {
+    padding: 0;
+    background: transparent !important;
+}
+
+.topbar .navbar-collapse {
+    justify-content: flex-end;
+    transition: height 0.2s ease;
+}
+
+.topbar .navbar-toggler {
+    border: none;
+}
+
+.topbar .navbar-toggler:focus {
+    box-shadow: none;
+}
+
 .logo {
     display: flex;
     align-items: center;
@@ -136,7 +154,9 @@ body {
     font-style: italic;
 }
 
-/* Griglia tile */
+/* ================================
+   Griglia tile
+   ================================ */
 .tiles {
     display: grid;
     gap: 16px;
@@ -152,13 +172,16 @@ body {
     padding: 14px;
     box-shadow: 0 3px 6px var(--shadow-soft);
     transition: transform 0.1s ease, box-shadow 0.1s ease;
+    will-change: transform;
     color: var(--text-dark);
+    --icon-color: var(--accent);
 }
 
 .tile:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 10px var(--shadow-strong);
     border-color: var(--accent-hover);
+    --icon-color: var(--accent-hover);
 }
 
 .tile h3 {
@@ -175,8 +198,12 @@ body {
 /* Icone tile */
 .tile-icon {
     font-size: 28px;
-    color: var(--accent);
     margin-bottom: 4px;
+    color: var(--icon-color);
+}
+
+.tile-icon i {
+    color: inherit;
 }
 
 /* ================================
@@ -190,6 +217,9 @@ body {
     padding: 6px 14px;
     font-size: 0.95rem;
     line-height: 1;
+    vertical-align: middle;
+    --icon-color: currentColor;
+    transition: all 0.2s ease;
 }
 
 .btn-primary {
@@ -213,18 +243,6 @@ body {
     filter: brightness(0.9);
 }
 
-.btn-outline-primary {
-    color: var(--accent);
-    border-color: var(--accent);
-    background-color: transparent;
-}
-
-.btn-outline-primary:hover,
-.btn-outline-primary:focus {
-    color: #fff;
-    background-color: var(--accent);
-    border-color: var(--accent);
-}
 
 .btn-primary.btn-login {
     width: 100%;
@@ -244,12 +262,24 @@ body {
     filter: none;
 }
 
-.btn .icon {
-    color: currentColor;
+.btn-outline-primary {
+    color: var(--accent);
+    border-color: var(--accent);
+    background-color: transparent;
 }
 
-.btn .icon:hover {
-    color: inherit;
+.btn-outline-primary:hover,
+.btn-outline-primary:focus {
+    color: #fff;
+    background-color: var(--accent);
+    border-color: var(--accent);
+}
+
+.btn-outline-danger:hover,
+.btn-outline-danger:focus {
+    color: #ffe5e8;
+    background-color: #dc3545;
+    border-color: #dc3545;
 }
 
 /* ================================
@@ -302,18 +332,16 @@ select.form-select:focus,
 /* ================================
    Icons
    ================================ */
-.icon {
+.icon,
+i.bi {
     color: var(--icon-color);
     display: inline-flex;
     align-items: center;
 }
 
-.icon:hover {
-    color: var(--icon-color);
-}
-
 .icon-static {
     --icon-color-hover: var(--icon-color);
+    pointer-events: none;
     margin-right: 6px;
 }
 
@@ -321,6 +349,10 @@ select.form-select:focus,
     cursor: pointer;
 }
 
+.icon-action:hover {
+    color: var(--icon-color-hover);
+}
+
 .icon-placeholder {
     opacity: 0;
     pointer-events: none;
@@ -395,7 +427,7 @@ select.form-select:focus,
    Backup Table
 ================================ */
 
-.table tbody#backupList tr {
+.table tbody#backupList tr > td {
     cursor: pointer;
     transition: background-color 0.15s ease;
 }
@@ -451,6 +483,7 @@ td.actions {
 
 .toast.show {
     opacity: 1;
+    pointer-events: auto;
 }
 
 /* ================================
@@ -519,6 +552,10 @@ td.actions {
     margin-top: 18px;
 }
 
+.modal-backdrop {
+    z-index: 1990;
+}
+
 /* ================================
    Modal "Add Host"
 ================================ */
@@ -603,3 +640,12 @@ td.actions {
         margin-right: 0;
     }
 }
+
+/* ======================================
+   Bootstrap compatibility
+   ====================================== */
+a.tile,
+a.tile:hover {
+    text-decoration: none;
+    color: inherit;
+}
diff --git a/frontend/js/index.js b/frontend/js/index.js
index 2e01732..f8bed2a 100644
--- a/frontend/js/index.js
+++ b/frontend/js/index.js
@@ -1,7 +1,7 @@
 // -------------------------------------------------------
 // IMPORT
 // -------------------------------------------------------
-import { loadModals, showToast, showConfirmModal } from './common.js';
+import { loadModals, showToast, showConfirmModal, handleReload } from './common.js';
 import { serviceIsAlive, serviceCheckHealth , serviceReloadDNS, serviceReloadDHCP, serviceBackupCreate, serviceBackupList, serviceBackupRestore, serviceDeleteBackup, serviceDownloadBackup, serviceUploadBackup } from './services.js';
 
 // -------------------------------------------------------
@@ -120,7 +120,7 @@ function renderBackupList(data) {
         const downloadBtn = document.createElement("button");
         downloadBtn.className = "btn btn-sm btn-outline-primary me-2";
         downloadBtn.title = "Download backup";
-        downloadBtn.innerHTML = `<i class="bi bi-download text-primary"></i>`;
+        downloadBtn.innerHTML = `<i class="bi bi-download"></i>`;
         downloadBtn.setAttribute("data-action", "downloadBackup");
         downloadBtn.setAttribute("data-id", b.name);
         tdActions.appendChild(downloadBtn);
@@ -128,7 +128,7 @@ function renderBackupList(data) {
         const deleteBtn = document.createElement("button");
         deleteBtn.className = "btn btn-sm btn-outline-danger";
         deleteBtn.title = "Delete backup";
-        deleteBtn.innerHTML = `<i class="bi bi-trash-fill text-danger"></i>`;
+        deleteBtn.innerHTML = `<i class="bi bi-trash-fill"></i>`;
         deleteBtn.setAttribute("data-action", "deleteBackup");
         deleteBtn.setAttribute("data-id", b.name);
         tdActions.appendChild(deleteBtn);
-- 
2.47.3