From 2debca072781edec2443d209ac55f31a60383d1a Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <jessica.lawshe@overleaf.com>
Date: Thu, 17 Nov 2022 11:53:55 -0600
Subject: [PATCH] Merge pull request #10471 from overleaf/jel-disabled-btn

[web] Style updates for `btn-danger` and deprecated secondary btns

GitOrigin-RevId: bd121147aa6c7b0a8f6b492b47667adb9369d078
---
 .../settings/components/leave/modal-content.tsx   |  8 +++++++-
 .../frontend/stylesheets/components/buttons.less  | 15 ++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/services/web/frontend/js/features/settings/components/leave/modal-content.tsx b/services/web/frontend/js/features/settings/components/leave/modal-content.tsx
index faeb828fa5..060379a688 100644
--- a/services/web/frontend/js/features/settings/components/leave/modal-content.tsx
+++ b/services/web/frontend/js/features/settings/components/leave/modal-content.tsx
@@ -68,7 +68,13 @@ function LeaveModalContent({
       </Modal.Body>
 
       <Modal.Footer>
-        <Button type="button" disabled={inFlight} onClick={handleHide}>
+        <Button
+          type="button"
+          disabled={inFlight}
+          onClick={handleHide}
+          bsStyle={null}
+          className="btn-secondary"
+        >
           {t('cancel')}
         </Button>
 
diff --git a/services/web/frontend/stylesheets/components/buttons.less b/services/web/frontend/stylesheets/components/buttons.less
index e659572d76..13e5d25835 100755
--- a/services/web/frontend/stylesheets/components/buttons.less
+++ b/services/web/frontend/stylesheets/components/buttons.less
@@ -98,6 +98,16 @@
       .box-shadow(none);
     }
   }
+
+  &.disabled.btn-info,
+  &.disabled.btn-default,
+  &[disabled].btn-info,
+  &[disabled].btn-default,
+  fieldset[disabled].btn-info,
+  fieldset[disabled].btn-default & {
+    // style only for deprecated classes
+    .opacity(0.65);
+  }
 }
 
 // Alternate buttons
@@ -132,9 +142,12 @@
   .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
 }
 // Danger and error appear as red
-.btn-danger {
+.btn-danger when(@is-new-css = false) {
   .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
 }
+.btn-danger when(@is-new-css = true) {
+  .btn-borderless(@white, @red, @red-60);
+}
 // btn-secondary
 .btn-secondary when(@is-new-css = false) {
   &:not(.btn-secondary-info) {