Implement #38 (#39)

* Improve error message styling

* Improve error message styling

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>

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;