UI fixes

Author: kartikpersistent

frontend/src/components/DeletePopUp.tsx

@@ -25,7 +25,6 @@ export default function DeletePopUp({
         <div className='mt-1'>
           <Checkbox
             label='Delete Entities'
-            onClick={function Ua() { }}
             checked={deleteEntities}
             onChange={(e) => {
               if (e.target.checked) {

frontend/src/components/DropZone.tsx

@@ -228,24 +228,27 @@ const DropZone: FunctionComponent = () => {
         className='!bg-none dropzoneContainer'
         supportedFilesDescription={
           <Typography variant='body-small'>
-            Documents, Images, Unstructured
-            <IconButtonWithToolTip
-              label='Source info'
-              size='small'
-              clean
-              text={
-                <Typography variant='body-small'>
-                  <Flex gap='5'>
-                    <span>Microsoft Office (.docx, .pptx, .xls)</span>
-                    <span>PDF (.pdf)</span>
-                    <span>Images (.jpeg, .jpg, .png, .svg)</span>
-                    <span>Text (.html, .txt , .md)</span>
-                  </Flex>
-                </Typography>
-              }
-            >
-              <InformationCircleIconOutline className='n-size-token-7' />
-            </IconButtonWithToolTip>
+            <Flex>
+              <span>Documents, Images, Unstructured</span>
+              <div className='align-self-center'>
+                <IconButtonWithToolTip
+                  label='Source info'
+                  clean
+                  text={
+                    <Typography variant='body-small'>
+                      <Flex gap='3' alignItems='flex-start'>
+                        <span>Microsoft Office (.docx, .pptx, .xls)</span>
+                        <span>PDF (.pdf)</span>
+                        <span>Images (.jpeg, .jpg, .png, .svg)</span>
+                        <span>Text (.html, .txt , .md)</span>
+                      </Flex>
+                    </Typography>
+                  }
+                >
+                  <InformationCircleIconOutline className='w-[22px] h-[22px]' />
+                </IconButtonWithToolTip>
+              </div>
+            </Flex>
           </Typography>
         }
         dropZoneOptions={{

frontend/src/components/FileTable.tsx

@@ -2,6 +2,7 @@ import {
   Checkbox,
   DataGrid,
   DataGridComponents,
+  Flex,
   IconButton,
   ProgressBar,
   StatusIndicator,
@@ -250,18 +251,22 @@ const FileTable: React.FC<FileTableProps> = ({ isExpanded, connectionStatus, set
         cell: (info) => {
           if (info.row.original.fileSource === 'youtube' || info.row.original.fileSource === 'Wikipedia') {
             return (
-              <>
-                <TextLink externalLink href={info.row.original.source_url}>
-                  {info.row.original.fileSource}
-                </TextLink>
-                <Typography variant='body-medium'> / {info.row.original.type}</Typography>
-              </>
+              <Flex>
+                <span>
+                  <TextLink externalLink href={info.row.original.source_url}>
+                    {info.row.original.fileSource}
+                  </TextLink>{' '}
+                  /
+                </span>
+                <Typography variant='body-medium'>{info.row.original.type}</Typography>
+              </Flex>
             );
           }
           return (
-            <i>
-              {info.row.original.fileSource} / {info.row.original.type}
-            </i>
+            <div>
+              <span>{info.row.original.fileSource} / </span>
+              <span>{info.row.original.type}</span>
+            </div>
           );
         },
         header: () => <span>Source/Type</span>,

frontend/src/utils/Constants.ts

@@ -91,8 +91,8 @@ export const queryMap: {
 };
 
 export const tooltips = {
-  generateGraph: `Only New files will be processed for Graph Visualization`,
-  deleteFile: 'Please select a file to delete',
+  generateGraph: `Only New files will be processed for the Graph generation`,
+  deleteFile: 'Please select one or more files to delete',
   showGraph: 'Only completed files will be processed for Graph Visualization',
   bloomGraph: 'For advance Graph Visualization',
   deleteSelectedFiles: 'File/Files to be deleted',