Skip to content

Commit

Permalink
Stabilize icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@corneliusroemer
corneliusroemer committed May 21, 2024
1 parent db05144 commit 1796ab5
Showing 1 changed file with 45 additions and 49 deletions.
94 changes: 45 additions & 49 deletions website/src/components/Submission/DataUploadForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,61 +195,57 @@ const UploadComponent = ({
return (
<div className='sm:col-span-4'>
<label className='text-gray-900 leading-6 font-medium text-sm block'>{title}</label>
<div className='flex flex-col h-40'>
<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 items-center justify-center rounded-lg border border-dashed px-6 py-6 border-gray-900/25
${isDragOver ? 'bg-green-100' : ''} flex-1`}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
<div className='flex flex-col items-center justify-center flex-1 px-4 py-2'>
<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'>
<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();
<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
</span>
{isClient && (
<input
id={name}
name={name}
type='file'
className='sr-only'
aria-label={title}
data-testid={name}
onChange={(event) => {
const file = event.target.files?.[0] || null;
setMyFile(file);
}}
>
Upload a file
</span>
{isClient && (
<input
id={name}
name={name}
type='file'
className='sr-only'
aria-label={title}
data-testid={name}
onChange={(event) => {
const file = event.target.files?.[0] || null;
setMyFile(file);
}}
ref={fileInputRef}
/>
)}
</label>
<span className='pl-1'>or drag and drop</span>
</div>
<p className='text-xs leading-5 text-gray-600'>{fileType}</p>
ref={fileInputRef}
/>
)}
</label>
<span className='pl-1'>or drag and drop</span>
</div>
<p className='text-sm pb+2 leading-5 text-gray-600'>{fileType}</p>
</div>
) : (
<div className='flex items-center justify-center text-center flex-1 px-4 py-2'>
<div>
<Icon className='w-12 h-12 text-gray-300 mx-auto mb-4' />
<div className='text-sm text-gray-500 mb-2'>{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>
Expand Down

0 comments on commit 1796ab5

Please sign in to comment.