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')}