hackforla / hackforla/tdm-calculator

Consistency between tables: Feedback

Open
#2,008 3 comments 0 reactions 0 assignees View on GitHub
deck: staging dependency level: easy p-feature: Comment Form p-feature: Feedback Participant Type: Security Admin Participant type: User priority: SHOULD HAVE role: ui/ux design size: 1pt
Dominant language
JavaScript
Stars
68
Forks
47
Avg merge
3d 9h
Merged PRs (30d)
25

Description

### Dependency
- https://github.com/hackforla/tdm-calculator/issues/2218

### Overview
We need to make the Feedback page and its table's 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 the Feedback page.

### Action Items
- [x] Create a slide for this issue on the [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg).
- [ ] Add a new page to the Design section of the Figma file and include this issue's number, title, and assignee in the title.
- [ ] Use the standards developed for tables in #2013 to develop a mockup of the Feedback page on the Figma page.
- [ ] Review with the design team. Update if needed based on feedback.
- [ ] 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.
- [ ] 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: [Feedback](https://tdm-dev.azurewebsites.net/feedback)

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

Contributor guide

Open the contributing guide

Research direction

Start by reviewing parent issue #2013 and its table standards, then open the linked Feedback page and Figma file. Create the Feedback mockup in the Design section, including the requested issue metadata, and take it through design, product, development, research, and stakeholder review. Finish the approved design updates, style-guide updates, and development handoff.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
design
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.