refactor(frontend): Make the secrets table styling consistent.

[hieptl]

• This change is worth documenting at https://docs.all-hands.dev/
• Include this change in the Release Notes. If checked, you must provide an end-user friendly description for your change below

End-user friendly description of the problem this fixes or functionality this introduces.

🔍 Description

The visual styling of the Secrets table differs from that of the API Keys table, leading to inconsistency in the UI. Aligning their design will improve overall cohesiveness and user experience.

The Secrets table currently uses a different styling approach compared to the API Keys table, which creates a visual mismatch across similar components.

---

✅ Expected Behavior

• The Secrets table should follow the same styling as the API Keys table to maintain UI consistency.

---

❌ Current Behavior

• The Secrets table uses inconsistent styling compared to the API Keys table.

---

🔁 Steps to Reproduce

1. Navigate to the Secrets settings page.
2. Observe the table layout and styling.
3. Compare it to the API Keys table on its respective settings page.

---

📹 Additional Context

A video demonstrating the issue is available below:

issue.mov

---

Summarize what the PR does, explaining any non-trivial design decisions.

• Update the Secrets table to match the visual style and layout of the API Keys table (e.g., typography, spacing, border styles, icons, etc.).

• A video demonstrating the output is available below:

output.mov

---

Link of any specific issues this addresses:

Resolves #9627

[Abubakar-01]

✅ Verified the PR. The UI for the Secrets section has been updated to exactly match the requirements mentioned in the issue. However, I don’t see the API Keys tab in the Settings section in either the main branch or this PR branch. Mentioning this because the Secrets UI was updated to align with the API Keys UI for consistency, but the API Keys section itself is currently missing.

[hieptl]

Hi @Abubakar-01

Thank you for your comment!

• You can view the API Keys table by visiting this link: https://app.all-hands.dev/settings/api-keys.
• Please note that the API Keys table is part of the OpenHands Cloud.
• The relevant source code for the API Keys tab and table can be found here:
  • settings.tsx (line 19)
  • api-keys.tsx (line 4)

Let me know if you have any questions!

[amanape]

Thank you!