edit styles

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>