fix: MET-182 degrade ui bug darkmode

[Sotatek-TruongNguyen4]

Description

Fix degrade ui bug darkmode

Checklist before requesting a review

Issue ticket number and link

• This PR has a valid ticket number or issue: MET-182

Testing & Validation

• This PR has been tested/validated in Chrome, Firefox, Safari and Brave browsers.
• The code has been tested locally with test coverage match expectations.
• Added new Unit/Component testing (if relevant).

Security

• No secrets are being committed (i.e. credentials, PII)
• This PR does not have any significant security implications

Code Review

• There is no unused functionality or blocks of commented out code (otherwise, please explain below)
• In addition to this PR, all relevant documentation (e.g. Confluence / README.md file) and architecture diagrams (e.g. Miro) were updated

Design Review

• If this PR contains changes to the UI, it has gone through a design review with UX Designer or Product owner.
• In case PR contains changes to the UI, add some screenshots to notice the differences

---

Chrome

Before

After

Safari

Before

After

Responsive

Before

After