hackforla / hackforla/tdm-calculator

Dev: Update the Formatting For Search Boxes in Overlays

Open
#3,382 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

deck: staging level: easy p-feature: Feedback p-feature: Manage Submissions p-feature: My Projects p-feature: Submissions and process priority: MUST HAVE role: front-end size: 0.5pt
Dominant language
JavaScript
Stars
68
Forks
47
Avg merge
3d 9h
Merged PRs (30d)
25

Description

### Overview
We need to update the formatting for search boxes in overlays so that they match the design specifications

#### Details
The following updates need to be made:
- Magnifying Glass
- Size of the magnifying glass is should be 24dp
- Left Justify
- Padding
- Vertical padding (top/bottom) should be 8
- Horizontal (left/right) padding should be10

Design Mockups: Before and After

Image

### Action Items
- [ ] Assign yourself to the development issue.
- [ ] Move the development issue from the Prioritized Backlog to In Progress.
- [ ] Code changes:
- [ ] Make requested change - be sure to modify all the overlay components with search boxes.
- [ ] 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, 3382](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit?slide=id.g3f98872dc86_0_77#slide=id.g3f98872dc86_0_77)
- Release Deck
- [2025-MM-DD Release deck, slide ISSUE NUMBER]

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating every overlay component that contains a search box, then review the linked design mockups and final comment for the intended formatting. Update all matching overlays to use the specified icon size, alignment, and padding, and verify the before-and-after result in staging using slide 3382.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.