table redesign

arc53 · Oct 22, 2024 · 5580d19 · 5580d19
1 parent a2b0204
commit 5580d19
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git a/frontend/src/assets/caret-sort.svg b/frontend/src/assets/caret-sort.svg
diff --git 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
@@ -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>