Checkpoint: Réorganisation complète de la modal des rappels : largeur optimisée (50vw), labels et champs sur une seule ligne horizontale pour Configuration générale et Timing d'envoi, pièces jointes compactes avec icône et textes alignés, 4 zones colorées distinctes, espacement optimisé pour écran 24 pouces

This commit is contained in:
Manus
2026-02-02 08:00:46 -05:00
parent 014c2cd68b
commit fec271c19a
3 changed files with 263 additions and 239 deletions

View File

@@ -116,28 +116,25 @@ export function FileUpload({ value, onChange, accept, maxSize = 10, label = "Pi
{!value && !uploading ? (
<label className="block">
<div className="relative border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all duration-300 ease-in-out border-gray-300 bg-gray-50 hover:border-blue-400 hover:bg-blue-50">
<div className="space-y-3">
<div className="mx-auto w-14 h-14 bg-gradient-to-br from-blue-100 to-purple-100 rounded-full flex items-center justify-center">
<FileText className="w-7 h-7 text-blue-600" />
<div className="relative border-2 border-dashed rounded-xl p-4 cursor-pointer transition-all duration-300 ease-in-out border-gray-300 bg-gray-50 hover:border-blue-400 hover:bg-blue-50">
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-gradient-to-br from-blue-100 to-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
<FileText className="w-6 h-6 text-blue-600" />
</div>
<div>
<p className="text-sm font-semibold text-gray-700 mb-1">
Cliquez pour choisir un fichier
<div className="flex-1">
<p className="text-sm font-semibold text-gray-700">
Cliquez pour choisir un fichier <span className="text-xs text-gray-500 font-normal">ou glissez-déposez</span>
</p>
<p className="text-xs text-gray-500">
ou glissez-déposez votre fichier ici
</p>
</div>
<div className="flex items-center justify-center gap-2 text-xs text-gray-400">
{accept && (
<span className="px-2 py-1 bg-white rounded-full border border-gray-200">
{accept}
<div className="flex items-center gap-2 text-xs text-gray-400 mt-1">
{accept && (
<span className="px-2 py-0.5 bg-white rounded-full border border-gray-200">
{accept}
</span>
)}
<span className="px-2 py-0.5 bg-white rounded-full border border-gray-200">
Max {maxSize} Mo
</span>
)}
<span className="px-2 py-1 bg-white rounded-full border border-gray-200">
Max {maxSize} Mo
</span>
</div>
</div>
</div>
</div>