change pagination styles for file matches table

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;
+		align-items: center;
-		gap: 4px;
+		gap: 0.5rem;
-		margin-top: 20px;
 
-		&-item {
+		.arrow {
-			padding: 8px 12px;
+			padding-left: 0.5rem;
-			border-radius: 8px;
+			padding-right: 0.5rem;
-			text-decoration: none;
+			padding-top: 0.25rem;
-			font-weight: 600;
+			padding-bottom: 0.25rem;
-			background: white;
+			border: 2px solid v.$border-color-1;
-			color: #374151;
+			border-radius: 10px;
-			border: 2px solid #e5e7eb;
+			box-shadow: 0 1px 2px #0000000d;
-			transition: all 0.2s ease;
+			color: v.$p-color;
 
-			&:disabled {
+			.icon {
-				opacity: 0.6;
+				width: 18px;
 			}
 
 			&:hover {
-				border-color: #667eea;
+				background-color: v.$bg-light;
 			}
 
-			&-active {
+			&:disabled {
-				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+				opacity: 0.5;
-				color: white;
+				cursor: not-allowed;
-				border: 2px solid #667eea;
+			}
+		}
 
-				&:hover {
+		&-pages {
-					border-color: #667eea;
+			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;
+					}
 				}
 			}
 		}

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
-				<div className="pagination">
+				className="sources-list-pagination"
-					<button
+			>
-						onClick={() => handlePageChange(currentPage - 1)}
+				<span>
-						className="pagination-item pagination-item-prev"
+					{t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
-						disabled={!fileViolations.has_previous}
+				</span>
-					>
+				{fileViolations.total_pages > 1 && (
-						{t('previous')}
+					<div className="pagination-controls">
-					</button>
-
-					{getPageNumbers().map(pageNum => (
 						<button
-							key={pageNum}
+							onClick={() => handlePageChange(currentPage - 1)}
-							onClick={() => handlePageChange(pageNum)}
+							className="arrow"
-							className={`pagination-item ${currentPage === pageNum ? 'pagination-item-active' : ''}`}
+							disabled={!fileViolations.has_previous}
 						>
-							{pageNum}
+							<IconArrowLeft />
 						</button>
-					))}
 
-					<button
+						<div
-						onClick={() => handlePageChange(currentPage + 1)}
+							className="pagination-controls-pages"
-						className="pagination-item pagination-item-next"
+						>
-						disabled={!fileViolations.has_next}
+							{getPageNumbers().map(pageNum => (
-					>
+								<button
-						{t('next')}
+									key={pageNum}
-					</button>
+									onClick={() => handlePageChange(pageNum)}
-				</div>
+									/* 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>
 	);
 }