ahmed-bakr1988/SaaS-PDF
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement dark mode support and enhance UI components for better accessibility and insert new lang french.

Browse Source
This commit is contained in:
Your Name
2026-03-03 10:53:52 +02:00
parent 31f1e4b312
commit 071c66d3b1
13 changed files with 412 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/shared/DownloadButton.tsx
View File

@@ -16,13 +16,13 @@ export default function DownloadButton({ result, onStartOver }: DownloadButtonPr
if (!result.download_url) return null;
return (
<div className="rounded-2xl bg-emerald-50 p-6 ring-1 ring-emerald-200">
<div className="rounded-2xl bg-emerald-50 p-6 ring-1 ring-emerald-200 dark:bg-emerald-900/20 dark:ring-emerald-800">
{/* Success header */}
<div className="mb-4 text-center">
<p className="text-lg font-semibold text-emerald-800">
<p className="text-lg font-semibold text-emerald-800 dark:text-emerald-300">
{t('result.conversionComplete')}
</p>
<p className="mt-1 text-sm text-emerald-600">
<p className="mt-1 text-sm text-emerald-600 dark:text-emerald-400">
{t('result.downloadReady')}
</p>
</div>
@@ -31,24 +31,24 @@ export default function DownloadButton({ result, onStartOver }: DownloadButtonPr
{(result.original_size || result.compressed_size) && (
<div className="mb-4 grid grid-cols-2 gap-3 sm:grid-cols-3">
{result.original_size && (
<div className="rounded-lg bg-white p-3 text-center">
<p className="text-xs text-slate-500">{t('result.originalSize')}</p>
<p className="text-sm font-semibold text-slate-900">
<div className="rounded-lg bg-white p-3 text-center dark:bg-slate-800">
<p className="text-xs text-slate-500 dark:text-slate-400">{t('result.originalSize')}</p>
<p className="text-sm font-semibold text-slate-900 dark:text-slate-100">
{formatFileSize(result.original_size)}
</p>
</div>
)}
{result.compressed_size && (
<div className="rounded-lg bg-white p-3 text-center">
<p className="text-xs text-slate-500">{t('result.newSize')}</p>
<p className="text-sm font-semibold text-slate-900">
<div className="rounded-lg bg-white p-3 text-center dark:bg-slate-800">
<p className="text-xs text-slate-500 dark:text-slate-400">{t('result.newSize')}</p>
<p className="text-sm font-semibold text-slate-900 dark:text-slate-100">
{formatFileSize(result.compressed_size)}
</p>
</div>
)}
{result.reduction_percent !== undefined && (
<div className="rounded-lg bg-white p-3 text-center">
<p className="text-xs text-slate-500">{t('result.reduction')}</p>
<div className="rounded-lg bg-white p-3 text-center dark:bg-slate-800">
<p className="text-xs text-slate-500 dark:text-slate-400">{t('result.reduction')}</p>
<p className="text-sm font-semibold text-emerald-600">
{result.reduction_percent}%
</p>
@@ -70,7 +70,7 @@ export default function DownloadButton({ result, onStartOver }: DownloadButtonPr
</a>
{/* Expiry notice */}
<div className="mt-3 flex items-center justify-center gap-1.5 text-xs text-slate-500">
<div className="mt-3 flex items-center justify-center gap-1.5 text-xs text-slate-500 dark:text-slate-400">
<Clock className="h-3.5 w-3.5" />
{t('result.linkExpiry')}
</div>
@@ -78,7 +78,7 @@ export default function DownloadButton({ result, onStartOver }: DownloadButtonPr
{/* Start over */}
<button
onClick={onStartOver}
className="mt-4 flex w-full items-center justify-center gap-2 text-sm font-medium text-primary-600 transition-colors hover:text-primary-700"
className="mt-4 flex w-full items-center justify-center gap-2 text-sm font-medium text-primary-600 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
>
<RotateCcw className="h-4 w-4" />
{t('common.startOver')}

24
frontend/src/components/shared/FileUploader.tsx
View File

@@ -69,13 +69,13 @@ export default function FileUploader({
isDragActive ? 'text-primary-500' : 'text-slate-400'
}`}
/>
<p className="mb-2 text-base font-medium text-slate-700">
<p className="mb-2 text-base font-medium text-slate-700 dark:text-slate-300">
{t('common.dragDrop')}
</p>
{acceptLabel && (
<p className="text-sm text-slate-500">{acceptLabel}</p>
<p className="text-sm text-slate-500 dark:text-slate-400">{acceptLabel}</p>
)}
<p className="mt-1 text-xs text-slate-400">
<p className="mt-1 text-xs text-slate-400 dark:text-slate-500">
{t('common.maxSize', { size: maxSizeMB })}
</p>
</div>
@@ -83,13 +83,13 @@ export default function FileUploader({
{/* Selected File */}
{file && !isUploading && (
<div className="flex items-center gap-3 rounded-xl bg-primary-50 p-4 ring-1 ring-primary-200">
<File className="h-8 w-8 flex-shrink-0 text-primary-600" />
<div className="flex items-center gap-3 rounded-xl bg-primary-50 p-4 ring-1 ring-primary-200 dark:bg-primary-900/20 dark:ring-primary-800">
<File className="h-8 w-8 flex-shrink-0 text-primary-600 dark:text-primary-400" />
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium text-slate-900">
<p className="truncate text-sm font-medium text-slate-900 dark:text-slate-100">
{file.name}
</p>
<p className="text-xs text-slate-500">{formatFileSize(file.size)}</p>
<p className="text-xs text-slate-500 dark:text-slate-400">{formatFileSize(file.size)}</p>
</div>
{onReset && (
<button
@@ -105,12 +105,12 @@ export default function FileUploader({
{/* Upload Progress */}
{isUploading && (
<div className="rounded-xl bg-slate-50 p-4 ring-1 ring-slate-200">
<div className="rounded-xl bg-slate-50 p-4 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
<div className="mb-2 flex items-center justify-between">
<span className="text-sm font-medium text-slate-700">
<span className="text-sm font-medium text-slate-700 dark:text-slate-300">
{t('common.upload')}...
</span>
<span className="text-sm text-slate-500">{uploadProgress}%</span>
<span className="text-sm text-slate-500 dark:text-slate-400">{uploadProgress}%</span>
</div>
<div className="h-2 w-full overflow-hidden rounded-full bg-slate-200">
<div
@@ -123,8 +123,8 @@ export default function FileUploader({
{/* Error */}
{error && (
<div className="mt-3 rounded-xl bg-red-50 p-3 ring-1 ring-red-200">
<p className="text-sm text-red-700">{error}</p>
<div className="mt-3 rounded-xl bg-red-50 p-3 ring-1 ring-red-200 dark:bg-red-900/20 dark:ring-red-800">
<p className="text-sm text-red-700 dark:text-red-400">{error}</p>
</div>
)}
</div>

8
frontend/src/components/shared/ProgressBar.tsx
View File

@@ -15,17 +15,17 @@ export default function ProgressBar({ state, message }: ProgressBarProps) {
const isComplete = state === 'SUCCESS';
return (
<div className="rounded-xl bg-slate-50 p-5 ring-1 ring-slate-200">
<div className="rounded-xl bg-slate-50 p-5 ring-1 ring-slate-200 dark:bg-slate-800 dark:ring-slate-700">
<div className="flex items-center gap-3">
{isActive && (
<Loader2 className="h-6 w-6 animate-spin text-primary-600" />
<Loader2 className="h-6 w-6 animate-spin text-primary-600 dark:text-primary-400" />
)}
{isComplete && (
<CheckCircle2 className="h-6 w-6 text-emerald-600" />
)}
<div className="flex-1">
<p className="text-sm font-medium text-slate-700">
<p className="text-sm font-medium text-slate-700 dark:text-slate-300">
{message || t('common.processing')}
</p>
</div>
@@ -33,7 +33,7 @@ export default function ProgressBar({ state, message }: ProgressBarProps) {
{/* Animated progress bar for active states */}
{isActive && (
<div className="mt-3 h-1.5 w-full overflow-hidden rounded-full bg-slate-200">
<div className="mt-3 h-1.5 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700">
<div className="progress-bar-animated h-full w-2/3 rounded-full bg-primary-500 transition-all" />
</div>
)}

4
frontend/src/components/shared/ToolCard.tsx
View File

@@ -30,10 +30,10 @@ export default function ToolCard({
{icon}
</div>
<div className="min-w-0 flex-1">
<h3 className="text-base font-semibold text-slate-900 group-hover:text-primary-600 transition-colors">
<h3 className="text-base font-semibold text-slate-900 group-hover:text-primary-600 transition-colors dark:text-slate-100 dark:group-hover:text-primary-400">
{title}
</h3>
<p className="mt-1 text-sm text-slate-500 line-clamp-2">
<p className="mt-1 text-sm text-slate-500 line-clamp-2 dark:text-slate-400">
{description}
</p>
</div>