From 749d442bd8e222ba0e91f588acfb95eede3934c5 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@noreply.localhost>
Date: Fri, 1 May 2026 15:26:57 -0600
Subject: [PATCH] Update the QueryStatus app theme (closes #61)

---
 styles/Apps/QueryStatus.css | 39 ++++++++++++++++++++++++++++++++++++-
 styles/elements/div.css     |  1 -
 styles/themes/dark.css      | 23 +++++++++++++++++-----
 3 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/styles/Apps/QueryStatus.css b/styles/Apps/QueryStatus.css
index 4f45ff4..0cd64e3 100644
--- a/styles/Apps/QueryStatus.css
+++ b/styles/Apps/QueryStatus.css
@@ -1,4 +1,9 @@
 .taf.QueryStatus {
+	> .window-content {
+		color: var(--query-status-colour);
+		background: var(--query-status-background);
+	}
+
 	.user-list {
 		display: flex;
 		flex-direction: column;
@@ -11,7 +16,8 @@
 			display: flex;
 			flex-direction: column;
 			margin: 0;
-			border: 1px solid rebeccapurple;
+			color: var(--query-status-user-colour);
+			background: var(--query-status-user-background);
 			border-radius: 4px;
 			padding: 4px 8px;
 
@@ -22,6 +28,19 @@
 				/* Same height as the icons used for loading/disconnected */
 				height: 35px;
 			}
+
+			button {
+				color: var(--query-status-user-button-colour);
+				background: var(--query-status-user-button-background);
+
+				&:hover {
+					background: var(--query-status-user-button-hover-background);
+				}
+
+				&:focus-visible {
+					border-color: var(--query-status-user-button-focus);
+				}
+			}
 		}
 	}
 
@@ -29,5 +48,23 @@
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 		gap: 1rem;
+
+		button {
+			color: var(--query-status-control-colour);
+			background: var(--query-status-control-background);
+
+			&:hover {
+				background: var(--query-status-control-hover-background);
+			}
+
+			&:focus-visible {
+				border-color: var(--query-status-control-focus);
+			}
+		}
+	}
+
+	button {
+		border: 2px solid transparent;
+		outline: none;
 	}
 }
diff --git a/styles/elements/div.css b/styles/elements/div.css
index b3d1566..6e77ca1 100644
--- a/styles/elements/div.css
+++ b/styles/elements/div.css
@@ -3,7 +3,6 @@
 		display: inline flex;
 		color: var(--chip-colour);
 		background: var(--chip-background);
-		border: 1px solid var(--chip-border-colour);
 		border-radius: 4px;
 
 		.key {
diff --git a/styles/themes/dark.css b/styles/themes/dark.css
index 97cf099..7f58e62 100644
--- a/styles/themes/dark.css
+++ b/styles/themes/dark.css
@@ -81,10 +81,23 @@
 	--attribute-sheet-toggle-slider-enabled-colour: var(--item-sheet-toggle-slider-enabled-colour);
 	--attribute-sheet-toggle-slider-disabled-colour: 	var(--item-sheet-toggle-slider-disabled-colour);
 
+	/* Query Status App Variables */
+	--query-status-colour: var(--steel-100);
+	--query-status-background: var(--steel-800);
+	--query-status-user-colour: var(--steel-100);
+	--query-status-user-background: var(--steel-700);
+	--query-status-user-button-colour: var(--steel-100);
+	--query-status-user-button-background: var(--steel-600);
+	--query-status-user-button-focus: var(--zinc-100);
+	--query-status-user-button-hover-background: var(--steel-650);
+	--query-status-control-colour: var(--steel-100);
+	--query-status-control-background: var(--steel-600);
+	--query-status-control-focus: var(--zinc-100);
+	--query-status-control-hover-background: var(--steel-650);
+
 	/* Chip Variables */
-	--chip-colour: #fff7ed;
-	--chip-background: #2b3642;
-	--chip-value-colour: #fff7ed;
-	--chip-value-background: #10161d;
-	--chip-border-colour: var(--chip-value-background);
+	--chip-colour: var(--steel-100);
+	--chip-background: var(--steel-600);
+	--chip-value-colour: var(--steel-100);
+	--chip-value-background: var(--steel-500);
 }