hackforla / hackforla/tdm-calculator
DEV: Replace Border Gray Values with mediumGray `#CFCFCF`
- Dominant language
- JavaScript
- Stars
- 68
- Forks
- 47
- Avg merge
- 3d 9h
- Merged PRs (30d)
- 25
Description
### Overview
We need to update the existing UI border colors from `#EEF1F4` and `#E7EBF0` to the existing mediumGray `#CFCFCF`, so that borders are consistent across the application.
### Details
Update the following UI element to use `colorMediumGray: "#CFCFCF"`:
- Page 5 of Calculator
Current: My Project Description border
Current: My User Defined Strategy details border
Current: Target Points border
- Print preview
Current: Project Description border
### Action Items
- [ ] Assign yourself to the development issue.
- [ ] Move the development issue from the Prioritized Backlog to In Progress.
- [ ] Implement 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. Do not worry if this makes the kebab hover background look weird. We will be changing the row hover color on a later issue
#### 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, 3489](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit?slide=id.g3fb5ae4c031_1_50#slide=id.g3fb5ae4c031_1_50)
- Release Deck
- [2025-MM-DD Release deck, slide ISSUE NUMBER]
Contributor guide
Research direction
Start in client/src/styles/theme.js at lines 31-37 and trace the colorMediumGray definition and its use in Calculator Page 5 and print preview borders. Verify the My Project Description, My User Defined Strategy details, Target Points, and Project Description borders use #CFCFCF, then compare the staging screenshots with the linked issue images.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100