edit styles

src/app/[locale]/pages/dashboard/page.tsx

@@ -37,7 +37,6 @@ export default function Page() {
 				<DahboardLimitsSection />
 				<DahboardGeographySection />
 			</div>
-			<FilesTable fileType={'all'} />
 			<DashboardLastCheck />
 		</Suspense>
 	);

src/app/[locale]/pages/marking-photo/page.tsx

@@ -1,10 +1,6 @@
-import ProtectionSummary from '@/app/ui/marking-page/protection-summary';
 import FilesTable from '@/app/ui/dashboard/files-table';
-import PageTitle from '@/app/ui/page-title';
 import UploadSectionFile from '@/app/components/upload-section-file';
 import { getAllowedFilesExtensions } from '@/app/actions/fileUpload';
-import { StackedBarChart } from '@/app/components/StackedBarChart';
-import { TestComponent } from '@/app/components/test-component';
 import PageTitleColorFrame from '@/app/ui/page-title-color-frame';
 import ProtectionStatistic from '@/app/ui/marking-page/new/protection-statistic';
 
@@ -46,7 +42,6 @@ export default async function Page() {
 				title="image-protection"
 				description="multi-layered-protection-for-your-images"
 			/>
-			<TestComponent />
 			<ProtectionStatistic fileType={FILE_TYPE}/>
 			{/* <div className="split-blocks">
 				<ProtectionSummary fileType={FILE_TYPE} />

src/app/components/tanstakTable.tsx

@@ -98,7 +98,7 @@ const cutFileName = (fileName: string) => {
 	const extension = fileName.substring(lastDotIndex);
 
 	if (fileName.length <= MAX_FILE_NAME_LENGTH) {
-		return nameWithoutExtension;
+		return fileName;
 	}
 
 	const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3;
@@ -199,14 +199,15 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					</div>
 				),
 				cell: ({ row }) => (
-					<div className="flex items-center space-x-2">
+					<div className="flex items-center space-x-2 table-item">
 						<FileTypeIcon type={row.original.fileType} />
 						<div>
 							<div className="font-medium w-full truncate" title={row.original.fileName}>
-								{/* {row.original.fileName} */}
+								<span className="font-semibold">
 									{cutFileName(row.original.fileName)}
+								</span>
 								<br />
-								{cutFileExtension(row.original.fileName)} • <span className="text-[#10b981]">{row.original?.status}</span>
+								<span className="table-item-extension">{cutFileExtension(row.original.fileName)}</span> <span className="table-item-protected">{row.original?.status}</span>
 							</div>
 						</div>
 					</div>
@@ -283,7 +284,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 					</div>
 				),
 				cell: ({ row }) => (
-					<div className="text-center">
+					<div className="text-center table-item">
 						{row.original.size !== undefined ? convertBytes(row.original.size) : '-'}
 					</div>
 				),
