hackforla / hackforla/tdm-calculator

DEV: Replace Border Gray Values with mediumGray `#CFCFCF`

Open Beginner friendly
#3,489 0 comments 0 reactions 0 assignees View on GitHub
deck: staging level: easy p-feature: Final Summary Page pg 5 p-feature: PDF print/download priority: SHOULD HAVE ready for prioritization role: front-end size: 0.5pt
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

Image

Current: My User Defined Strategy details border

Image

Current: Target Points border

Image

- Print preview

Current: Project Description border

Image

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.