From 7329d632d129b3d69ab130d257598458230b7d26 Mon Sep 17 00:00:00 2001
From: Giorgio Ravera <giorgio.ravera@gmail.com>
Date: Thu, 28 May 2026 10:18:47 +0200
Subject: [PATCH] Changed icons & minor graphical review

---
 frontend/aliases.html      |  2 +-
 frontend/css/layout.css    | 18 +++++++++++++++++-
 frontend/css/variables.css |  9 ++++++++-
 frontend/devices.html      |  2 +-
 frontend/hosts.html        |  2 +-
 frontend/index.html        | 12 +++++-------
 frontend/leases.html       |  2 +-
 frontend/modals.html       | 20 ++++++++++----------
 8 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/frontend/aliases.html b/frontend/aliases.html
index 4321002..0e77aea 100644
--- a/frontend/aliases.html
+++ b/frontend/aliases.html
@@ -68,7 +68,7 @@
                 <!-- Title -->
                 <div class="col-12 col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
-                        <span class="title-icon">🖧</span>
+                        <span class="title-icon"><i class="bi bi-diagram-2"></i></span>
                         <span class="section-title">Aliases List</span>
                     </h2>
                 </div>
diff --git a/frontend/css/layout.css b/frontend/css/layout.css
index 82a079a..d2a4c1b 100644
--- a/frontend/css/layout.css
+++ b/frontend/css/layout.css
@@ -430,10 +430,26 @@ td.actions {
     padding: 20px 24px;
     border-left: 4px solid var(--accent);
     border-radius: 6px;
-    width: 320px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.25);
 }
 
+.modal-content-sm {
+    width: 320px;
+}
+
+.modal-content-md {
+    width: 500px;
+}
+
+.modal-content-lg {
+    width: 800px;
+}
+
+.modal-content-xl {
+    width: 95vw;
+    max-width: 1200px;
+}
+
 .modal-content h3 {
     margin: 0 0 14px 0;
     font-size: 1.2rem;
diff --git a/frontend/css/variables.css b/frontend/css/variables.css
index 2b1d835..add5ba1 100644
--- a/frontend/css/variables.css
+++ b/frontend/css/variables.css
@@ -3,6 +3,7 @@
    ================================ */
 :root {
     --accent: #4da3ff;
+    --accent-rgb: 77, 163, 255;
     --accent-hover: #1f8bff;
 
     --bg-dark: #111;
@@ -20,4 +21,10 @@
 
     --icon-color: var(--accent);
     --icon-color-hover: var(--accent-hover);
-}
+
+    --bg-hover: rgba(0, 0, 0, 0.04);
+    --bg-hover-accent: rgba(var(--accent-rgb), 0.08);
+
+    --bg-selected: rgba(var(--accent-rgb), 0.12);
+    --border-selected: rgba(var(--accent-rgb), 0.4);
+}
\ No newline at end of file
diff --git a/frontend/devices.html b/frontend/devices.html
index 3b9d857..fc24525 100644
--- a/frontend/devices.html
+++ b/frontend/devices.html
@@ -68,7 +68,7 @@
                 <!-- Title -->
                 <div class="col-12 col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
-                        <span class="title-icon">🖧</span>
+                        <span class="title-icon"><i class="bi bi-diagram-3-fill"></i></span>
                         <span class="section-title">Devices List</span>
                     </h2>
                 </div>
diff --git a/frontend/hosts.html b/frontend/hosts.html
index 00bd53b..d995379 100644
--- a/frontend/hosts.html
+++ b/frontend/hosts.html
@@ -68,7 +68,7 @@
                 <!-- Title -->
                 <div class="col-12 col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
-                        <span class="title-icon">🖧</span>
+                        <span class="title-icon"><i class="bi bi-hdd-network"></i></span>
                         <span class="section-title">Hosts List</span>
                     </h2>
                 </div>
diff --git a/frontend/index.html b/frontend/index.html
index f317eed..13b3840 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -65,7 +65,7 @@
                 <!-- Title -->
                 <div class="col-12 col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
-                        <span class="title-icon">🖧</span>
+                        <span class="title-icon"><i class="bi bi-grid me-2"></i></span>
                         <span class="section-title">Dashboard</span>
                     </h2>
                 </div>
@@ -94,7 +94,7 @@
 
             <!-- DHCP -->
             <div class="tile">
-                <div class="tile-icon"><i class="bi bi-database-gear"></i></div>
+                <div class="tile-icon"><i class="bi bi-broadcast"></i></div>
                 <h3>DHCP (Kea)</h3>
                 <p>Pools, leases, reservations.</p>
                 <div class="mt-2 d-flex gap-2 flex-wrap">
@@ -117,16 +117,14 @@
 
             <!-- Aliases -->
             <a href="/aliases" class="tile text-decoration-none">
