hackforla / hackforla/tdm-calculator

DEV: Update Disabled UI Elements to disabledGray `#989898`

Open
#3,497 0 comments 0 reactions 0 assignees View on GitHub
deck: staging level: medium p-feature: Final Summary Page pg 5 p-feature: Login p-feature: My Projects p-feature: Project Page p1 p-feature: Project Specifications Page p2 p-feature: Strategies Page p4 priority: SHOULD HAVE ready for prioritization role: front-end size: 2pt
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

Image

Current: Disabled arrow icons

Image

Current: Disabled page numbers (excluding the current active page)

Image

- Calculator Page 4

Current: Disabled and unchecked checkboxes

Image

Current: Checked & Disabled checkboxes

Image

- Calculator Page 5

Current: Disabled text & icon

Image

- Login page where the "Continue without Saving" button is locally set to disabled

Current: Disabled button

Image

- My Projects page

Current: Disabled toolbar icon

Image

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.