@@ -317,7 +318,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				),
 				cell: ({ row }) => {
 					return (
-						<div className="text-center">
+						<div className="text-center table-item">
 							{row.original.uploadDate ? (
 								<>
 									{formatDate(row.original.uploadDate)}
@@ -361,8 +362,10 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				),
 				cell: ({ row }) => {
 					return (
-						<div className={`text-center font-semibold`}>
+						<div className="text-center font-semibold table-item">
+							<span className="table-item-status">
 								{t('status')}
+							</span>
 						</div>
 					)
 				},
@@ -378,33 +381,39 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				},
 				cell: ({ row }) => (
 					<div className="actions">
-						<div className="actions-group">
+						<div className="actions-group" style={{ display: "none" }}>
 							<button
 								onClick={() => handleView(row.original)}
 								className="bg-blue-500 hover:bg-blue-600"
 							>
 								<IconEye />
 							</button>
-							<button
-								onClick={() => handleDownload(row.original)}
-								disabled={isFileLoading}
-								className="bg-green-500 hover:bg-green-600"
-							>
-								<IconFileDownload />
-							</button>
-						</div>
-						<div className="actions-group">
 							<button
 								onClick={() => handleProtect(row.original)}
 								className="bg-violet-500 hover:bg-violet-600"
 							>
 								<IconShieldExclamation />
 							</button>
+						</div>
+						<div className="actions-group">
+							<button
+								onClick={() => handleDownload(row.original)}
+								disabled={isFileLoading}
+								className="table-action-download"
+							>
+								<IconFileDownload />
+								<span>
+									{t('download')}
+								</span>
+							</button>
 							<button
 								onClick={() => handleOpenWindowForRemove(row.original)}
-								className="bg-red-700 hover:bg-red-800"
+								className="table-action-delete"
 							>
 								<IconDelete />
+								<span>
+									{t('delete')}
+								</span>
 							</button>
 						</div>
 
@@ -624,9 +633,25 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 
 	return (
 		<div className="tanstak-table-wrapper">
-			<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow}></ModalWindow>
+			<h3
+				className="tanstak-table-title"
+			>
+				{(() => {
+					switch (fileType) {
+						case 'image':
+							return t('protected-image')
+						case 'video':
+							return t('protected-video')
+						case 'audio':
+							return t('protected-audio')
+						default:
+							return t('table-description')
+					}
+				})()}
+			</h3>
+			<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow} />
 			{/* Фильтры */}
-			<div className="tanstak-table-filtres">
+			<div className="tanstak-table-filtres" style={{ display: "none" }}>
 				<div className="table-filtres-wrapper">
 					<div className="table-filtres-item">
 						<div className="table-filtres-label">{t('date-filter')}:</div>
@@ -779,6 +804,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				</div>
 
 				<div className="pagination-controls">
+					{table.getCanPreviousPage() && (
 						<button
 							className="arrow"
 							onClick={() => table.firstPage()}
@@ -786,6 +812,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 						>
 							<IconDoubleArrowLeft />
 						</button>
+					)}
+					{table.getCanPreviousPage() && (
 						<button
 							className="arrow"
 							onClick={() => table.previousPage()}
@@ -793,6 +821,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 						>
 							<IconArrowLeft />
 						</button>
+					)}
 
 					<div className="pagination-controls-pages">
 						{Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => {
@@ -822,6 +851,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 						})}
 					</div>
 
+					{table.getCanNextPage() && (
 						<button
 							className="arrow"
 							onClick={() => table.nextPage()}
@@ -829,6 +859,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 						>
 							<IconArrowRight />
 						</button>
+					)}
+					{table.getCanNextPage() && (
 						<button
 							className="arrow"
 							onClick={() => table.lastPage()}
@@ -836,8 +868,9 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 						>
 							<IconDoubleArrowRight />
 						</button>
+					)}
 				</div>
 			</div>
-		</div>
+		</div >
 	);
 }

src/app/styles/global-styles.scss

@@ -370,15 +370,24 @@
 
 .color {
 	&-image {
-		color: v.$color-image;
+		color: v.$white;
+		background: v.$color-image;
+		padding: 8px;
+		border-radius: 6px;
 	}
 
 	&-audio {
-		color: v.$color-audio;
+		color: v.$white;
+		background: v.$color-audio;
+		padding: 8px;
+		border-radius: 6px;
 	}
 
 	&-video {
-		color: v.$color-video;
+		color: v.$white;
+		background: v.$color-video;
+		padding: 8px;
+		border-radius: 6px;
 	}
 }
 

src/app/styles/pages-styles.scss

@@ -463,6 +463,24 @@
 		border-bottom: 1px solid var(--color-gray-200);
 	}
 
