Merge pull request #18514 from overleaf/dp-pdf-toolbar-hover

Add hover state to pdf toolbar buttons

GitOrigin-RevId: d58ad739e6454b9e0cdbdbb93c55e58785a9d672

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

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')}

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}
       >

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}
         >

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)}
       />

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;
 }

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;

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;