Skip to content

Commit 3f302cc

Browse files
monicasmith463monicasmith463
committed
center the dropzone
1 parent 79d90e5 commit 3f302cc

1 file changed

Lines changed: 41 additions & 38 deletions

File tree

‎frontend/src/components/form/form-elements/DocumentDropZone.tsx‎

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -22,54 +22,57 @@ const DropzoneComponent: React.FC = () => {
2222
};
2323

2424
return (
25+
<div className="flex flex-col flex-1 lg:w-1/2 w-full mx-auto">
2526
<ComponentCard title="Upload Documents">
2627
<div className="transition border border-gray-300 border-dashed cursor-pointer dark:hover:border-brand-500 dark:border-gray-700 rounded-xl hover:border-brand-500">
2728
<div>
28-
<form
29-
{...getRootProps()}
30-
className={`dropzone rounded-xl border-dashed border-gray-300 p-7 lg:p-10 ${
31-
isDragActive
29+
<form
30+
{...getRootProps()}
31+
className={`dropzone rounded-xl border-dashed border-gray-300 p-7 lg:p-10 ${isDragActive
3232
? "border-brand-500 bg-gray-100 dark:bg-gray-800"
3333
: "border-gray-300 bg-gray-50 dark:border-gray-700 dark:bg-gray-900"
34-
}`}
35-
id="demo-upload"
36-
>
37-
<input {...getInputProps()} />
38-
<div className="dz-message flex flex-col items-center m-0!">
39-
<div className="mb-[22px] flex justify-center">
40-
<div className="flex h-[68px] w-[68px] items-center justify-center rounded-full bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-400">
41-
<svg
42-
className="fill-current"
43-
width="29"
44-
height="28"
45-
viewBox="0 0 29 28"
46-
xmlns="http://www.w3.org/2000/svg"
47-
>
48-
<path
49-
fillRule="evenodd"
50-
clipRule="evenodd"
51-
d="M14.5019 3.91699C14.2852 3.91699 14.0899 4.00891 13.953 4.15589L8.57363 9.53186C8.28065 9.82466 8.2805 10.2995 8.5733 10.5925C8.8661 10.8855 9.34097 10.8857 9.63396 10.5929L13.7519 6.47752V18.667C13.7519 19.0812 14.0877 19.417 14.5019 19.417C14.9161 19.417 15.2519 19.0812 15.2519 18.667V6.48234L19.3653 10.5929C19.6583 10.8857 20.1332 10.8855 20.426 10.5925C20.7188 10.2995 20.7186 9.82463 20.4256 9.53184L15.0838 4.19378C14.9463 4.02488 14.7367 3.91699 14.5019 3.91699ZM5.91626 18.667C5.91626 18.2528 5.58047 17.917 5.16626 17.917C4.75205 17.917 4.41626 18.2528 4.41626 18.667V21.8337C4.41626 23.0763 5.42362 24.0837 6.66626 24.0837H22.3339C23.5766 24.0837 24.5839 23.0763 24.5839 21.8337V18.667C24.5839 18.2528 24.2482 17.917 23.8339 17.917C23.4197 17.917 23.0839 18.2528 23.0839 18.667V21.8337C23.0839 22.2479 22.7482 22.5837 22.3339 22.5837H6.66626C6.25205 22.5837 5.91626 22.2479 5.91626 21.8337V18.667Z"
52-
/>
53-
</svg>
34+
}`}
35+
id="demo-upload"
36+
>
37+
<input {...getInputProps()} />
38+
<div className="dz-message flex flex-col items-center m-0!">
39+
<div className="mb-[22px] flex justify-center">
40+
<div className="flex h-[68px] w-[68px] items-center justify-center rounded-full bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-400">
41+
<svg
42+
className="fill-current"
43+
width="29"
44+
height="28"
45+
viewBox="0 0 29 28"
46+
xmlns="http://www.w3.org/2000/svg"
47+
>
48+
<path
49+
fillRule="evenodd"
50+
clipRule="evenodd"
51+
d="M14.5019 3.91699C14.2852 3.91699 14.0899 4.00891 13.953 4.15589L8.57363 9.53186C8.28065 9.82466 8.2805 10.2995 8.5733 10.5925C8.8661 10.8855 9.34097 10.8857 9.63396 10.5929L13.7519 6.47752V18.667C13.7519 19.0812 14.0877 19.417 14.5019 19.417C14.9161 19.417 15.2519 19.0812 15.2519 18.667V6.48234L19.3653 10.5929C19.6583 10.8857 20.1332 10.8855 20.426 10.5925C20.7188 10.2995 20.7186 9.82463 20.4256 9.53184L15.0838 4.19378C14.9463 4.02488 14.7367 3.91699 14.5019 3.91699ZM5.91626 18.667C5.91626 18.2528 5.58047 17.917 5.16626 17.917C4.75205 17.917 4.41626 18.2528 4.41626 18.667V21.8337C4.41626 23.0763 5.42362 24.0837 6.66626 24.0837H22.3339C23.5766 24.0837 24.5839 23.0763 24.5839 21.8337V18.667C24.5839 18.2528 24.2482 17.917 23.8339 17.917C23.4197 17.917 23.0839 18.2528 23.0839 18.667V21.8337C23.0839 22.2479 22.7482 22.5837 22.3339 22.5837H6.66626C6.25205 22.5837 5.91626 22.2479 5.91626 21.8337V18.667Z"
52+
/>
53+
</svg>
54+
</div>
5455
</div>
55-
</div>
5656

57-
<h4 className="mb-3 font-semibold text-gray-800 text-theme-xl dark:text-white/90">
58-
{isDragActive ? "Drop Files Here" : "Drag & Drop Files Here"}
59-
</h4>
60-
<span className="text-center mb-5 block w-full max-w-[290px] text-sm text-gray-700 dark:text-gray-400">
61-
Drag and drop your PDF documents here or browse
62-
</span>
63-
<span className="font-medium underline text-theme-sm text-brand-500">
64-
Browse File
65-
</span>
66-
</div>
67-
</form>
57+
<h4 className="mb-3 font-semibold text-gray-800 text-theme-xl dark:text-white/90">
58+
{isDragActive ? "Drop Files Here" : "Drag & Drop Files Here"}
59+
</h4>
60+
<span className="text-center mb-5 block w-full max-w-[290px] text-sm text-gray-700 dark:text-gray-400">
61+
Drag and drop your PDF documents here or browse
62+
</span>
63+
<span className="font-medium underline text-theme-sm text-brand-500">
64+
Browse File
65+
</span>
66+
</div>
67+
</form>
6868
</div>
6969

70-
<div className="mt-4 text-sm text-gray-500 dark:text-gray-400">
70+
71+
72+
</div>
7173

7274
{/* File List */}
75+
<div className="mt-4 text-sm text-gray-500 dark:text-gray-400">
7376
{files.length > 0 && (
7477
<ul className="mt-4 space-y-2">
7578
{files.map((file, index) => (
@@ -91,8 +94,8 @@ const DropzoneComponent: React.FC = () => {
9194
)}
9295
</div>
9396

94-
</div>
9597
</ComponentCard>
98+
</div>
9699
);
97100
};
98101

0 commit comments

Comments
 (0)