-                <div class="tile-icon"><i class="bi bi-hdd-network"></i></div>
+                <div class="tile-icon"><i class="bi bi-diagram-2"></i></div>
                 <h3>Aliases</h3>
                 <p>Inventario alias DNS.</p>
             </a>
 
             <!-- Devices Status -->
             <a href="/devices" class="tile text-decoration-none">
-                <div class="tile-icon">
-                    <i class="bi bi-card-list"></i>
-                </div>
+                <div class="tile-icon"><i class="bi bi-diagram-3-fill"></i></div>
                 <h3>Devices</h3>
                 <p>Device status (Host + DHCP).</p>
             </a>
@@ -140,7 +138,7 @@
 
             <!-- Backup & Restore -->
             <div class="tile">
-                <div class="tile-icon"><i class="bi bi-save"></i></div>
+                <div class="tile-icon"><i class="bi bi-arrow-counterclockwise"></i></div>
                 <h3>Backup &amp; Restore</h3>
                 <p>Esecuzione backup e gestione archivi.</p>
 
diff --git a/frontend/leases.html b/frontend/leases.html
index ad29feb..b6df996 100644
--- a/frontend/leases.html
+++ b/frontend/leases.html
@@ -68,7 +68,7 @@
                 <!-- Title -->
                 <div class="col-12 col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
-                        <span class="title-icon">🖧</span>
+                        <span class="title-icon"><i class="bi bi-broadcast"></i></span>
                         <span class="section-title">DHCP Leases</span>
                     </h2>
                 </div>
diff --git a/frontend/modals.html b/frontend/modals.html
index adcd026..42c65c1 100644
--- a/frontend/modals.html
+++ b/frontend/modals.html
@@ -1,12 +1,12 @@
 <!-- AddHost -->
 <div class="modal fade" id="addHostModal" tabindex="-1" aria-labelledby="addHostTitle" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered"><!-- modal-sm|md|lg se vuoi cambiare -->
-        <div class="modal-content addhost-modal">
+        <div class="modal-content modal-content-sm addhost-modal">
             <!-- Header scuro con logo/brand -->
             <div class="modal-header addhost-header">
                 <div class="d-flex align-items-center gap-2">
                     <!-- Emoji o icona -->
-                    <span class="title-icon" aria-hidden="true">🖧</span>
+                    <span class="title-icon" aria-hidden="true"><i class="bi bi-hdd-network"></i></span>
                     <h5 class="modal-title mb-0" id="addHostTitle">Aggiungi Host</h5>
                 </div>
                 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Chiudi"></button>
@@ -76,12 +76,12 @@
 <!-- AddAlias -->
 <div class="modal fade" id="addAliasModal" tabindex="-1" aria-labelledby="addAliasTitle" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered"><!-- modal-sm|md|lg se vuoi cambiare -->
-        <div class="modal-content addhost-modal">
+        <div class="modal-content modal-content-sm addhost-modal">
             <!-- Header scuro con logo/brand -->
             <div class="modal-header addhost-header">
                 <div class="d-flex align-items-center gap-2">
                     <!-- Emoji o icona -->
-                    <span class="title-icon" aria-hidden="true">🖧</span>
+                    <span class="title-icon" aria-hidden="true"><i class="bi bi-diagram-2"></i></span>
                     <h5 class="modal-title mb-0" id="addAliasTitle">Aggiungi Alias</h5>
                 </div>
                 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Chiudi"></button>
@@ -138,13 +138,13 @@
     </div>
 </div>
 
-<!-- Modal Restorebackup -->
+<!-- Modal Restore backup -->
 <div id="restoreModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="restoreTitle">
-    <div class="modal-content addhost-modal">
+    <div class="modal-content modal-content-xl addhost-modal">
         <div class="addhost-header d-flex justify-content-between align-items-center">
             <div class="d-flex align-items-center gap-2">
-                <span class="title-icon">💾</span>
-                <span id="restoreTitle" class="modal-title">Execute Restore</span>
+                <span class="title-icon"><i class="bi bi-arrow-counterclockwise"></i></span>
+                <span id="restoreTitle" class="modal-title">Restore Backup</span>
             </div>
             <button type="button" class="btn-close" title="Close" aria-label="Close" data-action="closeRestoreModal"></button>
         </div>
@@ -165,10 +165,10 @@
 <!-- Modal Health -->
 <div id="healthModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="healthTitle">
     <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content addhost-modal">
+        <div class="modal-content modal-content-md addhost-modal">
             <div class="addhost-header d-flex justify-content-between align-items-center">
                 <div class="d-flex align-items-center gap-2">
-                    <span class="title-icon">❤️‍🩹</span>
+                    <span class="title-icon"><i class="bi bi-heart-pulse"></i></span>
                     <span id="healthTitle" class="modal-title">Health Status</span>
                 </div>
                 <button type="button" class="btn-close" title="Close" aria-label="Close" data-action="closeHealthModal"></button>
-- 
2.47.3