fix(website): remove layout shift when file picked on submit page (#1974

)
loculus-project · May 21, 2024 · 698b836 · 698b836
1 parent 75251b0
commit 698b836
Showing 1 changed file with 27 additions and 28 deletions.
diff --git a/website/src/components/Submission/DataUploadForm.tsx b/website/src/components/Submission/DataUploadForm.tsx
@@ -195,25 +195,26 @@ const UploadComponent = ({
     return (
         <div className='sm:col-span-4'>
             <label className='text-gray-900 leading-6 font-medium text-sm block'>{title}</label>
-            {!myFile ? (
-                <div
-                    className={`mt-2 flex justify-center rounded-lg border border-dashed  px-6 py-6 border-gray-900/25 h-40
-                    ${isDragOver ? 'bg-green-100' : ''}  `}
-                    onDragOver={handleDragOver}
-                    onDragLeave={handleDragLeave}
-                    onDrop={handleDrop}
-                >
-                    <div className='text-center'>
-                        <Icon className='mx-auto h-12 w-12 text-gray-300' aria-hidden='true' />
-                        <div className='mt-4  text-sm leading-6 text-gray-600'>
+            <div
+                className={`mt-2 flex flex-col h-40 rounded-lg border ${myFile ? 'border-hidden' : 'border-dashed border-gray-900/25'} ${isDragOver && !myFile ? 'bg-green-100' : ''}`}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+            >
+                <div className='flex items-center justify-center'>
+                    <Icon className='mx-auto mt-4 mb-0 h-12 w-12 text-gray-300' aria-hidden='true' />
+                </div>
+                {!myFile ? (
+                    <div className='flex flex-col items-center justify-center flex-1 px-4 py-2'>
+                        <div className='text-center'>
                             <label className='inline relative cursor-pointer rounded-md bg-white font-semibold text-primary-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-primary-600 focus-within:ring-offset-2 hover:text-primary-500'>
                                 <span
                                     onClick={(e) => {
                                         e.preventDefault();
                                         handleUpload();
                                     }}
                                 >
-                                    Upload a file
+                                    Upload
                                 </span>
                                 {isClient && (
                                     <input
@@ -233,23 +234,21 @@ const UploadComponent = ({
                             </label>
                             <span className='pl-1'>or drag and drop</span>
                         </div>
-                        <p className='text-xs leading-5 text-gray-600'>{fileType}</p>
+                        <p className='text-sm pb+2 leading-5 text-gray-600'>{fileType}</p>
                     </div>
-                </div>
-            ) : (
-                <div className='h-40 text-center'>
-                    <Icon className='w-12 h-12 text-gray-300 mx-auto my-4' />
-                    <div className='text-sm text-gray-500 py-5'>{myFile.name}</div>
-                    <button
-                        onClick={() => setMyFile(null)}
-                        data-testid={`discard_${name}`}
-                        className='
-                    text-xs break-words text-gray-700 py-1.5 px-4 border border-gray-300 rounded-md hover:bg-gray-50'
-                    >
-                        Discard file
-                    </button>
-                </div>
-            )}
+                ) : (
+                    <div className='flex flex-col items-center justify-center text-center flex-1 px-4 py-2'>
+                        <div className='text-sm text-gray-500 mb-1'>{myFile.name}</div>
+                        <button
+                            onClick={() => setMyFile(null)}
+                            data-testid={`discard_${name}`}
+                            className='text-xs break-words text-gray-700 py-1.5 px-4 border border-gray-300 rounded-md hover:bg-gray-50'
+                        >
+                            Discard file
+                        </button>
+                    </div>
+                )}
+            </div>
         </div>
     );
 };