frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit styles

Browse Source
This commit is contained in:
smanylov
2026-01-15 13:11:53 +07:00
parent 7213e40b96
commit b763e438b8
7 changed files with 127 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[locale]/pages/marking-audio/page.tsx
+2 -2
View File
@@ -51,12 +51,12 @@ export default async function Page() {
description="multi-layered-protection-for-your-audios"
/>
<ProtectionStatistic fileType={FILE_TYPE} />
<div className="split-blocks">
{/* <div className="split-blocks">
<ProtectionSummary fileType={FILE_TYPE} />
<div className="protection-overview">
<StackedBarChart data={data} />
</div>
</div>
</div> */}
<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
<FilesTable fileType={FILE_TYPE} />
</div>
src/app/[locale]/pages/marking-photo/page.tsx
+2 -2
View File
@@ -48,12 +48,12 @@ export default async function Page() {
/>
<TestComponent />
<ProtectionStatistic fileType={FILE_TYPE}/>
<div className="split-blocks">
{/* <div className="split-blocks">
<ProtectionSummary fileType={FILE_TYPE} />
<div className="protection-overview">
<StackedBarChart data={data} />
</div>
</div>
</div> */}
<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
<FilesTable fileType={FILE_TYPE} />
</div>
src/app/[locale]/pages/marking-video/page.tsx
+2 -2
View File
@@ -51,12 +51,12 @@ export default async function Page() {
description="multi-layered-protection-for-your-videos"
/>
<ProtectionStatistic fileType={FILE_TYPE} />
<div className="split-blocks">
{/* <div className="split-blocks">
<ProtectionSummary fileType={FILE_TYPE} />
<div className="protection-overview">
<StackedBarChart data={data} />
</div>
</div>
</div> */}
<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
<FilesTable fileType={FILE_TYPE} />
</div>
src/app/components/dropDownList.tsx
+4 -4
View File
@@ -31,7 +31,7 @@ export default function DropDownList({ children, value, callBack, translatedValu
callBack(childValue || "");
setIsOpen(false);
},
className: `flex items-center w-full px-4 py-2 text-sm text-left hover:bg-blue-100 cursor-pointer select-none ${value === childValue ? "font-bold" : ""}`,
className: `dropdown-item ${value === childValue ? "current" : ""}`,
key: index,
});
}
@@ -39,12 +39,12 @@ export default function DropDownList({ children, value, callBack, translatedValu
});
return (
<div className="relative w-full" ref={dropdownRef}>
<div className="dropdown-wrapper" ref={dropdownRef}>
<button
onClick={() => {
setIsOpen(!isOpen)
}}
className="flex items-center justify-between w-full px-4 py-2 text-sm font-medium bg-white border-2 border-[#d1cece] rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#6365f186]"
className="dropdown-button"
>
<span className="flex items-center">
<span className="mr-2">
@@ -65,7 +65,7 @@ export default function DropDownList({ children, value, callBack, translatedValu
</svg>
</button>
{isOpen && (
<div className="absolute right-0 z-10 w-full mt-2 origin-top-right bg-white rounded-md shadow-lg border-2 border-[#d1cece] focus:outline-none">
<div className="dropdown-list">
<ul
className="py-1"
role="listbox"
src/app/components/upload-section-file.tsx
+14 -21
View File
@@ -305,22 +305,27 @@ export default function UploadSectionFile({ fileType, allowedExtensions, maxFile
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
style={{
border: isDragging ? '2px dashed #3b82f6' : '2px dashed #d1d5db',
backgroundColor: isDragging ? '#eff6ff' : '#f9fafb',
padding: '2rem',
borderRadius: '.75rem',
textAlign: 'center',
transition: 'all .2s ease-in-out'
}}
>
<IconShieldAdd />
<h4>
{t('drag-the-file-here')}
</h4>
<p className="mb-2.5 text-[#6b7280]">
{/* <p className="mb-2.5 text-[#6b7280]">
{t('or')}
</p> */}
{fileType === "image" && (
<p className="description">
{t('image-resolution')}: 100x100 - 10000x10000 {t('pixels')}
</p>
)}
<p className="description">
{t('file-format')}: {acceptString}
</p>
<p className="description">
{t('file-size')}: {t('to')} {(maxFileSize / 1024 / 1024)} {t('mb')}
</p>
<input
ref={fileInputRef}
type="file"
@@ -338,18 +343,6 @@ export default function UploadSectionFile({ fileType, allowedExtensions, maxFile
{t('select-files-to-protect')}
</button>
{fileType === "image" && (
<p className="description">
{t('image-resolution')}: 100x100 - 10000x10000 {t('pixels')}
</p>
)}
<p className="description">
{t('file-size')}: {t('to')} {(maxFileSize / 1024 / 1024)} {t('mb')}
</p>
<p className="description">
{t('file-format')}: {acceptString}
</p>
{error && (
<div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg">
<p className="text-red-600 font-medium">{error}</p>
src/app/styles/global-styles.scss
+80
View File
@@ -458,6 +458,86 @@
}
}
.dropdown-wrapper {
position: relative;
width: 100%;
.dropdown-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
line-height: 1.25;
background-color: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: #f9fafb;
}
&:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(99, 101, 241, 0.53);
outline: 2px solid transparent;
outline-offset: 2px;
}
}
.dropdown-list {
position: absolute;
right: 0;
z-index: 10;
width: 100%;
margin-top: 8px;
transform-origin: top right;
background-color: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
&:focus {
outline: none;
}
}
.dropdown-item {
display: flex;
align-items: center;
width: 100%;
padding: 8px 16px;
font-size: 14px;
text-align: left;
cursor: pointer;
user-select: none;
&:hover {
background-color: #dbeafe;
}
&.current {
font-weight: 700;
}
}
}
.yaPreloadingSuggestBlockContainer {
height: 52px !important;
}
src/app/styles/pages-styles.scss
+23 -9
View File
@@ -329,12 +329,23 @@
.drag-drop-zone {
border: 3px dashed v.$p-color;
border-radius: 15px;
padding: 40px 20px;
border-radius: .75rem;
padding: 2rem;
text-align: center;
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
margin-bottom: 20px;
transition: all 0.3s ease;
transition: all .2s ease-in-out;
&.dragging {
border-color: #3b82f6;
background-color: #eff6ff;
}
&:hover {
border-color: #764ba2;
background: linear-gradient(135deg, #e0f2fe, #ddd6fe);
transform: scale(1.01);
}
.icon {
width: 70px;
@@ -352,12 +363,13 @@
.description {
color: v.$text-s;
margin-bottom: 5px;
text-align: start;
text-align: center;
}
.btn-primary {
background: v.$p-color;
margin-bottom: 40px;
margin-bottom: 10px;
margin-top: 20px;
}
}
@@ -529,8 +541,10 @@
padding-right: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
border: 1px solid;
border-radius: 0.375rem;
border: 2px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 1px 2px #0000000d;
/* */
&:hover {
background-color: v.$bg-light;
@@ -548,12 +562,12 @@
gap: 0.25rem;
button {
border: 1px solid v.$p-color;
border: 2px solid v.$p-color;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
border-radius: 0.375rem;
border-radius: 10px;
&.current {
background-color: v.$p-color;