Merge pull request #19124 from overleaf/dp-light-hover-bug

Refactor pdf toolbar button styles to fix bug with hovering over active logs button

GitOrigin-RevId: f8034c9daade32cda7c4f08ccd292c86ef6b8454

services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx

@@ -68,6 +68,7 @@ function PdfZoomDropdown({
       pullRight
     >
       <Dropdown.Toggle
+        bsStyle={null}
         className="btn pdf-toolbar-btn pdfjs-zoom-dropdown-button small"
         value={rawScale}
         title={rawScaleToPercentage(rawScale)}

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

@@ -57,12 +57,7 @@
   padding-left: @line-height-computed / 4;
 }
 
-.toolbar-pdf-hybrid {
-  .btn:not(.detach-compile-button):not(.btn-orphan):not(
-      .detach-synctex-control
-    ):not(.switch-to-editor-btn):not(.split-menu-dropdown-toggle):not(
-      .split-menu-button
-    ) {
+.pdf-toolbar-btn {
   display: inline-block;
   color: @toolbar-btn-color;
   background-color: transparent;
@@ -70,6 +65,7 @@
   line-height: 1;
   height: 24px;
   border-radius: 2px;
+  border-radius: @border-radius-base;
 
   &:hover,
   &:active,
@@ -77,6 +73,12 @@
     color: @toolbar-btn-color;
   }
 
+  &:hover {
+    &:not(:disabled) {
+      background-color: @pdf-toolbar-btn-hover-color;
+    }
+  }
+
   .label {
     position: absolute;
     top: 0;
@@ -86,16 +88,6 @@
     pointer-events: none;
   }
 
-    .btn {
-      display: inline-block;
-      color: #fff;
-      background-color: transparent;
-      padding: 4px 2px;
-      line-height: 1;
-      height: 24px;
-      border-radius: 2px;
-    }
-
   &.log-btn {
     border: none;
     margin-right: 3px;
@@ -107,7 +99,10 @@
       opacity: 0.65;
 
       &:hover {
-          color: white;
+        &:not(:disabled) {
+          background-color: transparent;
+          color: @toolbar-btn-color;
+        }
       }
     }
 
@@ -115,16 +110,6 @@
       outline: none;
     }
   }
-  }
-}
-
-.pdf-toolbar-btn {
-  border-radius: @border-radius-base;
-  &:hover {
-    &:not(:disabled) {
-      background-color: @pdf-toolbar-btn-hover-color !important;
-    }
-  }
 }
 
 .pdf {