From da3ad5232fbc846e3de797025d36a4e097a1a3b9 Mon Sep 17 00:00:00 2001
From: Davinder Singh <davibaweja@gmail.com>
Date: Tue, 15 Nov 2022 10:55:29 +0000
Subject: [PATCH] Merge pull request #10286 from overleaf/jel-ds-toggle

Fix toggle and  `Switch to PDF` aligment

GitOrigin-RevId: d3c77ff34829af875d2b8b9e3797e0e7db867631
---
 .../pdf-preview/components/pdf-synctex-controls.js   |  2 +-
 .../source-editor/components/switch-to-pdf-button.js |  2 +-
 .../web/frontend/stylesheets/app/editor/toolbar.less | 12 ++++++++----
 .../web/frontend/stylesheets/core/variables.less     |  1 +
 services/web/frontend/stylesheets/variables/all.less |  1 +
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.js b/services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.js
index 5cbe22ec84..2ae2d9b4e2 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-synctex-controls.js
+++ b/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,
   })
 
diff --git a/services/web/frontend/js/features/source-editor/components/switch-to-pdf-button.js b/services/web/frontend/js/features/source-editor/components/switch-to-pdf-button.js
index 4d82f5c09f..155089d568 100644
--- a/services/web/frontend/js/features/source-editor/components/switch-to-pdf-button.js
+++ b/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')}
diff --git a/services/web/frontend/stylesheets/app/editor/toolbar.less b/services/web/frontend/stylesheets/app/editor/toolbar.less
index 8beaa7d585..36ddbaf3ab 100644
--- a/services/web/frontend/stylesheets/app/editor/toolbar.less
+++ b/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;
+}
diff --git a/services/web/frontend/stylesheets/core/variables.less b/services/web/frontend/stylesheets/core/variables.less
index 22e8e45371..9fd99c8270 100644
--- a/services/web/frontend/stylesheets/core/variables.less
+++ b/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;
 
diff --git a/services/web/frontend/stylesheets/variables/all.less b/services/web/frontend/stylesheets/variables/all.less
index 453fcd78e4..778707740c 100644
--- a/services/web/frontend/stylesheets/variables/all.less
+++ b/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;