Merge pull request #433 from PR0M3TH3AN/codex/update-revert-video-modal-styles-and-functionality

Use shared button tokens for revert modal actions

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

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();