Merge pull request #10286 from overleaf/jel-ds-toggle

Fix toggle and  `Switch to PDF` aligment

GitOrigin-RevId: d3c77ff34829af875d2b8b9e3797e0e7db867631

services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.js

@@ -68,7 +68,7 @@ function GoToPdfButton({
 }) {
   const { t } = useTranslation()
   const tooltipPlacement = isDetachLayout ? 'bottom' : 'right'
-  const buttonClasses = classNames('synctex-control', {
+  const buttonClasses = classNames('synctex-control', 'toolbar-btn-secondary', {
     'detach-synctex-control': !!isDetachLayout,
   })
 

services/web/frontend/js/features/source-editor/components/switch-to-pdf-button.js

@@ -25,7 +25,7 @@ function SwitchToPDFButton() {
       bsStyle="default"
       bsSize="xs"
       onClick={handleClick}
-      className="toolbar-item"
+      className="toolbar-btn-secondary"
     >
       <Icon type="file-pdf-o" className="me-1" />
       {t('switch_to_pdf')}

services/web/frontend/stylesheets/app/editor/toolbar.less

@@ -234,13 +234,12 @@
 
 .toggle-wrapper {
   white-space: nowrap;
-  height: 24px;
 }
 
 .toggle-switch {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  height: 24px;
+  height: @toolbar-btn-height;
   margin-right: 5px;
   border-radius: @btn-border-radius-base;
   overflow: hidden;
@@ -265,7 +264,6 @@
     display: flex;
     align-items: center;
     height: 100%;
-    line-height: 20px; // parent height minus border
     width: 100%;
     padding: 0 8px;
     background-size: 200% 100%;
@@ -429,3 +427,9 @@
   .opacity(0.65);
   .box-shadow(none);
 }
+
+.toolbar-btn-secondary {
+  height: @toolbar-btn-height;
+  padding-bottom: 0px;
+  margin-bottom: 0.5px;
+}

services/web/frontend/stylesheets/core/variables.less

@@ -862,6 +862,7 @@
 
 @toolbar-border-color: @ol-blue-gray-5;
 @toolbar-header-btn-border-color: @toolbar-border-color;
+@toolbar-btn-height: 26px;
 @common-border-color: @gray-lighter;
 @editor-border-color: @ol-blue-gray-5;
 

services/web/frontend/stylesheets/variables/all.less

@@ -661,6 +661,7 @@
 
 @toolbar-border-color: @neutral-80;
 @toolbar-header-btn-border-color: @toolbar-border-color;
+@toolbar-btn-height: 26px;
 @common-border-color: @gray-lighter;
 @editor-border-color: @neutral-80;