From ed42d0c9cab910a2b53c0559e3f567f3a8da912f Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Tue, 6 Jun 2023 09:42:28 -0700
Subject: [PATCH] Make the switch to editor/pdf button to have the same height
 (#12110)

GitOrigin-RevId: 5ceaad73c6c6b74ce2b6e8bbc79563bfad6ab34b
---
 .../components/switch-to-editor-button.tsx        |  8 +++++---
 .../components/switch-to-pdf-button.js            |  6 +++---
 .../web/frontend/stylesheets/app/editor/pdf.less  |  4 ----
 .../frontend/stylesheets/app/editor/toolbar.less  | 15 +++++++++++++++
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/services/web/frontend/js/features/pdf-preview/components/switch-to-editor-button.tsx b/services/web/frontend/js/features/pdf-preview/components/switch-to-editor-button.tsx
index 30742a7cc4..3c1bf0cf57 100644
--- a/services/web/frontend/js/features/pdf-preview/components/switch-to-editor-button.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/switch-to-editor-button.tsx
@@ -25,10 +25,12 @@ function SwitchToEditorButton() {
       bsStyle={null}
       bsSize="xs"
       onClick={handleClick}
-      className="switch-to-editor-btn btn-secondary"
+      className="switch-to-editor-btn toolbar-btn-secondary btn-secondary"
     >
-      <Icon type="code" className="me-1" />
-      {t('switch_to_editor')}
+      <Icon type="code" className="toolbar-btn-secondary-icon" />
+      <span className="toolbar-btn-secondary-text">
+        {t('switch_to_editor')}
+      </span>
     </Button>
   )
 }
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 e3dcdd71ca..bc9446b953 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,10 +25,10 @@ function SwitchToPDFButton() {
       bsStyle={null}
       bsSize="xs"
       onClick={handleClick}
-      className="toolbar-btn-secondary btn-secondary"
+      className="switch-to-pdf-btn toolbar-btn-secondary btn-secondary"
     >
-      <Icon type="file-pdf-o" className="me-1" />
-      {t('switch_to_pdf')}
+      <Icon type="file-pdf-o" className="toolbar-btn-secondary-icon" />
+      <span className="toolbar-btn-secondary-text">{t('switch_to_pdf')}</span>
     </Button>
   )
 }
diff --git a/services/web/frontend/stylesheets/app/editor/pdf.less b/services/web/frontend/stylesheets/app/editor/pdf.less
index 8eaf6efe08..0d5f0543e5 100644
--- a/services/web/frontend/stylesheets/app/editor/pdf.less
+++ b/services/web/frontend/stylesheets/app/editor/pdf.less
@@ -15,10 +15,6 @@
   }
 }
 
-.pdf .toolbar.toolbar-pdf when (@is-overleaf-light = false) {
-  border-bottom: 0;
-}
-
 .toolbar-pdf-orphan,
 .toolbar-pdf-left,
 .toolbar-pdf-right {
diff --git a/services/web/frontend/stylesheets/app/editor/toolbar.less b/services/web/frontend/stylesheets/app/editor/toolbar.less
index a586a7f7fb..dfc47bde63 100644
--- a/services/web/frontend/stylesheets/app/editor/toolbar.less
+++ b/services/web/frontend/stylesheets/app/editor/toolbar.less
@@ -433,3 +433,18 @@
   padding-bottom: 0px;
   margin-bottom: 0.5px;
 }
+
+.switch-to-editor-btn {
+  margin-right: 7px;
+}
+
+.switch-to-editor-btn,
+.switch-to-pdf-btn {
+  text-align: left;
+  display: flex;
+  align-items: center;
+
+  .toolbar-btn-secondary-icon {
+    margin-right: 5px;
+  }
+}