edit styles

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -329,12 +329,23 @@
 
 	.drag-drop-zone {
 		border: 3px dashed v.$p-color;
-		border-radius: 15px;
+		border-radius: .75rem;
-		padding: 40px 20px;
+		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: 2px solid #e2e8f0;
-				border-radius: 0.375rem;
+				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;