From 236d7ea585b9bea73b313cc0c53b4aeefd05cac2 Mon Sep 17 00:00:00 2001
From: ToxykAuBleu <46644925+ToxykAuBleu@users.noreply.github.com>
Date: Mon, 5 May 2025 09:04:37 +0000
Subject: [PATCH] Adding new maintenance status to theme page.

---
 src/lib/components/manage/themeInfo.svelte | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/manage/themeInfo.svelte b/src/lib/components/manage/themeInfo.svelte
index adaf5b5..3cf8858 100644
--- a/src/lib/components/manage/themeInfo.svelte
+++ b/src/lib/components/manage/themeInfo.svelte
@@ -35,7 +35,8 @@
     colorsJ: {
       UP: "#4ead94",
       DOWN: "#ca3038",
-      DEGRADED: "#e6ca61"
+      DEGRADED: "#e6ca61",
+      MAINTENANCE: "#6699cc",
     },
     fontJ: {
       cssSrc:
@@ -296,7 +297,7 @@
       <div>
         <p class="font-medium">Status Colors</p>
         <p class=" text-xs font-semibold text-muted-foreground">
-          Choose the colors for the monitor. You can choose between UP, DEGRADED, and DOWN.
+          Choose the colors for the monitor. You can choose between UP, DEGRADED, DOWN and MAINTENANCE.
         </p>
       </div>
 
@@ -343,6 +344,20 @@
             }}
           />
         </div>
+        <div class="relative">
+          <ColorPicker
+            bind:hex={themeData.colorsJ.MAINTENANCE}
+            position="responsive"
+            isAlpha={false}
+            isDark={$mode == "dark"}
+            --input-size="16px"
+            isTextInput={true}
+            label="MAINTENANCE"
+            on:input={(event) => {
+              themeData.colorsJ.MAINTENANCE = event.detail.hex;
+            }}
+          />
+        </div>
       </div>
       <hr />
       <p class="font-medium">