Update FileQ&AArea component

praveen-palanisamy · May 1, 2023 · 5057969 · 5057969 · vercel · May 1, 2023
1 parent 5ee24c4
commit 5057969
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/renderer/components/FileQandAArea.tsx b/renderer/components/FileQandAArea.tsx
@@ -109,7 +109,7 @@ function FileQandAArea(props: FileQandAAreaProps) {
           leave="transition duration-125 ease-out"
           leaveFrom="transform opacity-100"
           leaveTo="transform opacity-0"
-          className="mb-8"
+          className="mb-2"
         >
           {answer && (
             <div className="">
@@ -131,7 +131,7 @@ function FileQandAArea(props: FileQandAAreaProps) {
             leave="transition duration-125 ease-out"
             leaveFrom="transform opacity-100"
             leaveTo="transform opacity-0"
-            className="mb-8"
+            className="mb-2"
           >
             <FileViewerList
               files={props.files.filter((file) =>
@@ -143,7 +143,9 @@ function FileQandAArea(props: FileQandAAreaProps) {
           </Transition>
         </Transition>
       </div>
-
+      <div className="text-center">
+        2. Ask a question based on the content of your files:
+      </div>
       <div className="space-y-2">
         <input
           className="border rounded border-gray-200 w-3/4 h-24 py-1 px-2"

diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx
@@ -14,26 +14,29 @@ export default function FileQandA() {
         <title>MemReFinder</title>
       </Head>
       <div className="text-gray-800">
-        <h1 className="text-center text-4xl">MemReFinder: Chat with your Data</h1>
+        <h1 className="text-center text-4xl">
+          MemReFinder: Chat with your Data
+        </h1>
 
         <div className="">
           <center> Chat with your Documents and Files to find Answers.</center>
           <br />
+        </div>
+        <div className="grid grid-flow-row-dense grid-cols-3 grid-gap">
+          <div className="col-span-1 text-center">
+            {" "}
+            1. Load your files:
+            <FileUploadArea
+              handleSetFiles={setFiles}
+              maxNumFiles={100}
+              maxFileSizeMB={25}
+            />
           </div>
-            <div className="grid grid-flow-row-dense grid-cols-3 grid-gap">
-              <div className="col-span-1 text-center"> 1. Load your files: 
-                <FileUploadArea
-                  handleSetFiles={setFiles}
-                  maxNumFiles={100}
-                  maxFileSizeMB={25}
-                />
-              </div>
-            <div className="col-span-2 text-center">
-              2. Ask a question based on the content of your files:
-              <FileQandAArea files={files} />
-            </div>
+          <div className="col-span-2 text-center">
+            <FileQandAArea files={files} />
           </div>
-    </div>
+        </div>
+      </div>
     </div>
   );
 }