hackforla / hackforla/tdm-calculator
Dev: Rationalize and reformat Search Boxes above tables
- Dominant language
- JavaScript
- Stars
- 68
- Forks
- 47
- Avg merge
- 3d 9h
- Merged PRs (30d)
- 25
Description
### Overview
Review and rationalize the code for the search box formatting to standarize it across all the pages.
#### Detials
The search fields on the following pages do not conform to visual standard, but all the search boxes seem to be using seperate classes as well.
This issue will not be complete without a clear reason documented for the changes that you make. Please do not just put in a PR to fix the security roles page and the archived accounts page. Please make sure that all the search boxes use standarized formatting and ideally one class.
**Security Roles Page**
- remove the "find:" text
- update the size so that it matches the search box on all other pages where they appear (Archived Accounts, My Projects, Submissions, Manage Submissions)
**Archived Accounts Page**
- remove the "Search for user" text
Input classes per page that has search boxes
Is there a reason why we don't just use one input class?
- Security input box class: `input-0-1-503`
- My Projects input box class: `searchBar-0-1-120`
- Manage Submissions input box class: `searchBar-0-1-1666`
- Submissions input box class: `searchBar-0-1-481`
- Archived Accounts input box class: `searchBar-0-1-534`
Results from page inspections
#### Security Roles Page
.input-0-1-503 {
width: 20rem;
}
input, textarea {
~width: 100%;~
border: 1px solid #e0e0e0;
padding: .5em .65rem;
}
#### Archive Accounts
.searchBar-0-1-534 {
width: 300px;
padding: 12px 12px 12px 40px;
}
input, textarea {
~width: 100%;~
border: 1px solid #e0e0e0;
~padding: .5em .65rem;~
}
#### My Projects
.searchBar-0-1-120 {
width: 27em;
padding: 12px 12px 12px 48px;
max-width: 100%;
margin-right: 0.5rem;
}
input, textarea {
~width: 100%;~
border: 1px solid #e0e0e0;
~padding: .5em .65rem;~
}
#### Submissions
.searchBar-0-1-481 {
width: 27rem;
padding: 12px 12px 12px 48px;
max-width: 100%;
}
input, textarea {
~width: 100%;~
border: 1px solid #e0e0e0;
~padding: .5em .65rem;~
}
#### Manage Submissions
.searchBar-0-1-22 {
width: 27rem;
padding: 12px 12px 12px 48px;
max-width: 100%;
}
input, textarea {
~width: 100%;~
border: 1px solid #e0e0e0;
~padding: .5em .65rem;~
}
### Action Items
- [ ] Assign yourself to the development issue.
- [ ] Move the development issue from the Prioritized Backlog to In Progress.
- [ ] [ADD DEVELOPER ACTION ITEMS]
- [ ] 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: [link to final comment in GitHub issue]
- Design mockups: [link to Ready for Dev section in the related Figma page]
#### Staging and Release decks
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/)
- [Staging slide, 3312](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit?slide=id.g3f2afe8206d_0_150#slide=id.g3f2afe8206d_0_150)
- Release Deck
- [2025-MM-DD Release deck, slide ISSUE NUMBER]
Contributor guide
Research direction
Start by locating the Security Roles, Archived Accounts, My Projects, Submissions, and Manage Submissions page implementations and their search-box styles. Compare the existing classes and formatting, then standardize the search boxes across all listed pages, document the reason for the chosen approach, and add before-and-after images to the staging slide.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100