fix: wrong background color for search bar in light mode

[nekomamoushi]

PR Checklist

• The commit message follows our guidelines: https://github.com/ngneat/transloco/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Display dark background on lightt mode in the search bar

Issue Number: #117

What is the new behavior?

Correct background color for search bar on light mode

Does this PR introduce a breaking change?

• Yes
• No

Other information

[netlify]

✅ Deploy Preview for chipper-marshmallow-7b90fb ready!

Name	Link
🔨 Latest commit	f83c642
🔍 Latest deploy log	https://app.netlify.com/sites/chipper-marshmallow-7b90fb/deploys/6579c904441efd000834c11f
😎 Deploy Preview	https://deploy-preview-120--chipper-marshmallow-7b90fb.netlify.app
📱 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.

[geromegrignon]

Can you rebase on latest main branch?

Changes occured meanwhile with the new control flow syntax.

[nekomamoushi]

Arf I missed the last update... will rebase asap :)

[nekomamoushi]

Hi,

It seems the material component update itself his background in light or dark mode. So there is no need for these classes : bg-white dark:bg-[424242].

Could you confirm it please ?

I still have the background issue if I let these classes. When I remove them, it works fine :)

[ajitzero]

Hi @nekomamoushi - It seems your local npm modules are outdated, specifically the one for Prettier. Please run npm i and then run npx nx format:write again.

[nekomamoushi]

I was wondering what went wrong :)

Thank You

[ajitzero]

No worries! I was on the lookout for issues like this since I just updated Prettier last night (that's what you rebased onto) 😅

[geromegrignon]

Hi,

It seems the material component update itself his background in light or dark mode. So there is no need for these classes : bg-white dark:bg-[424242].

Could you confirm it please ?

I still have the background issue if I let these classes. When I remove them, it works fine :)

The class has been introduced to hide the search results if you scroll.
Otherwise the results are displayed behind the search bar by scrolling. You can try on a mobile screen with 'italy' as a search term.

[nekomamoushi]

Hi, thanks for the information. I tried many things to fix this background issue but nothing worked...
Try to target the material class directly, etc... I didn't find a solution.

Do you have any idea that maybe help ? :)

[ajitzero]

Try to target the material class directly

First approach: I tried to edit in the browser, and the main changes should be to replace the pt-5 class with top-5 (this causes the overflow) and then set bg-white dark:bg-black (use actual colors, not white/black) in the same tag which already had the class.

But also, (second approach) I think the scroll section shouldn't go to the top; that way, we wouldn't need to set the background in the first place after we replace the absolute positioning of the search text input with a more straightforward flex layout.

[geromegrignon]

closed as removed feature from the new UI.