hackforla / hackforla/tdm-calculator
EPIC: Consistency between tables
- 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
#### 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
Assessment
This issue has not been assessed yet.