Merge pull request #11092 from overleaf/jel-recompile-btn

[web] Add `data-ol-loading` button style

GitOrigin-RevId: 75230fee0e4c1183f389d08b0253402e4fc375b0

services/web/frontend/js/features/pdf-preview/components/pdf-compile-button-inner.tsx

@@ -37,6 +37,7 @@ function PdfCompileButtonInner({
         onClick={() => startCompile()}
         aria-label={compileButtonLabel}
         disabled={compiling}
+        data-ol-loading={compiling}
       >
         <Icon type="refresh" spin={compiling} />
         <span className="toolbar-hide-medium toolbar-hide-small btn-recompile-label">

services/web/frontend/stylesheets/core/mixins.less

@@ -550,9 +550,13 @@
 }
 
 .btn-bordered() {
-  color: @content-primary;
-  background-color: @white;
-  border-color: @border-color-base;
+  @btn-bordered-color: @content-primary;
+  @btn-bordered-background-color: @white;
+  @btn-bordered-border-color: @border-color-base;
+
+  color: @btn-bordered-color;
+  background-color: @btn-bordered-background-color;
+  border-color: @btn-bordered-border-color;
   border-width: @border-size;
 
   &:hover {
@@ -589,12 +593,23 @@
       color: @content-disabled;
     }
   }
+
+  &[data-ol-loading='true'] {
+    // use the default state colors when in a loading state
+    color: @btn-bordered-color!important;
+    background-color: @btn-bordered-background-color!important;
+    border-color: @btn-bordered-border-color!important;
+  }
 }
 
 .btn-borderless(@color: @white; @background: @brand-primary; @background-hover: @btn-primary-hover-bg-color) {
-  color: @color;
-  background-color: @background;
-  border-color: @background; // add a border that is same as background color so that the height matches the btn-bordered style
+  @btn-borderless-color: @color;
+  @btn-borderless-background-color: @background;
+  @btn-borderless-border-color: @background;
+
+  color: @btn-borderless-color;
+  background-color: @btn-borderless-background-color;
+  border-color: @btn-borderless-border-color; // add a border that is same as background color so that the height matches the btn-bordered style
   border-width: @border-size;
 
   &:hover {
@@ -634,6 +649,13 @@
       color: @content-disabled;
     }
   }
+
+  &[data-ol-loading='true'] {
+    // use the default state colors when in a loading state
+    color: @btn-borderless-color!important;
+    background-color: @btn-borderless-background-color!important;
+    border-color: @btn-borderless-border-color!important;
+  }
 }
 
 // Tables