From 4ba2fffdf14c6daab2c98e0eeb1fc25258cdb1b4 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <jessica.lawshe@overleaf.com>
Date: Mon, 9 Jan 2023 10:20:42 -0600
Subject: [PATCH] Merge pull request #11092 from overleaf/jel-recompile-btn

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

GitOrigin-RevId: 75230fee0e4c1183f389d08b0253402e4fc375b0
---
 .../components/pdf-compile-button-inner.tsx   |  1 +
 .../web/frontend/stylesheets/core/mixins.less | 34 +++++++++++++++----
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-compile-button-inner.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-compile-button-inner.tsx
index 4fb4914187..9c99b0ef19 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-compile-button-inner.tsx
+++ b/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">
diff --git a/services/web/frontend/stylesheets/core/mixins.less b/services/web/frontend/stylesheets/core/mixins.less
index 8675a617c3..cc30a2931e 100755
--- a/services/web/frontend/stylesheets/core/mixins.less
+++ b/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