+	.tanstak-table-title {
+		font-size: 18px;
+		font-weight: 600;
+		display: flex;
+		align-items: center;
+		color: #1f2937;
+		margin-bottom: 20px;
+
+		&::before {
+			content: '';
+			width: 6px;
+			height: 6px;
+			background: #6366f1;
+			border-radius: 50%;
+			margin-right: 10px;
+		}
+	}
+
 	.tanstak-table-filtres {
 		display: flex;
 		flex-direction: column;
@@ -544,6 +562,12 @@
 				border: 2px solid #e2e8f0;
 				border-radius: 10px;
 				box-shadow: 0 1px 2px #0000000d;
+				color: v.$p-color;
+
+				.icon {
+					width: 18px;
+				}
+
 				/*  */
 
 				&:hover {
@@ -562,12 +586,10 @@
 				gap: 0.25rem;
 
 				button {
-					border: 2px solid v.$p-color;
+					border: 2px solid #e2e8f0;
-					padding-left: 0.75rem;
+					padding: 0.25rem 0.75rem;
-					padding-right: 0.75rem;
-					padding-top: 0.25rem;
-					padding-bottom: 0.25rem;
 					border-radius: 10px;
+					color: v.$p-color;
 
 					&.current {
 						background-color: v.$p-color;
@@ -592,8 +614,7 @@
 
 	.tanstak-table {
 		width: 100%;
-		table-layout: fixed;
+		/* table-layout: fixed; */
-		/* table-layout: auto; */
 
 		@media (max-width: 1200px) {
 			width: 1200px;
@@ -663,11 +684,49 @@
 			}
 
 			td {
-				padding-left: 1rem;
+				padding: 15px 0;
-				padding-right: 1rem;
-				padding-top: 1rem;
-				padding-bottom: 1rem;
 				white-space: nowrap;
+
+				&:first-child {
+					padding-left: 15px;
+				}
+
+				&:last-child {
+					padding-right: 15px;
+				}
+			}
+
+			.table-item {
+				color: v.$text-s;
+				font-size: 14px;
+			}
+
+			.table-item-protected {
+				color: #10b981;
+				font-size: 12px;
+				position: relative;
+				margin-left: 5px;
+				padding-left: 5px;
+
+				&::before {
+					content: '•';
+					color: v.$text-s;
+					position: absolute;
+					left: -5px;
+					top: 50%;
+					transform: translateY(-50%);
+				}
+			}
+
+			.table-item-extension {
+				text-transform: uppercase;
+				font-size: 14px;
+			}
+
+			.table-item-status {
+				padding: 2px 10px;
+				border-radius: 15px;
+				background-color: v.$b-color-2;
 			}
 
 			.actions {
@@ -685,15 +744,43 @@
 					padding: 4px 12px;
 					font-size: 14px;
 					line-height: 20px;
-					border-radius: 4px;
+					border-radius: 8px;
 					color: v.$white;
+					cursor: pointer;
+					transition: all 0.3s ease-in;
 
-					.icon {}
+					.icon {
+						width: 18px;
+					}
 
 					@media (max-width: 1200px) {
 						padding: 4px;
 					}
 				}
+
+				span {
+					padding-left: 5px;
+				}
+			}
+
+			.table-action-download {
+				display: flex;
+				background-color: #3b72e0;
+				align-items: center;
+
+				&:hover {
+					background-color: #2d56a8;
+				}
+			}
+
+			.table-action-delete {
+				display: flex;
+				background-color: #e80a14;
+				align-items: center;
+
+				&:hover {
+					background-color: #9f0712;
+				}
 			}
 		}
 	}
@@ -1245,7 +1332,7 @@
 			right: -50%;
 			width: 200%;
 			height: 200%;
-			background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+			background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
 			opacity: 0;
 			transition: opacity 0.4s ease;
 		}

src/app/ui/icons/icons.tsx

@@ -1,12 +1,8 @@
 /* https://icon-sets.iconify.design/ic/ */
 
-import { CLIENT_STATIC_FILES_RUNTIME_WEBPACK } from 'next/dist/shared/lib/constants'
-
 export function IconImageFile() {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m14 2l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm4 18V9h-5V4H6v16zm-1-7v6H7l5-5l2 2m-4-5.5A1.5 1.5 0 0 1 8.5 12A1.5 1.5 0 0 1 7 10.5A1.5 1.5 0 0 1 8.5 9a1.5 1.5 0 0 1 1.5 1.5" /></svg>
-			<path fill="currentColor" d="M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-4.86 8.86l-3 3.87L9 13.14L6 17h12z" />
-		</svg>
 	)
 }
 

src/i18n/messages/en.json

@@ -174,7 +174,13 @@
 		"monitoring-copyright-infringements": "Monitoring copyright infringements",
 		"monitoring-copyright-infringements-description": "Monitor and manage copyright infringement of your protected content online",
 		"referral-program-description": "Invite your friends and earn up to 25% commission on every purchase! Share the link and get rewarded.",
-		"upload-date": "Upload date"
+		"upload-date": "Upload date",
+		"download": "Download",
+		"delete": "Delete",
+		"table-description": "Table of all files",
+		"protected-image": "Protected images",
+		"protected-video": "Protected videos",
+		"protected-audio": "Protected audio"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -174,7 +174,13 @@
 		"monitoring-copyright-infringements": "Мониторинг нарушений авторских прав",
 		"monitoring-copyright-infringements-description": "Отслеживание и управление нарушениями авторских прав на ваш защищенный контент в интернете",
 		"referral-program-description": "Приглашайте друзей и зарабатывайте до 25% комиссии с каждой их покупки! Делитесь ссылкой, получайте вознаграждение.",
-		"upload-date": "Дата загрузки"
+		"upload-date": "Дата загрузки",
+		"download": "Скачать",
+		"delete": "Удалить",
+		"table-description": "Таблица всех файлов",
+		"protected-image": "Защищенные изображения",
+		"protected-video": "Защищенные видео",
+		"protected-audio": "Защищенные аудио"
 	},
 	"Login-register-form": {
 		"and": "и",