search

vitorpamplona / amethyst

Nostr client for Android
MIT License
1.08k stars 148 forks source link

[BUG] Emoji selector layout broken if displayed over invoice #873

Open owen1917 opened 1 month ago

owen1917 commented 1 month ago

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):

owen1917 commented 1 month ago

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

vitorpamplona commented 1 month ago

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 commented 1 month ago

Tried to see how it looks with a background and it looks alright in my opinion: image But if a note is small it can look weid sometimes image

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

vitorpamplona commented 1 month ago

I think Github has an awesome layout.

Screenshot 2024-06-09 at 4 06 06 PM

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 commented 1 month ago

Feedback apreciated: image image image image

vitorpamplona commented 1 month ago

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 commented 1 month ago

I was using a box with outlined borders, but changed to an ElevatedCard and looks good. I submited a PR with this changes: https://github.com/vitorpamplona/amethyst/pull/923