fix: enhance dark mode styling for announcement banner

[wassimoo]

Current:

New:

Checklist

• I have read the contributing guidelines and signed the CLA.
• I have referenced an issue containing the design document if my change introduces a new feature.
• I have read the security policy.
• I confirm that this pull request does not address a security vulnerability.
  If this pull request addresses a security vulnerability,
  I confirm that I got approval (please contact security@ory.com) from the maintainers to push the changes.
• I have added tests that prove my fix is effective or that my feature works.
• I have added the necessary documentation within the code base (if appropriate).

Further comments

Summary by CodeRabbit

• Style
  • Improved dark mode styling for announcement banners with consistent visual treatment across warning, error, success, and info message types.

[vinckr]

looks dope!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: f63d3444-68f8-4faa-b3e0-5570b56ce2a4

📥 Commits

Reviewing files that changed from the base of the PR and between 678bb33 and 4855ab8.

📒 Files selected for processing (2)

• src/components/AnnouncementBanner/AnnouncementBanner.module.css
• src/components/AnnouncementBanner/AnnouncementBanner.tsx

---

📝 Walkthrough

Walkthrough

AnnouncementBanner component dark-mode support is completed by defining dark-theme CSS overrides for all announcement level classes and ensuring the info level applies its corresponding CSS module class consistently with other levels.

Changes

AnnouncementBanner dark-mode styling

Layer / File(s)	Summary
Dark-mode CSS styles and classes src/components/AnnouncementBanner/AnnouncementBanner.module.css	Dark-mode color overrides for announcement link hover states and all four announcement level classes (warning, error, success, info) with defined border, background, and text colors.
Apply info CSS class in component src/components/AnnouncementBanner/AnnouncementBanner.tsx	getLevelClasses now appends styles.info CSS module class to the info announcement level's className string, matching the pattern used for warning, error, and success levels.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• ory/docs#2549: Initial AnnouncementBanner component and CSS module implementation that this PR builds upon for dark-mode support.

Suggested reviewers

• aeneasr
• zepatrik
• vinckr
• piotrmsc

Poem

🐰 Dark and light, a balance bright,
The banner shines in day and night,
With CSS and classes true,
The info style now comes through! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description lacks substance beyond images and contains no explanation of the changes, related issue reference, or implementation details as required by the template.	Add a clear description explaining what was changed and why, reference a related issue if applicable, and provide context beyond just the before/after images.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title accurately describes the main change: adding dark mode styling enhancements to the announcement banner component.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/improve-banner-dark-mode-styling

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}