Merge pull request #14695 from overleaf/jdt-hist-compare-hover

fix: adding hover state to compare buttons
GitOrigin-RevId: 85989aebdee6d8ee3ffef3300f975e0dbfa2adb1

services/web/frontend/js/features/history/components/change-list/dropdown/compare-version-dropdown.tsx

@@ -26,7 +26,7 @@ function CompareVersionDropdown({
       iconTag={
         <MaterialIcon
           type="align_space_even"
-          className="history-dropdown-icon p-1"
+          className="history-dropdown-icon"
           accessibilityLabel="compare drop down"
         />
       }

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-items.tsx

@@ -38,7 +38,7 @@ function CompareItems({
           icon={
             <MaterialIcon
               type="align_end"
-              className="history-dropdown-icon p-1"
+              className="history-dropdown-icon pb-1"
             />
           }
         />
@@ -56,7 +56,7 @@ function CompareItems({
           icon={
             <MaterialIcon
               type="align_start"
-              className="history-dropdown-icon p-1"
+              className="history-dropdown-icon pt-1"
             />
           }
         />

services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare.tsx

@@ -40,7 +40,7 @@ function Compare({
       overlayProps={{ placement: 'left' }}
     >
       <Button
-        bsStyle="link"
+        bsStyle={null}
         className="history-compare-btn"
         onClick={handleCompareVersion}
       >

services/web/frontend/stylesheets/app/editor/history-react.less

@@ -254,11 +254,13 @@ history-root {
     }
   }
 
+  .history-compare-btn,
   .history-version-dropdown-menu-btn {
     @size: 30px;
     padding: 0;
     width: @size;
     height: @size;
+    line-height: 1;
     font-size: @font-size-small;
     color: @neutral-90;
     background-color: transparent;
@@ -411,19 +413,6 @@ history-root {
   vertical-align: top;
 }
 
-.history-compare-btn {
-  line-height: 1;
-  padding: 0;
-  color: black;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.history-compare-btn:hover {
-  text-decoration: none;
-  color: black;
-}
-
 .history-file-tree {
   display: flex !important; // To work around jQuery layout's inline styles
   flex-direction: column;