From 96512c178e7a311e2f2c0d0cd8406e5690c04ba2 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 27 Aug 2023 22:38:42 +0300
Subject: [PATCH] More readable no connection color.

---
 public/index.html                          |  1 -
 public/scripts/extensions/hypebot/index.js |  2 +-
 public/style.css                           | 30 ++++++----------------
 3 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/public/index.html b/public/index.html
index 6c28f84aa..1c489eaea 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2062,7 +2062,6 @@
                             <div class="online_status_indicator4"></div>
                             <div class="online_status_text4">No connection...</div>
                         </div>
-                        <br>
                     </div>
                 </div>
                 <div class="flex-container alignitemscenter spaceBetween wide100p">
diff --git a/public/scripts/extensions/hypebot/index.js b/public/scripts/extensions/hypebot/index.js
index 11430226b..b972ac803 100644
--- a/public/scripts/extensions/hypebot/index.js
+++ b/public/scripts/extensions/hypebot/index.js
@@ -91,7 +91,7 @@ async function generateHypeBot() {
     }
 
     if (!secret_state[SECRET_KEYS.NOVEL]) {
-        setHypeBotText('<span class="hypebot_nokey">No API key found. Please enter your API key in the NovelAI API Settings</span>');
+        setHypeBotText('<div class="hypebot_nokey">No API key found. Please enter your API key in the NovelAI API Settings to use the HypeBot.</div>');
         return;
     }
 
diff --git a/public/style.css b/public/style.css
index 3bc531046..c6276a87e 100644
--- a/public/style.css
+++ b/public/style.css
@@ -517,7 +517,7 @@ hr {
 }
 
 #send_form.no-connection {
-    background-color: rgba(100, 0, 0, 0.5) !important;
+    background-color: var(--crimson70a) !important;
 }
 
 #send_but_sheld {
@@ -1980,14 +1980,19 @@ grammarly-extension {
 
 /* ------ online status indicators and texts. 2 = kobold AI, 3 = Novel AI  ----------*/
 #online_status2,
+#online_status3,
 #online_status_horde,
 .online_status4 {
-    opacity: 0.5;
+    opacity: 0.8;
     margin-top: 2px;
     margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
 }
 
 #online_status_indicator2,
+#online_status_indicator3,
 #online_status_indicator_horde,
 .online_status_indicator4 {
     border-radius: 7px;
@@ -1998,32 +2003,13 @@ grammarly-extension {
 }
 
 #online_status_text2,
+#online_status_text3,
 #online_status_text_horde,
 .online_status_text4 {
     margin-left: 4px;
     display: inline-block;
 }
 
-#online_status3 {
-    opacity: 0.5;
-    margin-top: 2px;
-
-    margin-bottom: 30px;
-}
-
-#online_status_indicator3 {
-    border-radius: 7px;
-    width: 14px;
-    height: 14px;
-    background-color: red;
-    display: inline-block;
-}
-
-#online_status_text3 {
-    margin-left: 4px;
-    display: inline-block;
-}
-
 #horde_model {
     height: 150px;
 }