From 4f4af4029aec9072f470c9b7415cd8ff686b593c Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Wed, 6 Jul 2022 19:29:19 +0200
Subject: [PATCH] UI: Update style of connection status

---
 web/app/src/assets/base.css                 | 4 ++--
 web/app/src/components/ConnectionStatus.vue | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index be954d74..8b20e6c7 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -69,8 +69,8 @@
   --color-worker-status-testing: hsl(166 100% 46%);
   --color-worker-status-offline: var(--color-status-canceled);
 
-  --color-connection-lost-text: hsl(0, 60%, 75%);
-  --color-connection-lost-bg: hsl(0, 80%, 40%);
+  --color-connection-lost-text: hsl(0, 90%, 60%);
+  --color-connection-lost-bg: hsl(0, 50%, 20%);
 }
 
 html,
diff --git a/web/app/src/components/ConnectionStatus.vue b/web/app/src/components/ConnectionStatus.vue
index 448efe05..c870fc99 100644
--- a/web/app/src/components/ConnectionStatus.vue
+++ b/web/app/src/components/ConnectionStatus.vue
@@ -11,13 +11,11 @@ const sockStatus = useSocketStatus();
 <style scoped>
 .socket-status {
   background-color: var(--color-connection-lost-bg);
-  border-radius: 999em;
-  box-shadow: 0 0 1.33em var(--color-connection-lost-bg);
+  border-radius: var(--border-radius);
   color: var(--color-connection-lost-text);
   cursor: help;
   font-size: var(--font-size-sm);
-  font-weight: bold;
-  padding: var(--spacer-xs) var(--spacer);
+  padding: 2px var(--spacer-sm);
   text-align: center;
 }
 </style>