From a70a3fc77e33bbad05e0d2f33f96858bbc2bcddb Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Fri, 31 May 2024 09:51:27 +0100
Subject: [PATCH] Merge pull request #18514 from overleaf/dp-pdf-toolbar-hover

Add hover state to pdf toolbar buttons

GitOrigin-RevId: d58ad739e6454b9e0cdbdbb93c55e58785a9d672
---
 .../components/pdf-hybrid-download-button.tsx            | 1 +
 .../pdf-preview/components/pdf-hybrid-logs-button.tsx    | 2 +-
 .../pdf-preview/components/pdf-toolbar-button.tsx        | 2 +-
 .../components/pdf-viewer-controls-menu-button.tsx       | 2 +-
 .../pdf-preview/components/pdf-zoom-dropdown.tsx         | 2 +-
 services/web/frontend/stylesheets/app/editor/pdf.less    | 9 +++++++++
 services/web/frontend/stylesheets/variables/all.less     | 1 +
 .../web/frontend/stylesheets/variables/themes/light.less | 1 +
 8 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-download-button.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-download-button.tsx
index d3b3fa0838..f2ee8c40ae 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-download-button.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-download-button.tsx
@@ -34,6 +34,7 @@ function PdfHybridDownloadButton() {
       <Button
         onClick={handleOnClick}
         bsStyle="link"
+        className="pdf-toolbar-btn"
         draggable="false"
         disabled={!pdfDownloadUrl}
         download
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-logs-button.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-logs-button.tsx
index 4ef69a28dc..d5dd4262aa 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-logs-button.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-logs-button.tsx
@@ -34,7 +34,7 @@ function PdfHybridLogsButton() {
         bsStyle="link"
         disabled={Boolean(error || stoppedOnFirstError)}
         active={showLogs}
-        className="toolbar-item log-btn"
+        className="pdf-toolbar-btn toolbar-item log-btn"
         onClick={handleClick}
         style={{ position: 'relative' }}
         aria-label={showLogs ? t('view_pdf') : t('view_logs')}
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-toolbar-button.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-toolbar-button.tsx
index d263a05df2..0b31b4c635 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-toolbar-button.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-toolbar-button.tsx
@@ -34,7 +34,7 @@ export default function PDFToolbarButton({
         aria-label={label}
         bsSize="large"
         bsStyle={null}
-        className="pdfjs-toolbar-button"
+        className="pdf-toolbar-btn pdfjs-toolbar-button"
         disabled={disabled}
         onClick={onClick}
       >
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-menu-button.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-menu-button.tsx
index 488e26ee04..35ac7c90e5 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-menu-button.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-menu-button.tsx
@@ -39,7 +39,7 @@ export default function PdfViewerControlsMenuButton({
         overlayProps={{ placement: 'bottom' }}
       >
         <Button
-          className="pdfjs-toolbar-popover-button"
+          className="pdf-toolbar-btn pdfjs-toolbar-popover-button"
           onClick={togglePopover}
           ref={targetRef}
         >
diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx
index f77a7c78d8..d3ef4a0d15 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx
@@ -49,7 +49,7 @@ function PdfZoomDropdown({ setZoom, rawScale }: PdfZoomDropdownProps) {
       pullRight
     >
       <Dropdown.Toggle
-        className="btn pdfjs-zoom-dropdown-button small"
+        className="btn pdf-toolbar-btn pdfjs-zoom-dropdown-button small"
         value={rawScale}
         title={rawScaleToPercentage(rawScale)}
       />
diff --git a/services/web/frontend/stylesheets/app/editor/pdf.less b/services/web/frontend/stylesheets/app/editor/pdf.less
index 0fb9f93960..34ea91928d 100644
--- a/services/web/frontend/stylesheets/app/editor/pdf.less
+++ b/services/web/frontend/stylesheets/app/editor/pdf.less
@@ -118,6 +118,15 @@
   }
 }
 
+.pdf-toolbar-btn {
+  border-radius: @border-radius-base;
+  &:hover {
+    &:not(:disabled) {
+      background-color: @pdf-toolbar-btn-hover-color !important;
+    }
+  }
+}
+
 .pdf {
   background-color: @pdf-bg;
 }
diff --git a/services/web/frontend/stylesheets/variables/all.less b/services/web/frontend/stylesheets/variables/all.less
index dd5e9b0d3b..f8b25b8714 100644
--- a/services/web/frontend/stylesheets/variables/all.less
+++ b/services/web/frontend/stylesheets/variables/all.less
@@ -955,6 +955,7 @@
 @logs-pane-bg: @neutral-80;
 @log-line-no-color: #fff;
 @log-hints-color: @neutral-70;
+@pdf-toolbar-btn-hover-color: rgba(125, 125, 125, 0.2);
 
 // Tags
 @tag-border-radius: 9999px;
diff --git a/services/web/frontend/stylesheets/variables/themes/light.less b/services/web/frontend/stylesheets/variables/themes/light.less
index da4038b80d..4308dd9a55 100644
--- a/services/web/frontend/stylesheets/variables/themes/light.less
+++ b/services/web/frontend/stylesheets/variables/themes/light.less
@@ -71,6 +71,7 @@
 @project-rename-link-color: @neutral-70;
 @project-rename-link-color-hover: @neutral-70;
 @logs-pane-bg: @neutral-10;
+@pdf-toolbar-btn-hover-color: @neutral-10;
 
 // Navbar
 @navbar-default-bg: #fff;