From 337948d02abd4b5ed3b89b41fe8240fd4e0a4eae Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Tue, 5 Jul 2022 19:27:59 +0200
Subject: [PATCH] UI: Style ConnectionStatus indicator

---
 web/app/src/components/ConnectionStatus.vue | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/web/app/src/components/ConnectionStatus.vue b/web/app/src/components/ConnectionStatus.vue
index 66bf2343..448efe05 100644
--- a/web/app/src/components/ConnectionStatus.vue
+++ b/web/app/src/components/ConnectionStatus.vue
@@ -10,19 +10,14 @@ const sockStatus = useSocketStatus();
 
 <style scoped>
 .socket-status {
-  font-size: 1rem;
-
-  min-width: 1.2em;
-  padding: 0.1em 1em;
-  border-radius: 0.5em;
-  text-align: center;
-  margin: 0 0.5em;
-
-  color: var(--color-connection-lost-text);
   background-color: var(--color-connection-lost-bg);
-  box-shadow: 0 0 1em var(--color-connection-lost-bg);
-  border: solid thin var(--color-connection-lost-text);
-
+  border-radius: 999em;
+  box-shadow: 0 0 1.33em var(--color-connection-lost-bg);
+  color: var(--color-connection-lost-text);
   cursor: help;
+  font-size: var(--font-size-sm);
+  font-weight: bold;
+  padding: var(--spacer-xs) var(--spacer);
+  text-align: center;
 }
 </style>