From e75ac119e0b428c9526fcf0f03a9f3c3dc12a5ae Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 18 Jun 2025 00:25:04 +0300
Subject: [PATCH] M: Improve hover effects on pagination

---
 .../src/components/data-table/pagination-tools.tsx     | 10 ++++++----
 .../src/components/data-table/select-pagination.tsx    |  8 +++++++-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/rsconcept/frontend/src/components/data-table/pagination-tools.tsx b/rsconcept/frontend/src/components/data-table/pagination-tools.tsx
index d4b7649b..de74f1a8 100644
--- a/rsconcept/frontend/src/components/data-table/pagination-tools.tsx
+++ b/rsconcept/frontend/src/components/data-table/pagination-tools.tsx
@@ -20,6 +20,8 @@ export function PaginationTools<TData>({
   onChangePaginationOption,
   paginationOptions
 }: PaginationToolsProps<TData>) {
+  const buttonClass =
+    'cc-hover-text cc-controls cc-animate-color focus-outline rounded-md not-[:disabled]:cursor-pointer';
   return (
     <div className='flex justify-end items-center my-2 text-sm cc-controls select-none'>
       <span className='mr-3'>
@@ -36,7 +38,7 @@ export function PaginationTools<TData>({
         <button
           type='button'
           aria-label='Первая страница'
-          className='cc-hover-bg cc-controls cc-animate-color focus-outline'
+          className={buttonClass}
           onClick={() => table.setPageIndex(0)}
           disabled={!table.getCanPreviousPage()}
         >
@@ -45,7 +47,7 @@ export function PaginationTools<TData>({
         <button
           type='button'
           aria-label='Предыдущая страница'
-          className='cc-hover-bg cc-controls cc-animate-color focus-outline'
+          className={buttonClass}
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
         >
@@ -67,7 +69,7 @@ export function PaginationTools<TData>({
         <button
           type='button'
           aria-label='Следующая страница'
-          className='cc-hover-bg cc-controls cc-animate-color focus-outline'
+          className={buttonClass}
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
         >
@@ -76,7 +78,7 @@ export function PaginationTools<TData>({
         <button
           type='button'
           aria-label='Последняя страница'
-          className='cc-hover-bg cc-controls cc-animate-color focus-outline'
+          className={buttonClass}
           onClick={() => table.setPageIndex(table.getPageCount() - 1)}
           disabled={!table.getCanNextPage()}
         >
diff --git a/rsconcept/frontend/src/components/data-table/select-pagination.tsx b/rsconcept/frontend/src/components/data-table/select-pagination.tsx
index 58aea9ff..3860b0d5 100644
--- a/rsconcept/frontend/src/components/data-table/select-pagination.tsx
+++ b/rsconcept/frontend/src/components/data-table/select-pagination.tsx
@@ -3,6 +3,7 @@
 
 import { useCallback } from 'react';
 import { type Table } from '@tanstack/react-table';
+import clsx from 'clsx';
 
 import { prefixes } from '@/utils/constants';
 
@@ -30,7 +31,12 @@ export function SelectPagination<TData>({ id, table, paginationOptions, onChange
       <SelectTrigger
         id={id}
         aria-label='Выбор количества строчек на странице'
-        className='mx-2 cursor-pointer bg-transparent focus-outline border-0 w-28 max-h-6 px-2 justify-end'
+        className={clsx(
+          'w-28 max-h-6 mx-2',
+          'px-2 justify-end',
+          'bg-transparent cc-hover-text cc-animate-color focus-outline border-0 rounded-md',
+          'cursor-pointer'
+        )}
       >
         <SelectValue />
       </SelectTrigger>