From 5580d19b75f8d0c255883d608f42a58cda604a9a Mon Sep 17 00:00:00 2001
From: AkashJana18 <akashjana663@gmail.com>
Date: Tue, 22 Oct 2024 20:41:18 +0530
Subject: [PATCH] table redesign

---
 frontend/src/assets/caret-sort.svg  |  1 +
 frontend/src/index.css              | 10 ++++----
 frontend/src/settings/Documents.tsx | 37 ++++++++++++++++++++++-------
 3 files changed, 36 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/assets/caret-sort.svg

diff --git a/frontend/src/assets/caret-sort.svg b/frontend/src/assets/caret-sort.svg
new file mode 100644
index 00000000..9380120d
--- /dev/null
+++ b/frontend/src/assets/caret-sort.svg
@@ -0,0 +1 @@
+<svg width="18" height="18" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="gray" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 5bcc7683..1eca983c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -53,22 +53,24 @@ body.dark {
   }
 
   .table-default th {
-    @apply border-r border-silver dark:border-silver/40 p-4 w-[244px];
+    @apply p-4 w-[244px] font-normal text-gray-400; /* Remove border-r */
   }
 
   .table-default th:last-child {
-    @apply w-[auto] border-r-0;
+    @apply w-[auto];
   }
 
   .table-default td {
-    @apply border-r border-t border-silver dark:border-silver/40 px-4 py-2;
+    @apply border-t border-silver dark:border-silver/40 px-4 py-2; /* Remove border-r */
   }
 
   .table-default td:last-child {
-    @apply border-r-0;
+    @apply border-r-0; /* Ensure no right border on the last column */
   }
+
 }
 
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index b2ac3f83..67cdb6d0 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -6,6 +6,7 @@ import { useDispatch } from 'react-redux';
 import userService from '../api/services/userService';
 import SyncIcon from '../assets/sync.svg';
 import Trash from '../assets/trash.svg';
+import caretSort from '../assets/caret-sort.svg';
 import DropdownMenu from '../components/DropdownMenu';
 import { Doc, DocumentsProps, ActiveState } from '../models/misc'; // Ensure ActiveState type is imported
 import { getDocs } from '../preferences/preferenceApi';
@@ -97,9 +98,24 @@ const Documents: React.FC<DocumentsProps> = ({
             <thead>
               <tr>
                 <th>{t('settings.documents.name')}</th>
-                <th>{t('settings.documents.date')}</th>
-                <th>{t('settings.documents.tokenUsage')}</th>
-                <th>{t('settings.documents.type')}</th>
+                <th>
+                  <div className="flex justify-center items-center">
+                    {t('settings.documents.date')}{' '}
+                    <img src={caretSort} alt="" />{' '}
+                  </div>
+                </th>
+                <th>
+                  <div className="flex justify-center items-center">
+                    {t('settings.documents.tokenUsage')}{' '}
+                    <img src={caretSort} alt="" />
+                  </div>
+                </th>
+                <th>
+                  <div className="flex justify-center items-center">
+                    {t('settings.documents.type')}{' '}
+                    <img src={caretSort} alt="" />
+                  </div>
+                </th>
                 <th></th>
               </tr>
             </thead>
@@ -158,11 +174,16 @@ const Documents: React.FC<DocumentsProps> = ({
         </div>
         {/* Conditionally render the Upload modal based on modalState */}
         {modalState === 'ACTIVE' && (
-          <Upload
-            modalState={modalState}
-            setModalState={setModalState}
-            isOnboarding={isOnboarding} // Pass the onboarding flag
-          />
+          <div className="fixed top-0 left-0 w-screen h-screen z-50 flex items-center justify-center bg-transparent">
+            <div className="w-full h-full bg-transparent flex flex-col items-center justify-center p-8">
+              {/* Your Upload component */}
+              <Upload
+                modalState={modalState}
+                setModalState={setModalState}
+                isOnboarding={isOnboarding}
+              />
+            </div>
+          </div>
         )}
       </div>
     </div>