hackforla / hackforla/tdm-calculator

EPIC: Consistency between tables

Open
#2,013 63 comments 0 reactions 1 assignee Claimed by @AshishDes View on GitHub
deck: staging not for stakeholder feature: style guide level: easy p-feature: My Projects-Deleted Tab Participant type: Admin Participant Type: Security Admin priority: SHOULD HAVE role: ui/ux design size: 1pt status: 2 weeks inactive
Dominant language
JavaScript
Stars
68
Forks
47
Avg merge
3d 9h
Merged PRs (30d)
25

Description

### Overview
We need to make our tables aesthetically consistent throughout the site.

### Details
There are tables throughout the TDM site, but they are inconsistent in their color and styling. See the below images as examples.

#### Dark navy header
Screenshot from the Create Project page 2 table

Screenshot from the Create Project page 4 table

Screenshot from the Security table

Screenshot from the FAQ table

#### Dark blue header
Screenshot from the My Projects table

#### White header
Screenshot from the Feedback table

[This issue comment](https://github.com/hackforla/tdm-calculator/issues/1407#issuecomment-1930764035) is what the Submit Snapshot table should be referencing for its design update in #2004 .
Image of the Submit Snapshot form in 1407

1407_My Projects 3-1

#### Light gray header
Screenshot from the Create Project page 5 table

The reason the Create Project page 5 table's headers are light gray are
1. To indicate that it's not interactive like the calculator on earlier pages.
2. It's not intended to be printed.

This table does not need to have its header color changed to match the others in the style guide due to the above-stated reasons. It is included only to illustrate the diversity of table stylings on the site.

### Action Items
- [x] Decide the design standards for TDM tables.
- [x] Include those standards in the Figma style guide.
- [x] Apply the new design standards to each page in the system using the following rubric:

- [x] Left-align:
Text or dates in columns
Column headers
Dropdowns

- [x] Right-align:
Numbers in columns

- [x] Center-align:
Checkboxes
Icons

- [x] Ensure column headings span the full width of the column when needed
If headings do not span full width, make sure they are left-aligned

### Resources
- #1407
- Link to the [Figma page](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=4919-17243&t=VQLVPSITTsT15xLR-1)
- Link to the [Security page](https://tdm-dev.azurewebsites.net/roles) in the Dev site.
- Link to the [Archived Accounts page](https://tdm-dev.azurewebsites.net/archivedaccounts) in the Dev site.
- Link to the [Archived Projects page](https://tdm-dev.azurewebsites.net/archivedprojects) in the Dev site.
- Link to [Create Project page 2](https://tdm-dev.azurewebsites.net/calculation/2/0) in the Dev site.
- Link to [Create Project page 4](https://tdm-dev.azurewebsites.net/calculation/4/0) in the Dev site.
- Link to [Create Project page 5](https://tdm-dev.azurewebsites.net/calculation/5/0) in the Dev site.
- Link to the [My Projects page](https://tdm-dev.azurewebsites.net/projects) in the Dev site.
- Link to the [Submissions page](https://tdm-dev.azurewebsites.net/submit) in the Dev site.
- Link to the [FAQ page](https://tdm-dev.azurewebsites.net/faqs) in the Dev site.
- Link to the [Feedback page](https://tdm-dev.azurewebsites.net/feedback) in the Dev site.

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.