From 55f838193a4ff615efccb5eb541c74f751d82a78 Mon Sep 17 00:00:00 2001
From: Lucio Lelii <lucio.lelii@isti.cnr.it>
Date: Wed, 30 Sep 2026 11:06:16 +0200
Subject: [PATCH] style(editor): modernize zoom controls

---
 src/app/shared/rete-editor/rete-editor.css  | 21 ++++++++++++---------
 src/app/shared/rete-editor/rete-editor.html |  4 ++--
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/app/shared/rete-editor/rete-editor.css b/src/app/shared/rete-editor/rete-editor.css
index 5a1aff5..99f62c0 100644
--- a/src/app/shared/rete-editor/rete-editor.css
+++ b/src/app/shared/rete-editor/rete-editor.css
@@ -170,25 +170,28 @@
   font-weight: 800;
   letter-spacing: 0.08em;
   text-transform: uppercase;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .rete-editor-toolbar-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 38px;
-  height: 38px;
-  border: 1px solid rgba(203, 213, 225, 0.95);
-  border-radius: 12px;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
-  color: #0f172a;
-  font-size: 16px;
+  width: 36px;
+  height: 36px;
+  border: 1px solid #d8e0ea;
+  border-radius: 10px;
+  background: #ffffff;
+  color: #334155;
+  font-size: 14px;
   transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
 }
 
 .rete-editor-toolbar-btn:hover {
-  border-color: #94a3b8;
-  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
+  border-color: #60a5fa;
+  background: #eff6ff;
+  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
   transform: translateY(-1px);
 }
 
diff --git a/src/app/shared/rete-editor/rete-editor.html b/src/app/shared/rete-editor/rete-editor.html
index 95a48b4..6096b74 100644
--- a/src/app/shared/rete-editor/rete-editor.html
+++ b/src/app/shared/rete-editor/rete-editor.html
@@ -59,14 +59,14 @@
         class="rete-editor-toolbar-btn"
         (click)="zoomIn($event)"
         aria-label="Zoom in">
-        <i class="bi bi-zoom-in" aria-hidden="true"></i>
+        <i class="bi bi-plus-lg" aria-hidden="true"></i>
       </button>
       <button
         type="button"
         class="rete-editor-toolbar-btn"
         (click)="zoomOut($event)"
         aria-label="Zoom out">
-        <i class="bi bi-zoom-out" aria-hidden="true"></i>
+        <i class="bi bi-dash-lg" aria-hidden="true"></i>
       </button>
     </section>
   </div>