table redesign

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>

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

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>