[resumes][feat] center text in file drop

This commit is contained in:
Keane Chan
2022-10-25 10:38:43 +08:00
parent 79b62234ea
commit 000f22a50c

View File

@ -339,7 +339,7 @@ export default function SubmitResumeForm({
fileUploadError fileUploadError
? 'border-danger-600' ? 'border-danger-600'
: 'border-slate-300', : 'border-slate-300',
'flex cursor-pointer justify-center rounded-md border-2 border-dashed bg-slate-100 py-4', 'cursor-pointer flex-col items-center space-y-1 rounded-md border-2 border-dashed bg-slate-100 py-4 px-4 text-center',
)}> )}>
<input <input
{...register('file', { required: true })} {...register('file', { required: true })}
@ -351,29 +351,27 @@ export default function SubmitResumeForm({
name="file-upload" name="file-upload"
type="file" type="file"
/> />
<div className="space-y-1 text-center"> {resumeFile == null ? (
{resumeFile == null ? ( <ArrowUpCircleIcon className="text-primary-500 m-auto h-10 w-10" />
<ArrowUpCircleIcon className="text-primary-500 m-auto h-10 w-10" /> ) : (
) : ( <p
<p className="hover:text-primary-600 cursor-pointer underline underline-offset-1"
className="hover:text-primary-600 cursor-pointer underline underline-offset-1" onClick={onClickDownload}>
onClick={onClickDownload}> {resumeFile.name}
{resumeFile.name}
</p>
)}
<label
className="focus-within:ring-primary-500 flex items-center rounded-md text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
htmlFor="file-upload">
<span className="font-medium">Drop file here</span>
<span className="mr-1 ml-1 font-light">or</span>
<span className="text-primary-600 hover:text-primary-400 cursor-pointer font-medium">
{resumeFile == null ? 'Select file' : 'Replace file'}
</span>
</label>
<p className="text-xs text-slate-500">
PDF up to {FILE_SIZE_LIMIT_MB}MB
</p> </p>
</div> )}
<label
className="focus-within:ring-primary-500 cursor-pointer text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2"
htmlFor="file-upload">
<span className="font-medium">Drop file here</span>
<span className="mr-1 ml-1 font-light">or</span>
<span className="text-primary-600 hover:text-primary-400 font-medium">
{resumeFile == null ? 'Select file' : 'Replace file'}
</span>
</label>
<p className="text-xs text-slate-500">
PDF up to {FILE_SIZE_LIMIT_MB}MB
</p>
</div> </div>
{fileUploadError && ( {fileUploadError && (
<p className="text-danger-600 text-sm">{fileUploadError}</p> <p className="text-danger-600 text-sm">{fileUploadError}</p>