1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-13 11:17:26 +02:00
unleash.unleash/frontend/src/component/common/CheckmarkBadge
Thomas Heartman 2f7beceb21
chore(unl-204): make toasts smaller (#8935)
This PR makes toasts smaller and less intrusive, and gives them a new
color scheme.

Changes include:
- new color scheme
- no description, only title
- new padding
- removes confetti code (even when rendered, they're invisible; UX also
says to cut it)
- use warning triangle for error messages 

I've also set a max height on the container and made it scrollable if
it's too tall to deal with super long messages.

I'll remove the description and confetti props in a separate PR to keep
this one cleaner.

Light mode:

![image](https://github.com/user-attachments/assets/05666259-bc40-4c87-8e51-9900bc67310e)

![image](https://github.com/user-attachments/assets/25dfca09-af5f-4a2a-8490-1169f6d8accb)


Dark mode:

![image](https://github.com/user-attachments/assets/8fa199aa-3cb5-47b4-acaa-1b0fcfd668eb)

![image](https://github.com/user-attachments/assets/eca7d26e-f695-43f9-b281-a64315544212)


With line break (min-width):

![image](https://github.com/user-attachments/assets/2ebd9117-a7c2-4a96-8b4b-c217ba12993b)

With line break (max-width):

![image](https://github.com/user-attachments/assets/8015c761-fc1e-4ff9-992d-a0e9ec27a4f9)

With very long message on phone in landscape mode:


![image](https://github.com/user-attachments/assets/7dc34d25-026c-46c3-9906-dc1348daf208)
2024-12-10 13:10:04 +00:00
..
CheckMarkBadge.tsx chore(unl-204): make toasts smaller (#8935) 2024-12-10 13:10:04 +00:00