Overview

We need to verify that input field placeholder and entered text use the correct color classes to ensure consistent styling and accessibility across pages.

Details

• Class text colors should be
  • Placeholder text: theme.secondary.gray (currently #939393 in the theme)
  • Inputted text: theme.colorText (currently #0F2940 in the theme)
• Confirm each of these pages uses appropriate classes for all of their input fields
  • Calculator Page 1 (Create Project)
  • Calculator Page 2
  • Calculator Page 3
  • Login
  • Update Account
  • Forgot Password
  • Create New Account
  • My Projects Page (Search Box)
  • Feedback (must be logged in as User)
  • Submissions Page (Search Box, must be logged in as User)
  • Security (Find Box, must be logged in as Security)
  • Archive Accounts (Search for User Box, must be logged in as Security)

Action Items

• Assign yourself to the development issue.
• Move the development issue from the Prioritized Backlog to In Progress.
• Make the changes above by referencing the color names from the theme.js file. DO NOT hard-code hex values in the React components.
• 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
  • Staging slide, ISSUE NUMBER
• Release Deck
  • [2025-MM-DD Release deck, slide ISSUE NUMBER]