Alerts in-app

[borjaMarti]

Description

This PR displays alert messages from adding items or sharing a list in-app, instead of with the browser's native alert() function.

Related Issue

closes #73

Acceptance Criteria

• When sharing the list with another user, all messages are displayed below the component, instead of in an alert message.
• When adding an item, the confirmation message is desplayed below the component, instead of in an alert message.

Type of Changes

	Type
✓	✨ New feature
✓	🎨 Enhancement

Updates

Before

After

Testing Steps / QA Criteria

• git pull
• git checkout alert-messages
• Add items and share a list, observe resulting message.

[github-actions]

Visit the preview URL for this PR (updated for commit 09c1a64):

https://tcl-71-smart-shopping-list--pr74-alert-messages-hjj39zxe.web.app

_{(expires Thu, 11 Apr 2024 09:35:44 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1e7ade9d0f374c4ddb5d7ab6fc541062fc7a1ab4}

[vivitt]

Thanks Borja, the changes look nice!

The only thing I would suggest is to add a fixed height to the section elements (I tested with h-60 and seemed to work fine) in ManageList.jsx, to avoid the layout shifting when showing/not showing messages.

[BikeMouse]

Thank you! This is so much better!

[borjaMarti]

Thanks Borja, the changes look nice!

The only thing I would suggest is to add a fixed height to the section elements (I tested with h-60 and seemed to work fine) in ManageList.jsx, to avoid the layout shifting when showing/not showing messages.

Hey @vivitt! I played with it a bit and arrived at something that prevents layout shift (most of the time, if the item name is too long it will cause the element to take up multiple lines, so that's an edge case) while not creating too much blank space. Tell me what you think if you check it out!

[ocsiddisco]

Thank you for adding this update!

[elitcenk]

Thanks