[BD-46] fix: issue with custom searchfield bgcolor

[khudym]

Description

update styles for SearchField
Issue

Deploy Preview

Include a direct link to your changes in this PR's deploy preview here (e.g., a specific component page).

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @khudym!

This is currently a draft pull request. When it is ready for our review and all tests are green, click "Ready for Review", or remove "WIP" from the title, as appropriate.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	050cc48
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/651fe3f2df4e4e000833835c
😎 Deploy Preview	https://deploy-preview-2671--paragon-openedx.netlify.app/components/searchfield
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (b081084) 91.90% compared to head (050cc48) 91.83%.
Report is 12 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2671      +/-   ##
==========================================
- Coverage   91.90%   91.83%   -0.08%     
==========================================
  Files         235      235              
  Lines        4310     4224      -86     
  Branches     1044     1024      -20     
==========================================
- Hits         3961     3879      -82     
+ Misses        345      341       -4     
  Partials        4        4              

Files	Coverage Δ
src/SearchField/SearchFieldSubmitButton.jsx	100.00% <ø> (ø)

... and 8 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[adamstankiewicz]

[curious] Given it appears the Form.Control component itself has a white background (see screenshot), I'm wondering if the .pgn__searchfield-form's background color set on line 11 is actually needed?

Is an alternative solution here to remove the background-color: $search-form-background-color; on .pgn__searchfield-form?

[khudym]

In PR on line 11 we added bg-color to cover issue with the background of labels and buttons, but with an external buttons it doesn`t work properly. If we just remove this line, the previous issue will occur, so the solution - to add styles separately for the searchfield labels and buttons.

[viktorrusakov]

@khudym I think you also need to add pgn__searchfield__action-btn class to SearchFieldClearButton, otherwise it has wrong background.