From 306b24988f0719e4cdd6f20749256c3463a22354 Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Sat, 12 Oct 2024 23:13:01 +0100
Subject: [PATCH] "spot" colours for sidebar items

---
 apps/home/static/home/css/sidebar.css | 51 +++++++++++++++++++++++++--
 apps/home/static/home/js/servers.js   |  6 ++--
 2 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/apps/home/static/home/css/sidebar.css b/apps/home/static/home/css/sidebar.css
index 5e596b1..e7ab242 100644
--- a/apps/home/static/home/css/sidebar.css
+++ b/apps/home/static/home/css/sidebar.css
@@ -148,7 +148,7 @@
 }
 
 
-/* Content - Servers */
+/* Content (Servers) */
 
 .sidebar .sidebar-content .sidebar-item {
     position: relative;
@@ -167,7 +167,52 @@
     background-color: var(--bs-body-bg);
 }
 
-.sidebar .sidebar-content .sidebar-item.is-not-operational::before {
+/* Content Alerts */
+
+.sidebar .sidebar-content .sidebar-item.spot::before {
+    content: "";
+    transition: 0.1s ease;
+    transform: translate(-100%, -50%);
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background-color: var(--bs-body-bg);
+}
+
+.sidebar .sidebar-content .sidebar-item.spot:not(:disabled):hover::before,
+.sidebar .sidebar-content .sidebar-item.spot:not(:disabled):focus::before,
+.sidebar .sidebar-content .sidebar-item.spot.active::before {
+    transition: 0.15s ease;
+    width: 0.25rem;
+    height: 60px;
+    border-radius: 0.25rem 0 0 0.25rem;
+}
+
+/* Content Alerts Colours */
+
+.sidebar .sidebar-content .sidebar-item.spot.spot-primary::before {
+    background-color: var(--bs-primary);
+}
+.sidebar .sidebar-content .sidebar-item.spot.spot-secondary::before {
+    background-color: var(--bs-secondary);
+}
+.sidebar .sidebar-content .sidebar-item.spot.spot-success::before {
+    background-color: var(--bs-success);
+}
+.sidebar .sidebar-content .sidebar-item.spot.spot-danger::before {
+    background-color: var(--bs-danger);
+}
+.sidebar .sidebar-content .sidebar-item.spot.spot-warning::before {
+    background-color: var(--bs-warning);
+}
+.sidebar .sidebar-content .sidebar-item.spot.spot-info::before {
+    background-color: var(--bs-info);
+}
+
+/* .sidebar .sidebar-content .sidebar-item.is-not-operational::before {
     content: "";
     position: absolute;
     left: 0;
@@ -187,7 +232,7 @@
     width: 0.25rem;
     height: 60px;
     border-radius: 0.25rem 0 0 0.25rem;
-}
+} */
 
 .sidebar .sidebar-content .sidebar-item .sidebar-item-image {
     display: flex;
diff --git a/apps/home/static/home/js/servers.js b/apps/home/static/home/js/servers.js
index 29ae384..e66c5a6 100644
--- a/apps/home/static/home/js/servers.js
+++ b/apps/home/static/home/js/servers.js
@@ -67,7 +67,7 @@ const fetchChannels = async serverId => {
     $(".sidebar .sidebar-item").prop("disabled", true);
 
     try {
-        $(`.sidebar .sidebar-item[data-id="${serverId}"]`).removeClass("is-not-operational");
+        $(`.sidebar .sidebar-item[data-id="${serverId}"]`).removeClass("spot spot-danger");
         channels = await ajaxRequest(`/generate-channels?guild=${serverId}`, "GET");
         _loadedChannels[serverId] = channels;
     }
@@ -113,7 +113,7 @@ const rateLimitedLoadingChannels = retryAfterSeconds => {
 
 const notAuthorisedLoadingChannels = serverId => {
     // Mark the sidebar item as non-operational
-    $(`.sidebar .sidebar-item[data-id="${serverId}"]`).addClass("is-not-operational");
+    $(`.sidebar .sidebar-item[data-id="${serverId}"]`).addClass("spot spot-danger");
 
     const inviteBotToServer = () => {
         window.open(
@@ -173,7 +173,7 @@ function createSelectButton(serverData) {
     // Show inoperational status, also, `isBotOperatioanl` can be null,
     // so we can't rely on it's truthy value.
     if (isBotOperational === false) {
-        template.find(".sidebar-item").addClass("is-not-operational");
+        template.find(".sidebar-item").addClass("spot spot-danger");
     }
 
     // Bind the button for selecting this server