From 2709994ede7d644afb1973b2d1b0734552bba735 Mon Sep 17 00:00:00 2001
From: fadingNA <nplodthong@myseneca.ca>
Date: Sun, 24 Nov 2024 11:18:42 -0500
Subject: [PATCH] update APIKey Table and dark styling

---
 frontend/src/settings/APIKeys.tsx   | 85 +++++++++++++++++------------
 frontend/src/settings/Documents.tsx |  7 ++-
 2 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/frontend/src/settings/APIKeys.tsx b/frontend/src/settings/APIKeys.tsx
index b039477c3..6775ba87e 100644
--- a/frontend/src/settings/APIKeys.tsx
+++ b/frontend/src/settings/APIKeys.tsx
@@ -109,41 +109,56 @@ export default function APIKeys() {
             {loading ? (
               <SkeletonLoader count={1} component={'chatbot'} />
             ) : (
-              <table className="table-default">
-                <thead>
-                  <tr>
-                    <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="!p-4">
-                        {t('settings.apiKeys.noData')}
-                      </td>
-                    </tr>
-                  )}
-                  {apiKeys?.map((element, index) => (
-                    <tr key={index}>
-                      <td>{element.name}</td>
-                      <td>{element.source}</td>
-                      <td>{element.key}</td>
-                      <td>
-                        <img
-                          src={Trash}
-                          alt="Delete"
-                          className="h-4 w-4 cursor-pointer hover:opacity-50"
-                          id={`img-${index}`}
-                          onClick={() => handleDeleteKey(element.id)}
-                        />
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+              <div className="flex flex-col">
+                <div className="flex-grow">
+                  <div className="dark:border-silver/40 border-silver rounded-md border overflow-auto">
+                    <table className="min-w-full divide-y divide-silver dark:divide-silver/40 ">
+                      <thead>
+                        <tr className="text-start text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
+                          <th className="p-2">{t('settings.apiKeys.name')}</th>
+                          <th className="p-2">
+                            {t('settings.apiKeys.sourceDoc')}
+                          </th>
+                          <th className="p-2">{t('settings.apiKeys.key')}</th>
+                          <th></th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-gray-200 dark:divide-neutral-700">
+                        {!apiKeys?.length && (
+                          <tr>
+                            <td
+                              colSpan={4}
+                              className="!p-4 text-gray-800 dark:text-neutral-200 text-center"
+                            >
+                              {t('settings.apiKeys.noData')}
+                            </td>
+                          </tr>
+                        )}
+                        {Array.isArray(apiKeys) &&
+                          apiKeys?.map((element, index) => (
+                            <tr
+                              key={index}
+                              className="text-nowrap whitespace-nowrap text-center text-sm font-medium text-gray-800 dark:text-neutral-200 p-2"
+                            >
+                              <td className="p-1">{element.name}</td>
+                              <td className="p-2">{element.source}</td>
+                              <td>{element.key}</td>
+                              <td>
+                                <img
+                                  src={Trash}
+                                  alt="Delete"
+                                  className="h-4 w-4 cursor-pointer hover:opacity-50"
+                                  id={`img-${index}`}
+                                  onClick={() => handleDeleteKey(element.id)}
+                                />
+                              </td>
+                            </tr>
+                          ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
             )}
           </div>
         </div>
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 7efd9016c..4003f6552 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -183,7 +183,7 @@ const Documents: React.FC<DocumentsProps> = ({
           ) : (
             <div className="flex flex-col">
               <div className="flex-grow">
-                <div className="dark:border-silver/40 border-silver rounded-xl border overflow-auto">
+                <div className="dark:border-silver/40 border-silver rounded-md border overflow-auto">
                   <table className="min-w-full divide-y divide-silver dark:divide-silver/40 ">
                     <thead>
                       <tr>
@@ -228,7 +228,10 @@ const Documents: React.FC<DocumentsProps> = ({
                     <tbody className="divide-y divide-gray-200 dark:divide-neutral-700">
                       {!currentDocuments?.length && (
                         <tr>
-                          <td colSpan={5} className="!p-4">
+                          <td
+                            colSpan={5}
+                            className="!p-4 text-gray-800 dark:text-neutral-200"
+                          >
                             {t('settings.documents.noData')}
                           </td>
                         </tr>