From c9d90283ebcc890ba41effaf23f8ee30a7d9bab8 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Mon, 1 Jul 2024 08:31:28 +0200
Subject: [PATCH] chg: [front] Improved socket state UI

---
 src/components/TheSocketConnectionState.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/TheSocketConnectionState.vue b/src/components/TheSocketConnectionState.vue
index 0606c8e..8f48023 100644
--- a/src/components/TheSocketConnectionState.vue
+++ b/src/components/TheSocketConnectionState.vue
@@ -6,9 +6,13 @@
 </script>
 
 <template>
-  <span class="text-slate-900 dark:text-slate-400 shadow-blue-500/50">
+  <span :class="{
+    'px-2 py-1 rounded-md inline-block w-48': true,
+    'text-slate-900 dark:text-slate-400': socketConnected,
+    'text-slate-50 bg-red-600': !socketConnected,
+  }">
     <span class="mr-1">Socket.IO:</span>
     <span v-show="socketConnected" class="font-semibold text-green-600 dark:text-green-400">Connected</span>
-    <span v-show="!socketConnected" class="font-semibold text-red-500">Disconnected</span>
+    <span v-show="!socketConnected" class="font-semibold text-slate-50">Disconnected</span>
   </span>
 </template>
\ No newline at end of file