Merge pull request #25779 from overleaf/dp-recompile-button

Update Recompile button to match figma designs

GitOrigin-RevId: c3614fe2e621a64eb35dd4989b86c68a89bea342

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

@@ -75,11 +75,13 @@ function PdfCompileButton() {
       'btn-striped-animated': hasChanges,
     },
     'no-left-border',
-    'dropdown-button-toggle'
+    'dropdown-button-toggle',
+    'compile-dropdown-toggle'
   )
 
   const buttonClassName = classNames(
     'align-items-center py-0 no-left-radius px-3',
+    'compile-button',
     {
       'btn-striped-animated': hasChanges,
     }

services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss

@@ -12,6 +12,40 @@
   }
 }
 
+.ide-redesign-main {
+  --pdf-bg: var(--bg-dark-secondary);
+
+  .pdf-viewer {
+    .pdfjs-viewer {
+      .page {
+        box-shadow:
+          0 5px 5px 0 #23282f0d,
+          0 3px 14px 0 #23282f08,
+          0 8px 10px 0 #23282f14;
+      }
+    }
+  }
+
+  .toolbar-pdf-left {
+    .compile-button-group {
+      height: 24px;
+      border-radius: 12px;
+      margin-left: var(--spacing-02);
+    }
+
+    .dropdown > .compile-button {
+      border-top-left-radius: 12px;
+      border-bottom-left-radius: 12px;
+      font-size: var(--font-size-02);
+    }
+
+    .dropdown > .compile-dropdown-toggle {
+      width: 26px;
+      padding: var(--spacing-01);
+    }
+  }
+}
+
 .pdf .toolbar.toolbar-pdf {
   @include toolbar-sm-height;
   @include toolbar-alt-bg;
@@ -158,21 +192,6 @@
   top: var(--toolbar-small-height);
 }
 
-.ide-redesign-main {
-  --pdf-bg: var(--bg-dark-secondary);
-
-  .pdf-viewer {
-    .pdfjs-viewer {
-      .page {
-        box-shadow:
-          0 5px 5px 0 #23282f0d,
-          0 3px 14px 0 #23282f08,
-          0 8px 10px 0 #23282f14;
-      }
-    }
-  }
-}
-
 .pdf-viewer {
   isolation: isolate;