fix: improve visibility of newsletter input fields in dark mode #5128

[Dsp023]

Refactor InputBox component to support a dark mode prop. Apply high-contrast styles (border, placeholder, focus) when the dark prop is active to ensure the newsletter input fields are clearly visible on dark backgrounds.

Summary by CodeRabbit

• New Features
  • Added dark mode support for input fields and the newsletter subscription form so inputs automatically adapt styling when the app is in dark theme, improving visual consistency across light/dark modes.

[github-actions]

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	5297dfb
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/698b2f76a3d9d70008ef8f86
😎 Deploy Preview	https://deploy-preview-5128--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	37
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-5128--asyncapi-website.netlify.app/

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds optional dark-mode theming to the InputBox component via a new dark?: boolean prop (default false) and propagates that prop from NewsletterSubscribe to its InputBox instances; updates the InputBoxProps type accordingly.

Changes

Cohort / File(s)	Summary
InputBox component & props type components/InputBox.tsx, types/components/InputBoxPropsType.ts	Added optional dark?: boolean to InputBoxProps. InputBox now accepts dark = false and conditionally applies dark or light CSS classes to the input element.
Newsletter form propagation components/NewsletterSubscribe.tsx	Propagated dark={dark} to the name and email InputBox instances so their styling follows the parent dark flag.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 I found a toggle, soft and sly,
Inputs dressed in midnight sky,
I nibble lines of CSS bright,
Hopping through shadowed light,
Happy code — both dark and spry. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Title check	✅ Passed	The title accurately summarizes the main change: improving visibility of newsletter input fields in dark mode by adding dark mode styling support.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@components/InputBox.tsx`:
- Line 14: Remove the trailing comma in the props destructuring so the last
defaulted prop (dark = false) is not followed by a comma; locate the InputBox
component's parameter list (the destructured props where "dark = false,"
appears) and change it to "dark = false" (no trailing comma) to satisfy
Prettier/comma-dangle rules.

🧹 Nitpick comments (1)

components/InputBox.tsx (1)

23-27: Dark mode styling looks good overall; consider adding bg-transparent or explicit light background for symmetry.

The dark branch sets bg-zinc-900, but the light branch doesn't explicitly set a background. If the input inherits a dark parent background in some other context, the light variant could appear broken. A minor concern — only relevant if InputBox is ever reused outside NewsletterSubscribe.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (7653853) to head (5297dfb).

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #5128   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          796       796           
  Branches       146       146           
=========================================
  Hits           796       796           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[SHUBHANSHU602]

Please mention issue number .