rewrite table styles from tailwind into scss

src/app/components/tanstakTable.tsx

@@ -48,15 +48,15 @@ type ApiResponse = {
 const FileTypeIcon = ({ type }: { type: string }) => {
 	switch (type) {
 		case 'image':
-			return <span className="text-[#f08c00]">
+			return <span className="color-image">
 				<IconImageFile />
 			</span>;
 		case 'video':
-			return <span className="text-[#2f9e44]">
+			return <span className="color-video">
 				<IconVideoFile />
 			</span>;
 		case 'audio':
-			return <span className="text-[#1971c2]">
+			return <span className="color-audio">
 				<IconAudioFile />
 			</span>;
 		default:
@@ -136,13 +136,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 			{
 				accessorKey: 'fileName',
 				header: ({ column }) => (
-					<div className="flex items-center justify-start">
+					<div className="column start">
 						<span>
 							{t('file')}
 						</span>
 						<button
 							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-							className="ml-2 p-1 hover:bg-gray-200 rounded"
+							className="sort-button"
 						>
 							{
 								column.getIsSorted() === 'asc' ?
@@ -164,7 +164,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					<div className="flex items-center space-x-2 w-[250px]">
 						<FileTypeIcon type={row.original.fileType} />
 						<div>
-							<div className="font-medium w-full max-w-[300px] truncate" title={row.original.fileName}>{row.original.fileName}</div>
+							<div className="font-medium w-full max-w-[250px] truncate" title={row.original.fileName}>{row.original.fileName}</div>
 						</div>
 					</div>
 				),
@@ -173,13 +173,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 			{
 				accessorKey: 'status',
 				header: ({ column }) => (
-					<div className="flex items-center justify-center">
+					<div className="column">
 						<span>
 							status
 						</span>
 						<button
 							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-							className="ml-2 p-1 hover:bg-gray-200 rounded"
+							className="sort-button"
 						>
 							{
 								column.getIsSorted() === 'asc' ?
@@ -208,13 +208,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 			{
 				accessorKey: 'violations',
 				header: ({ column }) => (
-					<div className="flex items-center justify-center">
+					<div className="column">
 						<span>
 							{t('violations')}
 						</span>
 						<button
 							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-							className="ml-2 p-1 hover:bg-gray-200 rounded"
+							className="sort-button"
 						>
 							{
 								column.getIsSorted() === 'asc' ?
@@ -250,13 +250,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 			{
 				accessorKey: 'checks',
 				header: ({ column }) => (
-					<div className="flex items-center justify-center">
+					<div className="column">
 						<span>
 							{t('checks')}
 						</span>
 						<button
 							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-							className="ml-2 p-1 hover:bg-gray-200 rounded"
+							className="sort-button"
 						>
 							{
 								column.getIsSorted() === 'asc' ?
@@ -283,13 +283,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 			{
 				accessorKey: 'lastCheck',
 				header: ({ column }) => (
-					<div className="flex items-center justify-center">
+					<div className="column">
 						<span>
 							{t('last-check')}
 						</span>
 						<button
 							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-							className="ml-2 p-1 hover:bg-gray-200 rounded"
+							className="sort-button"
 						>
 							{
 								column.getIsSorted() === 'asc' ?
@@ -328,7 +328,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				id: 'actions',
 				header: () => {
 					return (
-						<div className="flex items-center justify-center">
+						<div className="column">
 							{t('actions')}
 						</div>
 					)
@@ -542,13 +542,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 	});
 
 	return (
-		<div className="p-6 mx-auto tanstak-table">
+		<div className="tanstak-table-wrapper">
 			<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow}></ModalWindow>
 			{/* Фильтры */}
-			<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 pb-4 pt-0 px-0">
-				<div className="flex flex-col md:flex-row gap-4 w-full md:w-auto">
-					<div className="flex flex-col w-50">
-						<div className="text-sm font-medium mb-1">{t('date-filter')}:</div>
+			<div className="tanstak-table-filtres">
+				<div className="table-filtres-wrapper">
+					<div className="table-filtres-item">
+						<div className="table-filtres-label">{t('date-filter')}:</div>
 						<DropDownList
 							value={dateFilter}
 							translatedValue={(() => {
@@ -586,8 +586,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					</div>
 
 					{fileType === "all" && (
-						<div className="flex flex-col w-50">
-							<div className="text-sm font-medium mb-1">{t('type-filter')}:</div>
+						<div className="table-filtres-item">
+							<div className="table-filtres-label">{t('type-filter')}:</div>
 							<DropDownList
 								value={typeFilter}
 								translatedValue={
@@ -623,8 +623,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					)}
 				</div>
 
-				<div className="flex flex-col w-full md:w-auto">
-					<div className="text-sm font-medium mb-1">{t('items-per-page')}:</div>
+				<div className="table-filtres-item">
+					<div className="table-filtres-label">{t('items-per-page')}:</div>
 					<DropDownList
 						value={table.getState().pagination.pageSize}
 						//@ts-ignore сделал так потому что для table.setPageSize нужна цифра
@@ -640,83 +640,80 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 			</div>
 
 			{/* Таблица */}
-			<div className='w-full tanstak-file-table'>
-				<div className="overflow-x-auto rounded-lg shadow">
-					<table className=" divide-y divide-gray-200 table-fixed md:table-auto w-full">
-						<thead className="bg-gray-50">
-							{table.getHeaderGroups().map(headerGroup => (
-								<tr key={headerGroup.id}>
-									{headerGroup.headers.map(header => (
-										<th
-											key={header.id}
-											className="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider whitespace-nowrap"
-										>
-											{header.isPlaceholder
-												? null
-												: typeof header.column.columnDef.header === 'function'
-													? header.column.columnDef.header(header.getContext())
-													: header.column.columnDef.header as string}
-										</th>
+			<div className="tanstak-table-block">
+				<table className="tanstak-table">
+					<thead className="tanstak-table-head">
+						{table.getHeaderGroups().map(headerGroup => (
+							<tr key={headerGroup.id}>
+								{headerGroup.headers.map(header => (
+									<th
+										key={header.id}
+									>
+										{header.isPlaceholder
+											? null
+											: typeof header.column.columnDef.header === 'function'
+												? header.column.columnDef.header(header.getContext())
+												: header.column.columnDef.header as string}
+									</th>
+								))}
+							</tr>
+						))}
+					</thead>
+					<tbody className="tanstak-table-body">
+						{table.getRowModel().rows.length > 0 ? (
+							table.getRowModel().rows.map(row => (
+								<tr key={row.id}>
+									{row.getVisibleCells().map(cell => (
+										<td key={cell.id}>
+											{typeof cell.column.columnDef.cell === 'function'
+												? cell.column.columnDef.cell(cell.getContext())
+												: cell.getValue() as string}
+										</td>
 									))}
 								</tr>
-							))}
-						</thead>
-						<tbody className="bg-white divide-y divide-gray-200">
-							{table.getRowModel().rows.length > 0 ? (
-								table.getRowModel().rows.map(row => (
-									<tr key={row.id} className="hover:bg-gray-50 transition-colors">
-										{row.getVisibleCells().map(cell => (
-											<td key={cell.id} className="px-6 py-4 whitespace-nowrap">
-												{typeof cell.column.columnDef.cell === 'function'
-													? cell.column.columnDef.cell(cell.getContext())
-													: cell.getValue() as string}
-											</td>
-										))}
-									</tr>
-								))
-							) : (
-								<tr>
-									<td colSpan={columns.length} className="px-6 py-8 text-center text-gray-500">
-										{t('no-data-for-selected-filters')}
-									</td>
-								</tr>
-							)}
-						</tbody>
-					</table>
-				</div>
+							))
+						) : (
+							<tr>
+								<td colSpan={columns.length} className="text-center">
+									{t('no-data-for-selected-filters')}
+								</td>
+							</tr>
+						)}
+					</tbody>
+				</table>
 			</div>
 
 			{/* Пагинация */}
-			<div className="flex flex-col md:flex-row items-end justify-between mt-6 gap-4">
-				<div className="flex items-center gap-2">
-					<span className="text-sm text-gray-700">
+			<div className="tanstak-table-pagination">
+				<div className="pagination-info">
+					<span className="pagination-info-pages">
 						{t('page')}{' '}
 						<strong>
 							{table.getState().pagination.pageIndex + 1} {t('out-of')} {table.getPageCount() ? table.getPageCount() : 1}
 						</strong>
 					</span>
-					<span className="text-sm text-gray-500">
+					<span className="pagination-info-files">
 						| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {filteredData.length} {t('files')}
 					</span>
 				</div>
 
-				<div className="flex items-center gap-2">
+				<div className="pagination-controls">
 					<button
-						className="px-2 py-1 border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+						className="arrow"
 						onClick={() => table.firstPage()}
 						disabled={!table.getCanPreviousPage()}
 					>
 						<IconDoubleArrowLeft />
 					</button>
 					<button
-						className="px-2 py-1 border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+						className="arrow"
 						onClick={() => table.previousPage()}
 						disabled={!table.getCanPreviousPage()}
 					>
 						<IconArrowLeft />
 					</button>
 
-					<div className="flex items-center gap-1">
+					<div className="pagination-controls-pages">
 						{Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => {
 							const pageIndex = Math.max(
 								0,
@@ -730,9 +727,9 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 								return (
 									<button
 										key={pageIndex}
-										className={`border border-black px-3 py-1 rounded-md ${table.getState().pagination.pageIndex === pageIndex
-											? 'bg-blue-500 text-white'
-											: 'hover:bg-gray-100'
+										className={`${table.getState().pagination.pageIndex === pageIndex
+											? 'current'
+											: 'other'
 											}`}
 										onClick={() => table.setPageIndex(pageIndex)}
 									>
@@ -745,14 +742,14 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					</div>
 
 					<button
-						className="px-2 py-1 border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+						className="arrow"
 						onClick={() => table.nextPage()}
 						disabled={!table.getCanNextPage()}
 					>
 						<IconArrowRight />
 					</button>
 					<button
-						className="px-2 py-1 border rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+						className="arrow"
 						onClick={() => table.lastPage()}
 						disabled={!table.getCanNextPage()}
 					>