From bdba205be6b2c5d2bf136258f6c0a0d7a216a0c1 Mon Sep 17 00:00:00 2001
From: Fabrice Bellamy <38373466+Lab-8916100448256@users.noreply.github.com>
Date: Sat, 24 Jan 2026 04:25:15 +0100
Subject: [PATCH] Implement #38 (#39)

* Improve error message styling

* Improve error message styling
---
 .../components/dialogs/messageDialog.svelte    | 18 +++++++++++++++---
 src/lib/state/configState.svelte.ts            |  9 ++++++---
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/dialogs/messageDialog.svelte b/src/lib/components/dialogs/messageDialog.svelte
index 1dd29d5..62fd1c9 100644
--- a/src/lib/components/dialogs/messageDialog.svelte
+++ b/src/lib/components/dialogs/messageDialog.svelte
@@ -10,13 +10,25 @@
 <AlertDialog.Root bind:open={state.dialogOpen}>
   <AlertDialog.Content>
     <AlertDialog.Header>
-      <AlertDialog.Title>{state.dialogTitle}</AlertDialog.Title>
-      <AlertDialog.Description>
+      <AlertDialog.Title
+        class={state.dialogType === "error" ? "text-red-500" : ""}
+        >{state.dialogTitle}</AlertDialog.Title
+      >
+      <AlertDialog.Description
+        class={state.dialogType === "error" ? "text-red-500" : ""}
+      >
         {state.dialogMessage}
       </AlertDialog.Description>
     </AlertDialog.Header>
     <AlertDialog.Footer>
-      <AlertDialog.Action onclick={() => (state.dialogOpen = false)}>Okay</AlertDialog.Action>
+      <AlertDialog.Action
+        onclick={() => (state.dialogOpen = false)}
+        class={state.dialogType === "error"
+          ? "bg-red-600 hover:bg-red-700 text-white"
+          : ""}
+      >
+        {state.dialogType === "error" ? "Cancel" : "Okay"}
+      </AlertDialog.Action>
     </AlertDialog.Footer>
   </AlertDialog.Content>
 </AlertDialog.Root>
diff --git a/src/lib/state/configState.svelte.ts b/src/lib/state/configState.svelte.ts
index cdb7730..6f70f07 100644
--- a/src/lib/state/configState.svelte.ts
+++ b/src/lib/state/configState.svelte.ts
@@ -22,6 +22,7 @@ class configState {
   dialogOpen = $state(false);
   dialogTitle = $state("");
   dialogMessage = $state("");
+  dialogType: "success" | "error" = $state("success");
 
   async handleSave() {
     if (device.method === "FIDO" && device.fidoInfo?.options?.clientPin) {
@@ -33,7 +34,7 @@ class configState {
 
     const result = await device.save();
     if (result) {
-      this.showStatusDialog(result.success ? "Success" : "Write Failed", result.msg);
+      this.showStatusDialog(result.success ? "Success" : "Write Failed", result.msg, result.success ? "success" : "error");
     }
   }
 
@@ -47,9 +48,10 @@ class configState {
     }
   }
 
-  showStatusDialog(title: string, message: string) {
+  showStatusDialog(title: string, message: string, type: "success" | "error" = "success") {
     this.dialogTitle = title;
     this.dialogMessage = message;
+    this.dialogType = type;
     this.dialogOpen = true;
   }
 
@@ -88,7 +90,7 @@ class configState {
     const result = await device.changePin(this.isSettingPin ? null : this.currentPin, this.newPin);
     if (result.success) {
       this.setPinDialogOpen = false;
-      this.showStatusDialog("Success", this.isSettingPin ? "PIN set successfully" : "PIN changed successfully");
+      this.showStatusDialog("Success", this.isSettingPin ? "PIN set successfully" : "PIN changed successfully", "success");
     } else {
       this.pinError = result.msg as string;
     }
@@ -119,6 +121,7 @@ class configState {
       this.showStatusDialog(
         "Success",
         `Minimum PIN length updated to ${this.minPinLength} and PIN changed successfully`,
+        "success",
       );
     } else {
       this.minPinError = pinResult.msg as string;