hackforla / hackforla/tdm-calculator
DEV: Update Disabled UI Elements to disabledGray `#989898`
- Dominant language
- JavaScript
- Stars
- 68
- Forks
- 47
- Avg merge
- 3d 9h
- Merged PRs (30d)
- 25
Description
### Dependency
- #3477
### Overview
We need to update the existing disabled UI element colors from `#808080`, `#CFCFCF`, and `#EEF1F4` to the new disabledGray `#989898`, so that disabled elements are consistent across the application.
### Details
Details
Update the following disabled UI elements to use the new `disabledGray: "#989898"` theme color:
- Calculator Page 1
Current: Disabled button text
Current: Disabled arrow icons
Current: Disabled page numbers (excluding the current active page)
- Calculator Page 4
Current: Disabled and unchecked checkboxes
Current: Checked & Disabled checkboxes
- Calculator Page 5
Current: Disabled text & icon
- Login page where the "Continue without Saving" button is locally set to disabled
Current: Disabled button
- My Projects page
Current: Disabled toolbar icon
### Action Items
- [ ] Assign yourself to the development issue.
- [ ] Move the development issue from the Prioritized Backlog to In Progress.
- [ ] Implement the requested changes.
- [ ] Create a PR, if applicable.
- [ ] Create a new slide (or edit one if it already exists) in staging and add the before and after images
- [ ] Once the PR has been approved, use it to close this issue. If there is no PR is associated with this issue, close this issue after lead signoff.
### Resources/Instructions
- This issue is part of an audit of all grays #3319.
#### GithHub
- https://github.com/hackforla/tdm-calculator/blob/develop/client/src/styles/theme.js#L31-L37
#### Staging and Release decks
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/)
- [Staging slide, 3497](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit?slide=id.g3fb5ae4c031_1_0#slide=id.g3fb5ae4c031_1_0)
- Release Deck
- [2025-MM-DD Release deck, slide ISSUE NUMBER]
Contributor guide
Research direction
Start with client/src/styles/theme.js at the linked theme color definitions, then trace the disabled elements on Calculator Pages 1, 4, and 5, the login page, and My Projects page. Replace the listed disabled gray values with disabledGray #989898 and verify the before-and-after appearance in staging using the issue's slide.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100