From 6cb628c8ebf73f13afb6db2e356e64d322bb7f80 Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Wed, 17 Nov 2021 18:02:34 +0530
Subject: [PATCH] Fix: Pagination button hover issue (#1227)

---
 .../src/components/Pagination/Pagination.css  | 21 ++++++++++++-------
 .../ui/src/components/Pagination/index.tsx    |  2 +-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Pagination/Pagination.css b/catalog-rest-service/src/main/resources/ui/src/components/Pagination/Pagination.css
index 4625439f31a..f7357915ad3 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/Pagination/Pagination.css
+++ b/catalog-rest-service/src/main/resources/ui/src/components/Pagination/Pagination.css
@@ -23,20 +23,27 @@
   margin-bottom: 1rem;
 }
 
-.tw-link:hover {
+.button-text:hover .tw-link {
   text-decoration: none !important;
 }
-.pagination > .disabled > .tw-link {
+
+.disabled {
   cursor: not-allowed;
+}
+
+.button-text:not(.disabled) {
+  cursor: pointer;
+}
+
+.pagination > .disabled > .tw-link {
   color: #7147e8;
 }
 
-.pagination > .disabled > .tw-link:hover,
-.pagination > .disabled > .tw-link:focus {
-  cursor: not-allowed;
+.pagination > .disabled:hover > .tw-link,
+.pagination > .disabled:focus > .tw-link {
   color: white;
 }
-.pagination > li > .tw-link:hover,
-.pagination > li > .tw-link:focus {
+.pagination > .button-text:hover > .tw-link,
+.pagination > .button-text:focus > .tw-link {
   color: white;
 }
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/Pagination/index.tsx b/catalog-rest-service/src/main/resources/ui/src/components/Pagination/index.tsx
index 20e91ebe2e8..f76ea0ac916 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/Pagination/index.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/Pagination/index.tsx
@@ -32,7 +32,7 @@ const Pagination: React.FC<PaginationProps> = ({
         hideFirstLastPages
         activePage={currentPage}
         disabledClass="tw-opacity-60 disabled"
-        itemClass="tw-border tw-border-primary tw-text-blue-500 tw-rounded tw-px-3 tw-py-1.5 tw-text-sm tw-mx-2 hover:tw-bg-primary "
+        itemClass="tw-border tw-border-primary tw-text-blue-500 tw-rounded tw-px-3 tw-py-1.5 tw-text-sm tw-mx-2 hover:tw-bg-primary button-text"
         itemsCountPerPage={sizePerPage}
         linkClass="tw-text-primary tw-font-medium tw-link"
         nextPageText={