From fc7efbfa07af3dd3f0550fb9e578d4dfc6b1ced6 Mon Sep 17 00:00:00 2001 From: smanylov Date: Wed, 21 Jan 2026 15:05:02 +0700 Subject: [PATCH] edit styles --- src/app/[locale]/pages/dashboard/page.tsx | 1 - src/app/[locale]/pages/marking-photo/page.tsx | 5 - src/app/components/tanstakTable.tsx | 135 +++++++++++------- src/app/styles/global-styles.scss | 15 +- src/app/styles/pages-styles.scss | 115 +++++++++++++-- src/app/ui/icons/icons.tsx | 6 +- src/i18n/messages/en.json | 8 +- src/i18n/messages/ru.json | 8 +- 8 files changed, 212 insertions(+), 81 deletions(-) diff --git a/src/app/[locale]/pages/dashboard/page.tsx b/src/app/[locale]/pages/dashboard/page.tsx index 2c81c21..93962e9 100644 --- a/src/app/[locale]/pages/dashboard/page.tsx +++ b/src/app/[locale]/pages/dashboard/page.tsx @@ -37,7 +37,6 @@ export default function Page() { - ); diff --git a/src/app/[locale]/pages/marking-photo/page.tsx b/src/app/[locale]/pages/marking-photo/page.tsx index 8d149f0..f0f289c 100644 --- a/src/app/[locale]/pages/marking-photo/page.tsx +++ b/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" /> - {/*
diff --git a/src/app/components/tanstakTable.tsx b/src/app/components/tanstakTable.tsx index 61593af..a334407 100644 --- a/src/app/components/tanstakTable.tsx +++ b/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 }) {
), cell: ({ row }) => ( -
+
- {/* {row.original.fileName} */} - {cutFileName(row.original.fileName)} + + {cutFileName(row.original.fileName)} +
- {cutFileExtension(row.original.fileName)} • {row.original?.status} + {cutFileExtension(row.original.fileName)} {row.original?.status}
@@ -283,7 +284,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
), cell: ({ row }) => ( -
+
{row.original.size !== undefined ? convertBytes(row.original.size) : '-'}
), @@ -317,7 +318,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) { ), cell: ({ row }) => { return ( -
+
{row.original.uploadDate ? ( <> {formatDate(row.original.uploadDate)} @@ -361,8 +362,10 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) { ), cell: ({ row }) => { return ( -
- {t('status')} +
+ + {t('status')} +
) }, @@ -378,33 +381,39 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) { }, cell: ({ row }) => (
-
+
- -
-
+
+
+
@@ -624,9 +633,25 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) { return (
- +

+ {(() => { + 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') + } + })()} +

+ {/* Фильтры */} -
+
{t('date-filter')}:
@@ -779,20 +804,24 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
- - + {table.getCanPreviousPage() && ( + + )} + {table.getCanPreviousPage() && ( + + )}
{Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => { @@ -822,22 +851,26 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) { })}
- - + {table.getCanNextPage() && ( + + )} + {table.getCanNextPage() && ( + + )}
-
+
); } \ No newline at end of file diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index b362b23..d67eab1 100644 --- a/src/app/styles/global-styles.scss +++ b/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; } } diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index d435660..a5f566a 100644 --- a/src/app/styles/pages-styles.scss +++ b/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; - padding-left: 0.75rem; - padding-right: 0.75rem; - padding-top: 0.25rem; - padding-bottom: 0.25rem; + border: 2px solid #e2e8f0; + padding: 0.25rem 0.75rem; 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: auto; */ + /* table-layout: fixed; */ @media (max-width: 1200px) { width: 1200px; @@ -663,11 +684,49 @@ } td { - padding-left: 1rem; - padding-right: 1rem; - padding-top: 1rem; - padding-bottom: 1rem; + padding: 15px 0; 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; } diff --git a/src/app/ui/icons/icons.tsx b/src/app/ui/icons/icons.tsx index 6f3e370..12cd2c4 100644 --- a/src/app/ui/icons/icons.tsx +++ b/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 ( - - - + ) } diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index 0326d69..a0318ae 100644 --- a/src/i18n/messages/en.json +++ b/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", diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index 02d5b49..e6ea473 100644 --- a/src/i18n/messages/ru.json +++ b/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": "и",