update APIKey Table and dark styling

arc53 · Nov 24, 2024 · 2709994 · 2709994
1 parent e5bd194
commit 2709994
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 37 deletions.
diff --git 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
@@ -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>