[BUG] Emoji selector layout broken if displayed over invoice

[owen1917]

Describe the bug
The layout of the emoji selector becomes broken if its displayed over top of a lightning invoice in the feed

To Reproduce
Steps to reproduce the behavior:

1. Find note that contains an invoice
2. Tap the reaction button to see emoji selector

Expected:
Emoji selector would look as follows
https://image.nostr.build/8a8bdf78a506faf8b21da21e959338af25f3914bbe7b23bd9b3c3ac521192094.jpg

Actual:
https://image.nostr.build/cb61191fc4ad45d046f27752fc764b768929bdc10354d4c812d2f96f3e2c291c.jpg

Device (please complete the following information):

• Phone Brand/Model [e.g. Pixel 7 Pro]: Pixel 6a
• Android Version [e.g. 33]: 14 GrapheneOS
• App Version [e.g. v0.20.3]: 0.86.5

[owen1917]

Not a bug, its just that the invoice button is the same as the emoji selector and it all blends together 😅

[vitorpamplona]

Yeah, I think we might need to recreate this emoji popup to use a continuous area with a background. It will be different than the repost button but it might just be better.

[VASHvic]

Tried to see how it looks with a background and it looks alright in my opinion:

But if a note is small it can look weid sometimes

I'm not sure if send this fix or show background only for lighting invoices 🤔

[vitorpamplona]

I think Github has an awesome layout.

The idea would be to use a shadow to mark the background and then remove the borders of individual buttons. I would just use the rounded corners in the background shape to keep the consistency with other parts of the app.

[VASHvic]

Feedback apreciated:

[vitorpamplona]

Nice! Are you using Card for this? Looks like it could be a good use case for the component. See if you can use ElevatedCard to make the popup pop from the background. Maybe an OutlinedCard could also work.

https://developer.android.com/develop/ui/compose/components/card

[VASHvic]

I was using a box with outlined borders, but changed to an ElevatedCard and looks good.
I submited a PR with this changes: #923