Unify the color of the focus ring with the brand color

[MH4GF]

🎯 Background and Purpose

Example: Sidebar

Steps to Reproduce

1. Click on a table name in the sidebar, then press the Tab key to move to the table below.
2. A focus ring appears.

Since the focus ring uses the default browser/OS color, we want to align it with Liam's brand colors.

---

📝 Task Overview

Modify the focus ring for buttons displayed in Liam ERD as follows:

:focus-visible {
  outline: var(--primary-color) auto 1px;
}

LeftPane

TableDetail

---

💬 Points to Consider

Since there are other buttons, such as in the toolbar, we need to identify all of them and apply the update universally.

---

⚽ Goal

Ensure that all focus rings for buttons displayed in Liam ERD use the brand color.

---

💡 References

[JonathanDeLaCruzEncora]

Hi I tried to give it a go to this issue, if there are any changes to be done in the PR, let me know, specially because I wasn't able to see the pictures attached to this issue.

However, I followed your instructions and was able to see the focus ring, and changed also the ones at the toolbar, so if there are others missing or need any changes, I'd be happy to help.

[MH4GF]

Hi @JonathanDeLaCruzEncora, thanks for your contribution ✨ And sorry, I was using the wrong attachment way.
You have done what we wanted to do!