[Enhancement]: Improve Disabled State UX by Dimming Labels & Section Text

[Aryan-Shan]

Enhancement Summary

Following the recent UI revamp of the Scrum Helper extension, most components now reflect a modern and polished design. However, when the extension is disabled using the Enable / Disable toggle, only the input fields become non-interactive while section labels and descriptive text remain visually bold and active.

This creates a misleading UI state. This enhancement proposes visually dimming (graying out) labels, section headers, and helper text when the extension is disabled to clearly indicate an inactive state.

---

Motivation

As part of the recent UI modernization effort, the extension now uses improved typography, spacing, and visual hierarchy. While the disabled state correctly prevents user interaction, the visual language of the revamped UI still suggests interactivity because labels and headers remain prominent.

This leads to:

• UX inconsistency within the new design system
• Confusion about whether disabled sections are still configurable
• A mismatch between functional and visual states

Dimming labels and text ensures the disabled state is visually explicit, intuitive, and aligned with the updated UI.

---

Proposed Solution

When the extension is disabled:

• Apply a disabled or secondary text style to:
  • Section headers
  • Labels
  • Descriptive/helper text
• Use subtle styling consistent with the new UI system:
  • Reduced opacity (e.g., opacity: 0.4–0.6)
  • Muted gray color matching disabled inputs
• Ensure consistency across:
  • Light mode
  • Dark mode
• Keep layout and structure unchanged

---

Alternatives Considered

• Leaving labels visually unchanged and relying only on disabled inputs
  → Rejected due to UX ambiguity in the new UI
• Hiding entire sections when disabled
  → Rejected as it removes context and discoverability

---

Additional Context

• This enhancement is a visual-only improvement
• No functional or logical behavior is changed
• Fully backward compatible
• Builds directly on top of the recent UI revamp to improve consistency and clarity

---

Contribution Checklist

• I have checked existing enhancement requests
• I have clearly described the proposed change
• I have explained the motivation and context
• I am willing to help implement this feature

[Mayank-Rouniyar]

Hi I would like to work on this assignment. Could you please assign it to me.

[github-actions]

@Mayank-Rouniyar Please go ahead and create a PR when you are ready. We do not formally assign issues. Contributors are free to pick up any open issue based on their availability. You can open a PR or even a draft PR to let others know that you’re working on it.