From 404c6f538ed0c68aecf15b57ea4fb0697919dfb4 Mon Sep 17 00:00:00 2001
From: kn <kristiannoergaard@gmail.com>
Date: Mon, 19 Oct 2026 10:57:54 +0200
Subject: [PATCH] (Svelte) Colour the execution status badges by status

The execution list drew running badges in the primary colour, failed
ones in --destructive and finished ones like any other status. When
config.xml sets a primary but no error colour, --destructive is set to
the primary colour, so running and failed builds look the same.

Running is now blue, finished green and failed red, as in the vue2
client (STATUS_CLASSES). The new success and info colours are fixed
and not taken from config.xml.
---
 .../lib/amcf/modules/ModuleExecutionList.svelte    |  5 +++--
 .../src/lib/components/ui/badge/badge.svelte       |  4 ++++
 Client/svelte/src/routes/layout.css                | 14 ++++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/Client/svelte/src/lib/amcf/modules/ModuleExecutionList.svelte b/Client/svelte/src/lib/amcf/modules/ModuleExecutionList.svelte
index df28eb00b..fbbd43a2c 100644
--- a/Client/svelte/src/lib/amcf/modules/ModuleExecutionList.svelte
+++ b/Client/svelte/src/lib/amcf/modules/ModuleExecutionList.svelte
@@ -48,9 +48,10 @@
 		return `${s}s`;
 	}
 
-	function statusVariant (status: string): 'default' | 'destructive' | 'secondary' | 'outline' {
+	function statusVariant (status: string): 'success' | 'info' | 'destructive' | 'secondary' {
 		const s = (status || '').toLowerCase();
-		if (s === 'running' || s === 'inprocess') return 'default';
+		if (s === 'finished') return 'success';
+		if (s === 'running' || s === 'inprocess') return 'info';
 		if (s === 'failed' || s === 'error') return 'destructive';
 		return 'secondary';
 	}
diff --git a/Client/svelte/src/lib/components/ui/badge/badge.svelte b/Client/svelte/src/lib/components/ui/badge/badge.svelte
index e3164ba7f..7850bd397 100644
--- a/Client/svelte/src/lib/components/ui/badge/badge.svelte
+++ b/Client/svelte/src/lib/components/ui/badge/badge.svelte
@@ -11,6 +11,10 @@
 					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
 				destructive:
 					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				success:
+					"bg-success text-success-foreground [a&]:hover:bg-success/90 border-transparent",
+				info:
+					"bg-info text-info-foreground [a&]:hover:bg-info/90 border-transparent",
 				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
 			},
 		},
diff --git a/Client/svelte/src/routes/layout.css b/Client/svelte/src/routes/layout.css
index a0bc5380a..ff6f59fef 100644
--- a/Client/svelte/src/routes/layout.css
+++ b/Client/svelte/src/routes/layout.css
@@ -39,6 +39,12 @@
   /* Destructive */
   --destructive: oklch(0.48 0.195 22);       /* #C8102E */
 
+  /* Status (not overridden by config.xml <colors>) */
+  --success: oklch(0.55 0.15 145);           /* green */
+  --success-foreground: oklch(1.0 0 0);
+  --info: oklch(0.55 0.17 255);              /* blue */
+  --info-foreground: oklch(1.0 0 0);
+
   /* Borders / inputs */
   --border: oklch(0.90 0.004 250);           /* ~#DDDFE3 */
   --input: oklch(0.90 0.004 250);
@@ -82,6 +88,10 @@
   --accent: oklch(0.26 0.01 250);
   --accent-foreground: oklch(0.93 0.005 250);
   --destructive: oklch(0.58 0.195 22);
+  --success: oklch(0.62 0.17 145);
+  --success-foreground: oklch(1.0 0 0);
+  --info: oklch(0.62 0.17 255);
+  --info-foreground: oklch(1.0 0 0);
   --border: oklch(0.32 0.01 250);
   --input: oklch(0.32 0.01 250);
   --ring: oklch(0.58 0.195 22);
@@ -123,6 +133,10 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);