From 8720cf9624b930828f2c843b4e8db363a0b8b9ae Mon Sep 17 00:00:00 2001
From: FBarrca <201800222@alu.comillas.edu>
Date: Tue, 7 Jan 2025 12:55:03 +0100
Subject: [PATCH] Use classes insted of the style tag

---
 src/modules/WidgetExtension.ts | 21 +++++++++++++++++----
 styles.css                     |  9 +++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/modules/WidgetExtension.ts b/src/modules/WidgetExtension.ts
index 9baae0e..e18088a 100644
--- a/src/modules/WidgetExtension.ts
+++ b/src/modules/WidgetExtension.ts
@@ -95,6 +95,13 @@ class FloatingWidget extends WidgetType {
     public override destroy(): void {
         this.textFieldView?.destroy();
         this.innerDom.empty();
+
+        this.submitButton.remove();
+        this.loaderElement.remove();
+
+        if (this.acceptButton) this.acceptButton.remove();
+        if (this.discardButton) this.discardButton.remove();
+
         this.textFieldView = undefined;
         this.outerEditorView = null;
     }
@@ -152,7 +159,8 @@ class FloatingWidget extends WidgetType {
     }
 
     private createLoader() {
-        this.loaderElement = this.innerDom.createEl("div", { cls: "loader", attr: { style: "display: none;" } });
+        this.loaderElement = this.innerDom.createEl("div", { cls: "loader" });
+        this.toggleLoading(false);
     }
 
     /**
@@ -192,8 +200,13 @@ class FloatingWidget extends WidgetType {
      * @param isLoading - Whether to show the loader.
      */
     private toggleLoading(isLoading: boolean) {
-        this.submitButton.style.display = isLoading ? "none" : "flex";
-        this.loaderElement.style.display = isLoading ? "flex" : "none";
+        if (isLoading) {
+            this.submitButton.classList.add("hidden");
+            this.loaderElement.classList.remove("hidden");
+        } else {
+            this.submitButton.classList.remove("hidden");
+            this.loaderElement.classList.add("hidden");
+        }
     }
 
 
@@ -201,7 +214,7 @@ class FloatingWidget extends WidgetType {
      * Transitions the widget to show Accept, Discard, and Reload buttons.
      */
     private showActionButtons() {
-        this.submitButton.style.display = "none";
+        this.submitButton.classList.add("hidden");
         this.createAcceptButton();
         this.createDiscardButton();
     }
diff --git a/styles.css b/styles.css
index c78e5af..2302509 100644
--- a/styles.css
+++ b/styles.css
@@ -65,6 +65,15 @@
 	background: var(--background-primary);
 	animation: l5 1s infinite linear alternate;
 	margin: 0 20px 0 26px;
+	display: flex;
+}
+.loader.hidden {
+	visibility: hidden;
+	opacity: 0;
+}
+
+.hidden {
+	display: none;
 }
 
 @keyframes l5 {