refactor(frontend): Make the secrets table styling consistent. (All-Hands-AI#9628)

Author: hieptl

frontend/src/components/features/settings/secrets-settings/secret-list-item.tsx

@@ -32,25 +32,26 @@ export function SecretListItem({
   return (
     <tr
       data-testid="secret-item"
-      className="border-t border-[#717888] last-of-type:border-b max-w-[830px] py-[13px] flex w-full items-center"
+      className="flex w-full items-center border-t border-tertiary"
     >
-      <td className="w-1/4 text-sm text-content-2 truncate" title={title}>
+      <td className="p-3 w-1/4 text-sm text-content-2 truncate" title={title}>
         {title}
       </td>
 
       <td
-        className="w-1/2 truncate overflow-hidden whitespace-nowrap text-sm text-content-2 opacity-80 italic"
+        className="p-3 w-1/2 truncate overflow-hidden whitespace-nowrap text-sm text-content-2 opacity-80 italic"
         title={description || ""}
       >
         {description || ""}
       </td>
 
-      <td className="w-1/4 flex items-center justify-end gap-4">
+      <td className="p-3 w-1/4 flex items-center justify-end gap-4">
         <button
           data-testid="edit-secret-button"
           type="button"
           onClick={onEdit}
           aria-label={`Edit ${title}`}
+          className="cursor-pointer"
         >
           <FaPencil size={16} />
         </button>
@@ -59,6 +60,7 @@ export function SecretListItem({
           type="button"
           onClick={onDelete}
           aria-label={`Delete ${title}`}
+          className="cursor-pointer"
         >
           <FaTrash size={16} />
         </button>

frontend/src/i18n/declaration.ts

@@ -386,6 +386,7 @@ export enum I18nKey {
   SETTINGS$DELETE_API_KEY_CONFIRMATION = "SETTINGS$DELETE_API_KEY_CONFIRMATION",
   SETTINGS$NO_API_KEYS = "SETTINGS$NO_API_KEYS",
   SETTINGS$NAME = "SETTINGS$NAME",
+  SECRETS$DESCRIPTION = "SECRETS$DESCRIPTION",
   SETTINGS$KEY_PREFIX = "SETTINGS$KEY_PREFIX",
   SETTINGS$CREATED_AT = "SETTINGS$CREATED_AT",
   SETTINGS$LAST_USED = "SETTINGS$LAST_USED",

frontend/src/i18n/translation.json

@@ -6176,6 +6176,22 @@
         "es": "Nombre",
         "tr": "İsim"
     },
+    "SECRETS$DESCRIPTION": {
+        "en": "Description",
+        "uk": "Опис",
+        "ja": "説明",
+        "zh-CN": "描述",
+        "zh-TW": "描述",
+        "ko-KR": "설명",
+        "no": "Beskrivelse",
+        "ar": "الوصف",
+        "de": "Beschreibung",
+        "fr": "Description",
+        "it": "Descrizione",
+        "pt": "Descrição",
+        "es": "Descripción",
+        "tr": "Açıklama"
+    },
     "SETTINGS$KEY_PREFIX": {
         "en": "Key Prefix",
         "uk": "Префікс ключа",

frontend/src/routes/secrets-settings.tsx

@@ -100,28 +100,6 @@ function SecretsSettingsScreen() {
         <p data-testid="no-secrets-message">{t("SECRETS$NO_SECRETS_FOUND")}</p>
       )}
 
-      {view === "list" && (
-        <table className="w-full">
-          <tbody>
-            {secrets?.map((secret) => (
-              <SecretListItem
-                key={secret.name}
-                title={secret.name}
-                description={secret.description}
-                onEdit={() => {
-                  setView("edit-secret-form");
-                  setSelectedSecret(secret.name);
-                }}
-                onDelete={() => {
-                  setConfirmationModalIsVisible(true);
-                  setSelectedSecret(secret.name);
-                }}
-              />
-            ))}
-          </tbody>
-        </table>
-      )}
-
       {!shouldRenderConnectToGitButton && view === "list" && (
         <BrandButton
           testId="add-secret-button"
@@ -134,6 +112,43 @@ function SecretsSettingsScreen() {
         </BrandButton>
       )}
 
+      {view === "list" && (
+        <div className="border border-tertiary rounded-md overflow-hidden">
+          <table className="w-full">
+            <thead className="bg-base-tertiary">
+              <tr className="flex w-full items-center">
+                <th className="w-1/4 text-left p-3 text-sm font-medium">
+                  {t(I18nKey.SETTINGS$NAME)}
+                </th>
+                <th className="w-1/2 text-left p-3 text-sm font-medium">
+                  {t(I18nKey.SECRETS$DESCRIPTION)}
+                </th>
+                <th className="w-1/4 text-right p-3 text-sm font-medium">
+                  {t(I18nKey.SETTINGS$ACTIONS)}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {secrets?.map((secret) => (
+                <SecretListItem
+                  key={secret.name}
+                  title={secret.name}
+                  description={secret.description}
+                  onEdit={() => {
+                    setView("edit-secret-form");
+                    setSelectedSecret(secret.name);
+                  }}
+                  onDelete={() => {
+                    setConfirmationModalIsVisible(true);
+                    setSelectedSecret(secret.name);
+                  }}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
       {(view === "add-secret-form" || view === "edit-secret-form") && (
         <SecretForm
           mode={view === "add-secret-form" ? "add" : "edit"}