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

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>

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 />}

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}
                   />,

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>
         </>

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}

services/web/frontend/js/features/ui/components/types/button-props.ts

@@ -34,5 +34,4 @@ export type ButtonProps = {
     | 'premium'
     | 'premium-secondary'
     | 'link'
-    | 'info'
 }

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;

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;
 }

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