From 89506c222b513dd26a50febc4bc03ee8ae5e92f7 Mon Sep 17 00:00:00 2001
From: smanylov <bio29s@mail.ru>
Date: Tue, 31 Mar 2026 15:35:16 +0700
Subject: [PATCH] change pagination styles for file matches table

---
 src/app/styles/pages-styles.scss              | 74 ++++++++++++-------
 .../file-page-violations-list.tsx             | 67 ++++++++++-------
 2 files changed, 86 insertions(+), 55 deletions(-)

diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss
index 0e24db7..f74a3b5 100644
--- a/src/app/styles/pages-styles.scss
+++ b/src/app/styles/pages-styles.scss
@@ -4417,6 +4417,7 @@
 		grid-template-columns: 1fr 3fr;
 		gap: 10px;
 		height: 80vh;
+		margin-bottom: 20px;
 
 		.sources-list {
 			display: flex;
@@ -4424,10 +4425,6 @@
 			gap: 15px;
 
 			.source-card {
-				/* background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-				border-radius: 12px;
-				border: 1px solid v.$border-color-1; */
-
 				background: #fff;
 				border: 1px solid #f3f4f6;
 				border-radius: 20px;
@@ -4441,7 +4438,6 @@
 				cursor: pointer;
 				display: flex;
 				justify-content: space-between;
-				/* flex-direction: column; */
 				opacity: 0.75;
 
 				&:hover {
@@ -4503,6 +4499,12 @@
 		}
 	}
 
+	.sources-list-pagination {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
 	.source-status {
 		padding: 4px 10px;
 		border-radius: 6px;
@@ -4696,37 +4698,55 @@
 		}
 	}
 
-	.pagination {
+	.pagination-controls {
 		display: flex;
-		justify-content: start;
-		gap: 4px;
-		margin-top: 20px;
+		align-items: center;
+		gap: 0.5rem;
 
-		&-item {
-			padding: 8px 12px;
-			border-radius: 8px;
-			text-decoration: none;
-			font-weight: 600;
-			background: white;
-			color: #374151;
-			border: 2px solid #e5e7eb;
-			transition: all 0.2s ease;
+		.arrow {
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+			padding-top: 0.25rem;
+			padding-bottom: 0.25rem;
+			border: 2px solid v.$border-color-1;
+			border-radius: 10px;
+			box-shadow: 0 1px 2px #0000000d;
+			color: v.$p-color;
 
-			&:disabled {
-				opacity: 0.6;
+			.icon {
+				width: 18px;
 			}
 
 			&:hover {
-				border-color: #667eea;
+				background-color: v.$bg-light;
 			}
 
-			&-active {
-				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-				color: white;
-				border: 2px solid #667eea;
+			&:disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+		}
 
-				&:hover {
-					border-color: #667eea;
+		&-pages {
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+
+			button {
+				border: 2px solid v.$border-color-1;
+				padding: 0.25rem 0.75rem;
+				border-radius: 10px;
+				color: v.$p-color;
+
+				&.current {
+					background-color: v.$p-color;
+					color: v.$white;
+				}
+
+				&.other {
+					&:hover {
+						background-color: v.$bg-light;
+					}
 				}
 			}
 		}
diff --git a/src/app/ui/file-page/violation-table/file-page-violations-list.tsx b/src/app/ui/file-page/violation-table/file-page-violations-list.tsx
index 06d69d4..061f39c 100644
--- a/src/app/ui/file-page/violation-table/file-page-violations-list.tsx
+++ b/src/app/ui/file-page/violation-table/file-page-violations-list.tsx
@@ -8,6 +8,7 @@ import FilePageViolationInfo from '@/app/ui/file-page/violation-table/file-page-
 import { useFileViolations } from '@/app/hooks/react-query/useFileViolations';
 import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
 import DropDownList from '@/app/components/DropDownList';
+import { IconArrowLeft, IconArrowRight } from '@/app/ui/icons/icons';
 
 export default function FilePageViolationsList({
 	currentPage,
@@ -96,9 +97,6 @@ export default function FilePageViolationsList({
 							<li value="AUTHORIZED_USE">{tStatus('AUTHORIZED_USE')}</li>
 						</DropDownList>
 					</div>
-					<span>
-						{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
-					</span>
 				</div>
 
 			</div>
@@ -173,35 +171,48 @@ export default function FilePageViolationsList({
 				<FilePageViolationInfo selectedViolation={selectedViolation} />
 
 			</div>
-			{fileViolations.total_pages > 1 && (
-				<div className="pagination">
-					<button
-						onClick={() => handlePageChange(currentPage - 1)}
-						className="pagination-item pagination-item-prev"
-						disabled={!fileViolations.has_previous}
-					>
-						{t('previous')}
-					</button>
-
-					{getPageNumbers().map(pageNum => (
+			<div
+				className="sources-list-pagination"
+			>
+				<span>
+					{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
+				</span>
+				{fileViolations.total_pages > 1 && (
+					<div className="pagination-controls">
 						<button
-							key={pageNum}
-							onClick={() => handlePageChange(pageNum)}
-							className={`pagination-item ${currentPage === pageNum ? 'pagination-item-active' : ''}`}
+							onClick={() => handlePageChange(currentPage - 1)}
+							className="arrow"
+							disabled={!fileViolations.has_previous}
 						>
-							{pageNum}
+							<IconArrowLeft />
 						</button>
-					))}
 
-					<button
-						onClick={() => handlePageChange(currentPage + 1)}
-						className="pagination-item pagination-item-next"
-						disabled={!fileViolations.has_next}
-					>
-						{t('next')}
-					</button>
-				</div>
-			)}
+						<div
+							className="pagination-controls-pages"
+						>
+							{getPageNumbers().map(pageNum => (
+								<button
+									key={pageNum}
+									onClick={() => handlePageChange(pageNum)}
+									/* className={`pagination-item ${currentPage === pageNum ? 'pagination-item-active' : ''}`} */
+									className={currentPage === pageNum ? 'current' : 'other'}
+								>
+									{pageNum}
+								</button>
+							))}
+						</div>
+
+
+						<button
+							onClick={() => handlePageChange(currentPage + 1)}
+							className="arrow"
+							disabled={!fileViolations.has_next}
+						>
+							<IconArrowRight />
+						</button>
+					</div>
+				)}
+			</div>
 		</div>
 	);
 }
\ No newline at end of file