From 63f542717c8f47ec3671d3e490f3af25fdff9875 Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Fri, 2 May 2025 11:21:56 +0100
Subject: [PATCH] Merge pull request #25113 from
 overleaf/td-remove-button-info-variant

Change labs/new editor buttons to be based on secondary buttons

GitOrigin-RevId: f02565e60be33ff75c217c1ea1d0f24b3b619ed4
---
 .../try-new-editor-button.tsx                       |  2 +-
 .../components/toolbar/labs-actions.tsx             |  2 +-
 .../pdf-preview/components/pdf-preview-error.tsx    |  4 ++--
 .../components/stop-on-first-error-prompt.tsx       |  6 +++++-
 .../components/preview-logs-pane-max-entries.jsx    |  2 +-
 .../js/features/ui/components/types/button-props.ts |  1 -
 .../stylesheets/bootstrap-5/abstracts/mixins.scss   | 11 +++++++++++
 .../bootstrap-5/pages/editor/toolbar-redesign.scss  | 11 ++---------
 .../bootstrap-5/pages/editor/toolbar.scss           | 13 ++++---------
 9 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/try-new-editor-button.tsx b/services/web/frontend/js/features/editor-navigation-toolbar/try-new-editor-button.tsx
index 91cc150ff6..6fc3bc80a3 100644
--- a/services/web/frontend/js/features/editor-navigation-toolbar/try-new-editor-button.tsx
+++ b/services/web/frontend/js/features/editor-navigation-toolbar/try-new-editor-button.tsx
@@ -17,7 +17,7 @@ const TryNewEditorButton = () => {
         onClick={onClick}
         size="sm"
         leadingIcon={<MaterialIcon type="experiment" unfilled />}
-        variant="info"
+        variant="secondary"
       >
         {t('try_the_new_editor')}
       </OLButton>
diff --git a/services/web/frontend/js/features/ide-redesign/components/toolbar/labs-actions.tsx b/services/web/frontend/js/features/ide-redesign/components/toolbar/labs-actions.tsx
index 735c0cfd27..06a3a2ab4a 100644
--- a/services/web/frontend/js/features/ide-redesign/components/toolbar/labs-actions.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/toolbar/labs-actions.tsx
@@ -23,7 +23,7 @@ export const LabsActions = () => {
         >
           <OLButton
             size="sm"
-            variant="info"
+            variant="secondary"
             className="ide-redesign-labs-button"
             onClick={openEditorRedesignSwitcherModal}
             leadingIcon={<MaterialIcon type="experiment" unfilled />}
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-error.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-error.tsx
index 89387c232e..833e2b39d5 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-preview-error.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-preview-error.tsx
@@ -23,7 +23,7 @@ function PdfPreviewError({ error }: { error: string }) {
                 components={[
                   // eslint-disable-next-line react/jsx-key
                   <OLButton
-                    variant="info"
+                    variant="primary"
                     size="sm"
                     onClick={() => startCompile()}
                   />,
@@ -281,7 +281,7 @@ function TimedOutLogEntry() {
                 components={[
                   // eslint-disable-next-line react/jsx-key
                   <OLButton
-                    variant="info"
+                    variant="primary"
                     size="sm"
                     onClick={handleEnableStopOnFirstErrorClick}
                   />,
diff --git a/services/web/frontend/js/features/pdf-preview/components/stop-on-first-error-prompt.tsx b/services/web/frontend/js/features/pdf-preview/components/stop-on-first-error-prompt.tsx
index a693d57e70..d6b7aae433 100644
--- a/services/web/frontend/js/features/pdf-preview/components/stop-on-first-error-prompt.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/stop-on-first-error-prompt.tsx
@@ -28,7 +28,11 @@ export default function StopOnFirstErrorPrompt() {
             // eslint-disable-next-line react/jsx-key
             components={[<strong />]}
           />{' '}
-          <OLButton variant="info" size="sm" onClick={handleDisableButtonClick}>
+          <OLButton
+            variant="primary"
+            size="sm"
+            onClick={handleDisableButtonClick}
+          >
             {t('disable_stop_on_first_error')}
           </OLButton>
         </>
diff --git a/services/web/frontend/js/features/preview/components/preview-logs-pane-max-entries.jsx b/services/web/frontend/js/features/preview/components/preview-logs-pane-max-entries.jsx
index 774dba826e..eb28e3336a 100644
--- a/services/web/frontend/js/features/preview/components/preview-logs-pane-max-entries.jsx
+++ b/services/web/frontend/js/features/preview/components/preview-logs-pane-max-entries.jsx
@@ -41,7 +41,7 @@ function PreviewLogsPaneMaxEntries({ totalEntries, entriesShown, hasErrors }) {
                   i18nKey="log_entry_maximum_entries_enable_stop_on_first_error"
                   components={[
                     <OLButton
-                      variant="info"
+                      variant="primary"
                       size="sm"
                       key="enable-stop-on-first-error"
                       onClick={handleEnableStopOnFirstErrorClick}
diff --git a/services/web/frontend/js/features/ui/components/types/button-props.ts b/services/web/frontend/js/features/ui/components/types/button-props.ts
index fad0c49c6a..e98538e168 100644
--- a/services/web/frontend/js/features/ui/components/types/button-props.ts
+++ b/services/web/frontend/js/features/ui/components/types/button-props.ts
@@ -34,5 +34,4 @@ export type ButtonProps = {
     | 'premium'
     | 'premium-secondary'
     | 'link'
-    | 'info'
 }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
index ce53fcfa23..d1a823a120 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
@@ -60,6 +60,17 @@
   }
 }
 
+@mixin labs-button {
+  @include ol-button-variant(
+    $color: var(--content-positive),
+    $background: var(--bg-accent-03),
+    $border: var(--green-40),
+    $hover-background: var(--bg-accent-03),
+    $hover-border: var(--green-40),
+    $borderless: false
+  );
+}
+
 @mixin reset-button() {
   padding: 0;
   cursor: pointer;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss
index 10ffeb0f52..e77ad32a51 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss
@@ -182,13 +182,6 @@
   }
 }
 
-.ide-redesign-labs-button.btn.btn-info {
-  @include ol-button-variant(
-    var(--content-positive),
-    var(--bg-accent-03),
-    var(--green-40),
-    var(--bg-accent-03),
-    var(--green-40),
-    false
-  );
+.ide-redesign-labs-button.btn.btn-secondary {
+  @include labs-button;
 }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
index 0d26e0a04f..7b3decc101 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
@@ -533,15 +533,10 @@
   border-right: 1px solid var(--formatting-btn-border);
 }
 
-.toolbar-experiment-button.btn.btn-info {
-  @include ol-button-variant(
-    var(--content-positive),
-    var(--bg-accent-03),
-    var(--green-40),
-    var(--bg-accent-03),
-    var(--green-40),
-    false
-  );
+// Override a secondary button to ensure that the border is visible because
+// overriding a borderless button will not add a border.
+.toolbar-experiment-button.btn-secondary {
+  @include labs-button;
 
   max-height: 39px;
   font-size: var(--font-size-01);