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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user