hackforla / hackforla/tdm-calculator

Consistency between tables: Create Project page 4

Open
#2,218 50 comments 0 reactions 0 assignees View on GitHub
deck: staging draft level: easy p-feature: Strategies Page p4 Participant type: Admin Participant Type: Security Admin Participant type: User priority: SHOULD HAVE ready for product role: ui/ux design size: 1pt status: to update!
Dominant language
JavaScript
Stars
68
Forks
47
Avg merge
3d 9h
Merged PRs (30d)
25

Description

### Overview
We need to make Create Project page 4's table design consistent with the rest of the site.

### Details
Tables throughout the site are inconsistent in their use of varying elements, including:
- Header background color
- Header font size
- Header font color
- Header font weight
- Header padding
- Row default state
- Row hover state
- Row selected state
- Row deleted state
- Border color
- Border radius
- Styling of links
- Alignment of elements around the table
- Tone of copy

Please take the decisions made for styling tables in #2013 and apply them to Create Project page 4.

### Action Items
- [x] Create a slide for this issue on the [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg).
- [x] Add a new page to the Design section of the Figma file and include this issue's number, title, and assignee in the title.
- [x] Use the standards developed for tables in #2013 to develop a mockup of Create Project page 4 on the Figma page.
- [x] Review with the design team. Update if needed based on feedback.
- [x] Review with the product, development, and research teams. Update if needed based on feedback.
- [ ] Get Stakeholder sign-off via the stakeholder meeting slide deck.
- [ ] Update the Figma design system if necessary.
- [ ] Update the [Style Guide Presentation](https://docs.google.com/presentation/d/1I4q35NL2WW2RpksIyawhHCd8qJnrjme1ZDNIBxu24hQ/edit#slide=id.g2a6d1bfeb46_0_103).
- [ ] Create a development handoff issue.
- [ ] Move this issue's Figma page to the Development section and include the development issue's number in the title.
- [ ] Add the development issue's number at the bottom of this design issue's description.
- Release dependencies
- [ ] Move https://github.com/hackforla/tdm-calculator/issues/2008 from the icebox to the new issue approval column
- [ ] Remove the dependency label
- [ ] Add the `ready for dev lead` label
- [ ] Reassign any previous assignees to this issue.
- [ ] Close this issue.

### Resources
- Parent issue: #2013
- Link to this issue's Figma page: [2013](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=4919-17243&t=VQLVPSITTsT15xLR-1)
- Link to page on the TDM Dev site: [Create Projects page 4](https://tdm-dev.azurewebsites.net/calculation/4/0)

#### Slides
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg)
- [Staging Deck, slide 2218](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit?slide=id.g338e163e72f_0_44#slide=id.g338e163e72f_0_44)
- Release Deck
- [YYYY-MM-DD Release Deck, slide 2218]

Contributor guide

Open the contributing guide

Research direction

Start with parent issue #2013 and its table decisions, then review the Create Projects page 4 and the linked Figma page. Complete the remaining stakeholder sign-off, design-system and style-guide updates, and create the development handoff issue before moving this issue toward closure.

Written by the indexing model from the issue text.

Assessment

Tech stack
figma
Domain
design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.