Style/modal (#253)

* fix(modal): vertically centered modal

* fix(explore): dark mode for modal

Author: adityanandanx

frontend/app/components/ui/Modal.tsx

@@ -45,7 +45,7 @@ const Modal: FC<ModalProps> = ({
                     initial={{ opacity: 0, y: "-40%" }}
                     animate={{ opacity: 1, y: "0%" }}
                     exit={{ opacity: 0, y: "40%" }}
-                    className="w-[90vw] flex flex-col h-fit max-w-2xl rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-10 shadow-xl dark:shadow-primary/50 focus:outline-none cursor-auto"
+                    className="w-[90vw] my-auto flex flex-col h-fit max-w-2xl rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-10 shadow-xl dark:shadow-primary/50 focus:outline-none cursor-auto"
                   >
                     <Dialog.Title className="m-0 text-2xl font-bold">
                       {title}

frontend/app/explore/DocumentItem/DocumentData.tsx

@@ -31,7 +31,7 @@ const DocumentData = ({ documentName }: DocumentDataProps): JSX.Element => {
   }, [axiosInstance, documentName]);
 
   return (
-    <div className="prose">
+    <div className="prose dark:prose-invert">
       <h1 className="text-bold text-3xl break-words">{documentName}</h1>
       <p>No. of chunks: {documents.length}</p>