From 8316800ceb2dc8994d5f92ccdec426f701898214 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Fri, 10 Oct 2025 23:07:37 -0400
Subject: [PATCH] Use shared button styles in revert modal

---
 components/revert-video-modal.html |  5 +++--
 js/ui/components/RevertModal.js    | 15 ++++++---------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/revert-video-modal.html b/components/revert-video-modal.html
index 8671cdd8..818b9c07 100644
--- a/components/revert-video-modal.html
+++ b/components/revert-video-modal.html
@@ -188,14 +188,15 @@
           <button
             type="button"
             id="cancelRevertVideo"
-            class="w-full rounded-md bg-panel px-4 py-2 text-text hover:bg-panel focus:outline-none focus:ring-2 focus:ring-info focus:ring-offset-2 focus:ring-offset-surface sm:w-auto"
+            class="btn-ghost w-full sm:w-auto"
           >
             Cancel
           </button>
           <button
             type="button"
             id="confirmRevertVideo"
-            class="w-full rounded-md bg-critical px-4 py-2 text-text hover:bg-critical-strong focus:outline-none focus:ring-2 focus:ring-critical-strong focus:ring-offset-2 focus:ring-offset-surface disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
+            class="btn w-full sm:w-auto"
+            data-variant="critical"
             disabled
           >
             Revert to selected version
diff --git a/js/ui/components/RevertModal.js b/js/ui/components/RevertModal.js
index 17ba2fea..e1241d32 100644
--- a/js/ui/components/RevertModal.js
+++ b/js/ui/components/RevertModal.js
@@ -213,16 +213,15 @@ export class RevertModal {
       this.confirmButton.classList.remove("cursor-wait");
     }
 
-    const toggleDisabledStyles = (button) => {
+    const enableButton = (button) => {
       if (!button) {
         return;
       }
       button.disabled = false;
-      button.classList.remove("opacity-60", "cursor-not-allowed");
     };
 
-    toggleDisabledStyles(this.cancelButton);
-    toggleDisabledStyles(this.closeButton);
+    enableButton(this.cancelButton);
+    enableButton(this.closeButton);
   }
 
   setupModalAccessibility() {
@@ -1025,17 +1024,15 @@ export class RevertModal {
       this.confirmButton.classList.toggle("cursor-wait", this.busy);
     }
 
-    const toggleDisabledStyles = (button) => {
+    const toggleInteractionDisabled = (button) => {
       if (!button) {
         return;
       }
       button.disabled = this.busy;
-      button.classList.toggle("opacity-60", this.busy);
-      button.classList.toggle("cursor-not-allowed", this.busy);
     };
 
-    toggleDisabledStyles(this.cancelButton);
-    toggleDisabledStyles(this.closeButton);
+    toggleInteractionDisabled(this.cancelButton);
+    toggleInteractionDisabled(this.closeButton);
 
     if (!this.busy) {
       this.updateConfirmationState();