[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,7 +351,6 @@ 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" />
) : ( ) : (
@ -362,11 +361,11 @@ export default function SubmitResumeForm({
</p> </p>
)} )}
<label <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" 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"> htmlFor="file-upload">
<span className="font-medium">Drop file here</span> <span className="font-medium">Drop file here</span>
<span className="mr-1 ml-1 font-light">or</span> <span className="mr-1 ml-1 font-light">or</span>
<span className="text-primary-600 hover:text-primary-400 cursor-pointer font-medium"> <span className="text-primary-600 hover:text-primary-400 font-medium">
{resumeFile == null ? 'Select file' : 'Replace file'} {resumeFile == null ? 'Select file' : 'Replace file'}
</span> </span>
</label> </label>
@ -374,7 +373,6 @@ export default function SubmitResumeForm({
PDF up to {FILE_SIZE_LIMIT_MB}MB PDF up to {FILE_SIZE_LIMIT_MB}MB
</p> </p>
</div> </div>
</div>
{fileUploadError && ( {fileUploadError && (
<p className="text-danger-600 text-sm">{fileUploadError}</p> <p className="text-danger-600 text-sm">{fileUploadError}</p>
)} )}