styling

components/Form/FileInput.tsx

@@ -4,6 +4,7 @@ import { useField, useFormikContext } from "formik";
 import React, { useRef, useState } from "react";
 import ErrorMessage from "./ErrorMessage";
 import RequiredAsterisk from "./RequiredAsterisk";
+import Separator from "./Separator";
 
 interface FileInputProps {
   label: string;
@@ -78,11 +79,17 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
   };
 
   return (
-    <div className="mb-4">
-      <label className="text-md" htmlFor={props.name}>
-        {label}
-        <RequiredAsterisk required={required} />
-      </label>
+    <div className="flex flex-col gap-4">
+      {/* Title */}
+      <div className="flex flex-col gap-4">
+        <Separator/>
+        <label className="text-md" htmlFor={props.name}>
+          {label}
+          <RequiredAsterisk required={required} />
+        </label>  
+      </div>
+             
+      {/* File drop area */}
       <div
         className={`border border-grey-500 rounded-md p-4 flex flex-col items-center gap-4 ${dragging ? "bg-blue-100" : "bg-white"} cursor-pointer`}
         onClick={handleClick}
@@ -96,9 +103,13 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
         </div>
         <button type="button" className="text-white px-12 py-2 rounded-md bg-blue-950 w-fit">Upload Manifest</button>
       </div>
+
+      {/* Hidden input */}
       <input type="file" className="hidden" ref={fileInputRef} onChange={handleChange} />
+
+      {/* File info */}
       {fileInfo && (
-          <div className="flex gap-4 p-4 items-center">
+          <div className="flex gap-4 p-4 items-center border-t border-grey-500">
             <FontAwesomeIcon icon={faFile} className="text-amber-500 h-5 w-5" />
             <div className="grow">
               <div className="flex justify-between text-sm text-slate-500">
@@ -111,6 +122,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
             </div>
           </div>
         )}
+
       <ErrorMessage touched={meta.touched} error={meta.error} />
     </div>
   );