From aad12aa22734808f8cb6e44ce74652c5de473d60 Mon Sep 17 00:00:00 2001
From: Anas Khafaga <anaskhafaga1810@gmail.com>
Date: Fri, 4 Oct 2024 23:07:17 +0300
Subject: [PATCH] fix: update tables styles

---
 frontend/src/settings/APIKeys.tsx   | 26 ++++++++-------------
 frontend/src/settings/Documents.tsx | 36 ++++++++++-------------------
 2 files changed, 22 insertions(+), 40 deletions(-)

diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index e27f5696..4517e647 100644
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -100,35 +100,29 @@ export default function APIKeys() {
         )}
         <div className="mt-[27px] w-full">
           <div className="w-full overflow-x-auto">
-            <table className="block w-max table-auto content-center justify-center rounded-xl border text-center dark:border-chinese-silver dark:text-bright-gray">
+            <table className="table-default">
               <thead>
                 <tr>
-                  <th className="w-[244px] border-r p-4">
-                    {t('settings.apiKeys.name')}
-                  </th>
-                  <th className="w-[244px] border-r px-4 py-2">
-                    {t('settings.apiKeys.sourceDoc')}
-                  </th>
-                  <th className="w-[244px] border-r px-4 py-2">
-                    {t('settings.apiKeys.key')}
-                  </th>
-                  <th className="px-4 py-2"></th>
+                  <th>{t('settings.apiKeys.name')}</th>
+                  <th>{t('settings.apiKeys.sourceDoc')}</th>
+                  <th>{t('settings.apiKeys.key')}</th>
+                  <th></th>
                 </tr>
               </thead>
               <tbody>
                 {!apiKeys?.length && (
                   <tr>
-                    <td colSpan={4} className="border-t p-4">
+                    <td colSpan={4} className="!p-4">
                       {t('settings.apiKeys.noData')}
                     </td>
                   </tr>
                 )}
                 {apiKeys?.map((element, index) => (
                   <tr key={index}>
-                    <td className="border-r border-t p-4">{element.name}</td>
-                    <td className="border-r border-t p-4">{element.source}</td>
-                    <td className="border-r border-t p-4">{element.key}</td>
-                    <td className="border-t p-4">
+                    <td>{element.name}</td>
+                    <td>{element.source}</td>
+                    <td>{element.key}</td>
+                    <td>
                       <img
                         src={Trash}
                         alt="Delete"
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 28816062..b45c968d 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -55,28 +55,20 @@ const Documents: React.FC<DocumentsProps> = ({
     <div className="mt-8">
       <div className="flex flex-col relative">
         <div className="z-10 w-full overflow-x-auto">
-          <table className="block w-max table-auto content-center justify-center rounded-xl border text-center dark:border-chinese-silver dark:text-bright-gray">
+          <table className="table-default">
             <thead>
               <tr>
-                <th className="border-r p-4 md:w-[244px]">
-                  {t('settings.documents.name')}
-                </th>
-                <th className="w-[244px] border-r px-4 py-2">
-                  {t('settings.documents.date')}
-                </th>
-                <th className="w-[244px] border-r px-4 py-2">
-                  {t('settings.documents.tokenUsage')}
-                </th>
-                <th className="w-[244px] border-r px-4 py-2">
-                  {t('settings.documents.type')}
-                </th>
-                <th className="px-4 py-2"></th>
+                <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></th>
               </tr>
             </thead>
             <tbody>
               {!documents?.length && (
                 <tr>
-                  <td colSpan={5} className="border-t p-4">
+                  <td colSpan={5} className="!p-4">
                     {t('settings.documents.noData')}
                   </td>
                 </tr>
@@ -84,19 +76,15 @@ const Documents: React.FC<DocumentsProps> = ({
               {documents &&
                 documents.map((document, index) => (
                   <tr key={index}>
-                    <td className="border-r border-t px-4 py-2">
-                      {document.name}
-                    </td>
-                    <td className="border-r border-t px-4 py-2">
-                      {document.date}
-                    </td>
-                    <td className="border-r border-t px-4 py-2">
+                    <td>{document.name}</td>
+                    <td>{document.date}</td>
+                    <td>
                       {document.tokens ? formatTokens(+document.tokens) : ''}
                     </td>
-                    <td className="border-r border-t px-4 py-2">
+                    <td>
                       {document.type === 'remote' ? 'Pre-loaded' : 'Private'}
                     </td>
-                    <td className="border-t px-4 py-2">
+                    <td>
                       <div className="flex flex-row items-center">
                         {document.type !== 'remote' && (
                           <img