hackforla / hackforla/tdm-calculator

Dev: Rationalize and reformat Search Boxes above tables

Open
#3,312 0 comments 0 reactions 0 assignees View on GitHub
deck: staging level: easy p-feature: Archived Accounts p-feature: Manage Submissions p-feature: My Projects p-feature: Security p-feature: Submissions and process priority: MUST HAVE role: front-end size: 2pt
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**
Image
- 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**
Image
- 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.