Merge pull request #1236 from anasKhafaga/fix/1220-border-styles

Fix(1220): border styles

frontend/src/Hero.tsx

@@ -37,7 +37,7 @@ export default function Hero({
               <Fragment key={key}>
                 <button
                   onClick={() => handleQuestion({ question: demo.query })}
-                  className="w-full rounded-full border-2 border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw]"
+                  className="w-full rounded-full border border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw]"
                 >
                   <p className="mb-1 font-semibold text-black dark:text-silver">
                     {demo.header}

frontend/src/index.css

@@ -47,6 +47,28 @@ body.dark {
   }
 }
 
+@layer components {
+  .table-default {
+    @apply block w-max table-auto content-center justify-center rounded-xl border border-silver dark:border-silver/40 text-center dark:text-bright-gray;
+  }
+
+  .table-default th {
+    @apply border-r border-silver dark:border-silver/40 p-4 w-[244px];
+  }
+
+  .table-default th:last-child {
+    @apply w-[auto] border-r-0;
+  }
+
+  .table-default td {
+    @apply border-r border-t border-silver dark:border-silver/40 px-4 py-2;
+  }
+
+  .table-default td:last-child {
+    @apply border-r-0;
+  }
+}
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document

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"

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