From ca9a5c72ea7aa7e6ffae1567483493f8f3d37dea Mon Sep 17 00:00:00 2001
From: RossAsscends <124905043+RossAscends@users.noreply.github.com>
Date: Tue, 21 Mar 2023 21:08:15 +0900
Subject: [PATCH] top settings connect icon is now red when disconnected

---
 public/index.html                  | 2 +-
 public/scripts/RossAscends-mods.js | 2 ++
 public/style.css                   | 4 ++++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 15efcc7d4..615afaac7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -82,7 +82,7 @@
 
         <div id="sys-settings-button" class="drawer" style="z-index:3001;">
             <div class="drawer-toggle drawer-header">
-                <div class="drawer-icon icon-connect closedIcon"></div>
+                <div id="API-status-top" class="drawer-icon icon-connect closedIcon"></div>
             </div>
             <div id="rm_api_block" class="drawer-content closedDrawer">
                 <div id="main-API-selector-block">
diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js
index a2f2a97f6..9698a7080 100644
--- a/public/scripts/RossAscends-mods.js
+++ b/public/scripts/RossAscends-mods.js
@@ -187,10 +187,12 @@ function RA_checkOnlineStatus() {
 		$("#send_textarea").attr("placeholder", "Not connected to API!"); //Input bar placeholder tells users they are not connected
 		$("#send_form").css("background-color", "rgba(100,0,0,0.7)"); //entire input form area is red when not connected
 		$("#send_but").css("display", "none"); //send button is hidden when not connected;
+		$("#API-status-top").addClass("redOverlayGlow");
 	} else {
 		if (online_status !== undefined && online_status !== "no_connection") {
 			$("#send_textarea").attr("placeholder", "Type a message..."); //on connect, placeholder tells user to type message
 			$("#send_form").css("background-color", "rgba(0,0,0,0.7)"); //on connect, form BG changes to transprent black
+			$("#API-status-top").removeClass("redOverlayGlow");
 
 			if (!is_send_press && !(selected_group && is_group_generating)) {
 				$("#send_but").css("display", "inline"); //on connect, send button shows
diff --git a/public/style.css b/public/style.css
index 6a48fef2e..fa7b83ce1 100644
--- a/public/style.css
+++ b/public/style.css
@@ -2755,6 +2755,10 @@ label[for="extensions_autoconnect"] {
    transition: all 0.275s;
 }
 
+.redOverlayGlow{
+filter: invert(20%) sepia(100%) saturate(2518%) hue-rotate(353deg) brightness(93%) contrast(125%) drop-shadow(0px 0px 1px #c00) !important;
+}
+
 .drawer-icon.closedIcon {
     /* background-image: url('img/circle-chevron-down-solid.svg'); */
     filter: invert(1);