[BUG]: Rating stars have inconsistent styling and visibility across light and dark themes on the Contact page

[Git-Shubham14]

🐞 Bug Report

📌 Description

The star rating component on the Contact page does not adapt properly to the application's Light and Dark themes. The selected stars retain the same bright glow effect in both themes, while the unselected stars have low-contrast outlines, resulting in an inconsistent and less polished user interface.

---

🔄 Steps to Reproduce

Steps to reproduce the issue:

1. Open the application.
2. Navigate to the Contact page.
3. Switch between Light and Dark mode using the theme toggle.
4. Observe the star rating section under Product Quality, Delivery Speed, Customer Support, and Website Usability.

---

✅ Expected Behavior

• The star rating component should adapt its colors and styling based on the selected theme.
• Selected and unselected stars should have sufficient contrast in both Light and Dark modes.
• Hover and selected states should remain visually consistent with the application's design system.

---

❌ Actual Behavior

• Selected stars display the same bright glow regardless of the active theme.
• Unselected stars have poor contrast, especially in Dark mode.
• The rating component appears visually inconsistent with the rest of the themed interface.

---

📷 Screenshots / Recordings

---

📋 Additional Context

• The issue affects the rating component used for:

  • Product Quality
  • Delivery Speed
  • Customer Support
  • Website Usability

• This appears to be a styling issue where the rating component is not fully theme-aware.

---

🛠️ Possible Solution

• Apply theme-aware styling to the star rating component using CSS variables or theme classes.
• Adjust the colors for filled and unfilled stars separately for Light and Dark themes.
• Reduce or customize the glow effect in Dark mode to improve readability and maintain visual consistency.

[Git-Shubham14]

Hii, could you please assign this issue to me under SSOC '2026?

[AnushaRumi]

Hi @AshutoshDash1999 I'd like to work on this issue under SWOC.

After reviewing the Contact page, I noticed that the star rating component applies inline styles through JavaScript, which hardcodes the colors and glow effects. My plan is to refactor the component to use theme-aware CSS variables/classes for the active, inactive, hover, and glow states, while keeping JavaScript responsible only for toggling the rating state. This will ensure consistent styling and better visibility across both Light and Dark themes without changing the existing functionality.

If this approach aligns with the project, could you please assign this issue to me? Thank you!

[BHUVANSH855]

Hi @AshutoshDash1999 I'd like to work on this issue under SWOC.

After reviewing the Contact page, I noticed that the star rating component applies inline styles through JavaScript, which hardcodes the colors and glow effects. My plan is to refactor the component to use theme-aware CSS variables/classes for the active, inactive, hover, and glow states, while keeping JavaScript responsible only for toggling the rating state. This will ensure consistent styling and better visibility across both Light and Dark themes without changing the existing functionality.

If this approach aligns with the project, could you please assign this issue to me? Thank you!

I am admin for this project, no need to tag another's