Modal: Improve styling of ConfirmationModal

liamcain · Oct 25, 2023 · 0b51839 · 0b51839
1 parent aa03d6c
commit 0b51839
Showing 1 changed file with 20 additions and 15 deletions.
diff --git a/src/modal.ts b/src/modal.ts
@@ -11,30 +11,35 @@ interface IConfirmationDialogParams {
 export class ConfirmationModal extends Modal {
   private config: IConfirmationDialogParams;
   private accepted: boolean;
+  private buttonContainerEl: HTMLElement;
 
   constructor(app: App, config: IConfirmationDialogParams) {
     super(app);
     this.config = config;
 
     const { cta, onAccept, text, title } = config;
 
-    this.contentEl.createEl("h2", { text: title });
-    this.contentEl.createEl("p", { text });
-    this.contentEl
-      .createEl("button", { text: "Never mind" })
-      .addEventListener("click", () => {
-        this.close();
-      });
+		this.containerEl.addClass('mod-confirmation');
+    this.titleEl.setText(title);
+    this.contentEl.setText(text);
+
+		this.buttonContainerEl = this.modalEl.createDiv('modal-button-container');
+
+    const acceptBtnEl = this.buttonContainerEl.createEl("button", {
+      cls: "mod-cta",
+      text: cta,
+    });
+    acceptBtnEl.addEventListener("click", async (e) => {
+      e.preventDefault();
+      this.accepted = true;
+      this.close();
+      onAccept(e);
+    });
 
-    this.contentEl
-      .createEl("button", {
-        cls: "mod-cta",
-        text: cta,
-      })
-      .addEventListener("click", async (e) => {
-        this.accepted = true;
+    const cancelBtnEl = this.buttonContainerEl.createEl("button", { text: "Never mind" });
+    cancelBtnEl.addEventListener("click", e => {
+        e.preventDefault();
         this.close();
-        setTimeout(() => onAccept(e), 20);
       });
   }