Fix: Update form control focus border and add green box-shadow

[ghanshyam2005singh]

Fix: Button Hover & Form Control Focus Colors (Closes #257)

Summary

This PR fixes UI consistency issues to match the CircuitVerse color scheme: Form control focus state - Text input fields now show a green border and subtle green glow on focus instead of red

Changes

File: assets/scss/_mixins.scss

• Added focus state override for .form-control to use #40ba84 border with a matching green box-shadow
• No submodule files were modified; all changes are safe from future submodule updates

How to Test

1. Navigate to the contact page
2. Click on any text input field
3. The border should turn green (#40ba84) with a subtle green glow
4. It should not turn red at any point

Screen Recording

Screencast.from.2025-12-24.14-15-40.webm

Summary by CodeRabbit

• Style
  • Enhanced visual feedback for form control focus states with improved green border color and glow effect.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Adds a new SCSS focus state rule for form controls with a green border (#40ba84) and 0.2rem green box-shadow to replace the existing red focus styling, addressing UI inconsistency across form pages.

Changes

Cohort / File(s)	Summary
Form Control Focus Styling assets/scss/_mixins.scss	Introduces .form-control:focus selector with green border-color (#40ba84) and green box-shadow effect (0.2rem), marked as !important

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: updating form control focus styling with a green border and box-shadow, which directly addresses the PR's core objective.
Linked Issues check	✅ Passed	The code change implements the requirement from issue #257 by adding green focus styling (#40ba84 border and box-shadow) to .form-control, replacing the red focus state on the Contact Us form.
Out of Scope Changes check	✅ Passed	The change is narrowly scoped to adding .form-control:focus styling in _mixins.scss, directly addressing the linked issue requirement without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

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

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 24cfa62 and 8ae0341.

📒 Files selected for processing (1)

• assets/scss/_mixins.scss

🔇 Additional comments (1)

assets/scss/_mixins.scss (1)

180-183: LGTM! Focus styling matches the CircuitVerse theme.

The green border and box-shadow correctly replace the red focus state, using the brand color #40ba84 consistently applied throughout the file. The !important flags align with the override patterns established elsewhere in the stylesheet.

---

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