hackforla / hackforla/tdm-calculator

Dev: Update Feedback Page TDM Plan Grid design

Open
#2,863 13 comments 0 reactions 1 assignee Claimed by @geolunalg View on GitHub
deck: staging level: medium p-feature: Feedback priority: MUST HAVE role: back-end role: database role: front-end size: 3pt
Dominant language
JavaScript
Stars
68
Forks
47
Avg merge
3d 9h
Merged PRs (30d)
25

Description

### Overview
Please update the feedback page table look consistent with the rest of the website as described in Design Issue #2838 .

### Note
- This is related to Issue #3442, but they can be done in either order.

### Details
Current Feedback Page Design

Image

This issue needs to implement the following:

#### Column Header
The current column header does not have the
1. Proper column header (blue background)
- Add blue background
2. Filter and sort icons
- Add filter and sort icons
3. Correct column names.
- Change:
- `Date Entered` to `Created On`
- `Date Saved` to `Last Saved`
- `Date Submitted` to `Submitted`
4. Select All checkbox at the beginning
- Add the Select All checkbox

Current Header
Image

New Header
Image

What the feedback page will look like with the new header*
Image

*The only exception to the new design above is that Project Name will be changed to TDM Plan, and a new column will be added Development Project Name. This is happening on another issue.

#### Overlays
1. There are no overlays for any of the columns.
- Add overlays to each column to allow filtering and/or sorting

New Feedback Page Overlays

Image


Image


Image


Image


Image


Image

### Action Items
- [ ] Assign yourself to the development issue.
- [ ] Move the development issue from the Prioritized Backlog to In Progress.
- [ ] Development Actions
- [ ] Make the styling, filtering, and sorting changes to the page as described above. Be sure to use named colors from the theme.
- [ ] Run the WAVE Tool to verify that there are no accessiblity problems.
- [ ] 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
- Design details: https://github.com/hackforla/tdm-calculator/issues/2838#issuecomment-3838638825
- Design mockups: [Dev section Issue 2838 in figma](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=27086-8765&m=dev)

#### Staging and Release decks
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/)
- [[Staging Deck, slide 2863](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit?slide=id.g3c3611c139e_0_7#slide=id.g3c3611c139e_0_7)]
- Release Deck
- [2025-MM-DD Release deck, slide ISSUE NUMBER]

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.