From a66e1329df3a18f26ef8a9629e884ad1e1c9f5d2 Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Fri, 8 Sep 2023 17:49:04 +0300
Subject: [PATCH] Merge pull request #14695 from
 overleaf/jdt-hist-compare-hover

fix: adding hover state to compare buttons
GitOrigin-RevId: 85989aebdee6d8ee3ffef3300f975e0dbfa2adb1
---
 .../dropdown/compare-version-dropdown.tsx         |  2 +-
 .../dropdown/menu-item/compare-items.tsx          |  4 ++--
 .../change-list/dropdown/menu-item/compare.tsx    |  2 +-
 .../stylesheets/app/editor/history-react.less     | 15 ++-------------
 4 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/services/web/frontend/js/features/history/components/change-list/dropdown/compare-version-dropdown.tsx b/services/web/frontend/js/features/history/components/change-list/dropdown/compare-version-dropdown.tsx
index 4b4b6824bb..f06aa7aefe 100644
--- a/services/web/frontend/js/features/history/components/change-list/dropdown/compare-version-dropdown.tsx
+++ b/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"
         />
       }
diff --git a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-items.tsx b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-items.tsx
index 010c070819..78ba0aae75 100644
--- a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-items.tsx
+++ b/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"
             />
           }
         />
diff --git a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare.tsx b/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare.tsx
index 7d9fb27e63..14fe501db8 100644
--- a/services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare.tsx
+++ b/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}
       >
diff --git a/services/web/frontend/stylesheets/app/editor/history-react.less b/services/web/frontend/stylesheets/app/editor/history-react.less
index 2d26469b62..efeae508c5 100644
--- a/services/web/frontend/stylesheets/app/editor/history-react.less
+++ b/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;