From 077d56ffdfc1ca4dde68d854216dc2552cbc2424 Mon Sep 17 00:00:00 2001
From: Ivan <ivan@quad4.io>
Date: Wed, 8 Apr 2026 16:25:22 -0500
Subject: [PATCH] style(Interface, InterfacesPage): update UI elements with
 improved styling and responsiveness for offline and restart overlays

---
 .../src/frontend/components/interfaces/Interface.vue | 12 ++++++------
 .../components/interfaces/InterfacesPage.vue         |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/meshchatx/src/frontend/components/interfaces/Interface.vue b/meshchatx/src/frontend/components/interfaces/Interface.vue
index 1cd6c07..a8e94fc 100644
--- a/meshchatx/src/frontend/components/interfaces/Interface.vue
+++ b/meshchatx/src/frontend/components/interfaces/Interface.vue
@@ -9,12 +9,12 @@
             <!-- Offline Overlay -->
             <div
                 v-if="!isReticulumRunning"
-                class="absolute inset-0 z-10 flex items-center justify-center bg-white/40 dark:bg-zinc-900/40 backdrop-blur-[1px] rounded-3xl"
+                class="absolute inset-0 z-10 flex items-center justify-center bg-white/20 dark:bg-zinc-900/20 backdrop-blur-[0.5px] rounded-3xl pointer-events-none"
             >
                 <div
-                    class="bg-red-500 text-white px-4 py-2 rounded-full shadow-lg flex items-center gap-2 text-sm font-bold"
+                    class="bg-red-500/90 text-white px-3 py-1.5 rounded-full shadow-lg flex items-center gap-2 text-[10px] font-bold uppercase tracking-wider"
                 >
-                    <MaterialDesignIcon icon-name="lan-disconnect" class="w-4 h-4" />
+                    <MaterialDesignIcon icon-name="lan-disconnect" class="w-3.5 h-3.5" />
                     <span>Reticulum Offline</span>
                 </div>
             </div>
@@ -22,12 +22,12 @@
             <!-- Restart Required Overlay -->
             <div
                 v-if="isReticulumRunning && iface._restart_required"
-                class="absolute inset-0 z-10 flex items-center justify-center bg-white/40 dark:bg-zinc-900/40 backdrop-blur-[1px] rounded-3xl"
+                class="absolute inset-0 z-10 flex items-center justify-center bg-white/20 dark:bg-zinc-900/20 backdrop-blur-[0.5px] rounded-3xl pointer-events-none"
             >
                 <div
-                    class="bg-amber-500 text-white px-4 py-2 rounded-full shadow-lg flex items-center gap-2 text-sm font-bold animate-pulse"
+                    class="bg-amber-500/90 text-white px-3 py-1.5 rounded-full shadow-lg flex items-center gap-2 text-[10px] font-bold uppercase tracking-wider"
                 >
-                    <MaterialDesignIcon icon-name="restart" class="w-4 h-4" />
+                    <MaterialDesignIcon icon-name="restart" class="w-3.5 h-3.5" />
                     <span>{{ $t("interfaces.restart_required") }}</span>
                 </div>
             </div>
diff --git a/meshchatx/src/frontend/components/interfaces/InterfacesPage.vue b/meshchatx/src/frontend/components/interfaces/InterfacesPage.vue
index 9d33158..be5681a 100644
--- a/meshchatx/src/frontend/components/interfaces/InterfacesPage.vue
+++ b/meshchatx/src/frontend/components/interfaces/InterfacesPage.vue
@@ -6,7 +6,7 @@
             <div class="p-3 md:p-6 space-y-4 w-full flex-1">
                 <div
                     v-if="showRestartReminder"
-                    class="bg-gradient-to-r from-amber-500 to-orange-500 text-white rounded-3xl shadow-xl p-4 flex flex-wrap gap-3 items-center"
+                    class="bg-amber-600 text-white rounded-3xl shadow-xl p-4 flex flex-wrap gap-3 items-center"
                 >
                     <div class="flex items-center gap-3">
                         <MaterialDesignIcon icon-name="alert" class="w-6 h-6" />