From 880b7974f460c4d5d82b8549caffc3b5b594c88a Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Fri, 10 Oct 2025 13:12:03 +0100
Subject: [PATCH] style: make connecting notification more subtle with muted
 blue background

---
 src/components/RelayStatusIndicator.tsx |  2 +-
 src/index.css                           | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/RelayStatusIndicator.tsx b/src/components/RelayStatusIndicator.tsx
index c14df77a..0684399d 100644
--- a/src/components/RelayStatusIndicator.tsx
+++ b/src/components/RelayStatusIndicator.tsx
@@ -58,7 +58,7 @@ export const RelayStatusIndicator: React.FC<RelayStatusIndicatorProps> = ({ rela
   if (!localOnlyMode && !offlineMode && !isConnecting) return null
   
   return (
-    <div className="relay-status-indicator" title={
+    <div className={`relay-status-indicator ${isConnecting ? 'connecting' : ''}`} title={
       isConnecting
         ? 'Connecting to relays...'
         : offlineMode 
diff --git a/src/index.css b/src/index.css
index 6249c3e2..70e13c59 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2514,6 +2514,23 @@ body {
   cursor: default;
 }
 
+.relay-status-indicator.connecting {
+  background: rgba(100, 108, 255, 0.15);
+  border: 1px solid rgba(100, 108, 255, 0.25);
+}
+
+.relay-status-indicator.connecting:hover {
+  background: rgba(100, 108, 255, 0.25);
+}
+
+.relay-status-indicator.connecting .relay-status-icon {
+  color: rgba(100, 108, 255, 0.9);
+}
+
+.relay-status-indicator.connecting .relay-status-title {
+  color: rgba(100, 108, 255, 1);
+}
+
 .relay-status-indicator:hover {
   background: rgba(245, 158, 11, 1);
   transform: translateY(-2px);