Repository: srbhr/Resume-Matcher
File: webapp/app/_components/resume/file-upload/file-upload.tsx (TypeScript)

Code before:
  function handleDragOver(e: React.DragEvent<HTMLDivElement>) {
    e.preventDefault();
    setIsDragging(true);
  }

  return (
    <div
      className={clsx(
        "flex flex-col gap-4 mt-4 p-6 border-2 border-solid border-gray-700 rounded-lg",
        { "border-purple-100 opacity-50": isDragging }
      )}
      onDragOver={handleDragOver}
      onDragLeave={() => setIsDragging(false)}
      onDrop={handleDrop}
    >
      <input
        type="file"
        id="upload-btn"
        onChange={handleUpload}
        accept={acceptedFileTypes}
        hidden
        multiple={false}
      />
      <label
        htmlFor="upload-btn"
        className="block text-white text-3xl p-8 rounded-2xl font-semibold cursor-pointer shadow-2xl bg-gradient-to-bl from-[#1B2450] to-[#232334] hover:bg-gradient-to-bl hover:from-[#151E4B] hover:to-[#242430]"
      >
        {buttonLabel}
      </label>
      <small className="text-center text-gray-300">
        Accepted file type(s): {acceptedFileTypes}
      </small>
      {fileName ? (
        <span className="block text-2xl text-center text-emerald-500">
          {fileName}
        </span>
      ) : (
        <p className="block text-2xl text-center">{dropZoneLabel}</p>
      )}
    </div>
  );
};

export default FileUpload;


Review comment (bug):
@sandipkarmokar - Also, I noticed the main file upload button text for some reason is now left-aligned which doesn't look right. Could we **center-align** the file upload button label text; `Upload Your Resume`.

![resume-matcher-bug-file-upload-button-text-left-aligned](https://github.com/srbhr/Resume-Matcher/assets/7581546/5ec0c98e-9d54-488a-b64c-e697d90366f8)

To fix this, just add the TailWindCSS class `text-center`  to the `<label>` element, as suggested below:

```suggestion
        className="block text-white text-3xl p-8 rounded-2xl text-center font-semibold cursor-pointer shadow-2xl bg-gradient-to-bl from-[#1B2450] to-[#232334] hover:bg-gradient-to-bl hover:from-[#151E4B] hover:to-[#242430]"
```

Code after:
  function handleDragOver(e: React.DragEvent<HTMLDivElement>) {
    e.preventDefault();
    setIsDragging(true);
  }

  return (
    <div
      className={clsx(
        "flex flex-col gap-4 mt-4 p-6 border-2 border-solid border-gray-700 rounded-lg",
        { "border-purple-100 opacity-50": isDragging }
      )}
      onDragOver={handleDragOver}
      onDragLeave={() => setIsDragging(false)}
      onDrop={handleDrop}
    >
      <input
        type="file"
        id="upload-btn"
        onChange={handleUpload}
        accept={acceptedFileTypes}
        hidden
        multiple={false}
      />
      <label
        htmlFor="upload-btn"
        className="block text-white text-3xl p-8 rounded-2xl text-center font-semibold cursor-pointer shadow-2xl bg-gradient-to-bl from-[#1B2450] to-[#232334] hover:bg-gradient-to-bl hover:from-[#151E4B] hover:to-[#242430]"
      >
        {buttonLabel}
      </label>
      <small className="text-center text-gray-300">
        Accepted file type(s): {acceptedFileTypes}
      </small>
      {fileName ? (
        <span className="block text-2xl text-center text-emerald-500">
          {fileName}
        </span>
      ) : (
        <p className="block text-2xl text-center">{dropZoneLabel}</p>
      )}
    </div>
  );
};

export default FileUpload;