Implement Global Toast Notification Component

[Ali-Sdg90]

We aim to integrate global toast notifications into our project to indicate various actions. We will use the default Bootstrap toast in three modes: success (green), error (red), and info (blue). These toasts should be positioned at the top-right corner of the page. The toast design should remain as close to the default Bootstrap toast as possible, avoiding any complex styling.

The toast notifications should automatically close after a specified duration. The toast component should be designed to accept variables for the toast mode and text, ensuring flexibility and avoiding hardcoding these values.

Additional Notes

• Ensure consistency with Bootstrap framework guidelines, as the project utilizes Bootstrap as its style framework.
• Avoid adjusting default Bootstrap values as much as possible.
• Ensure the style is responsive to adapt to various screen sizes.

Steps to Participate

1. Comment: Comment on this issue with your estimated timeframe for completing the task.
2. Review: The administrators will review your proposed timeline.
3. Assignment: If approved, the issue will be assigned to you.
4. Reward: Receive the issue reward upon completing the task within the agreed timeframe.

Contribution Guidelines

• Please refer to the Contribution Guidelines for detailed instructions on contributing to the project.

Deliverables

• The PR for this issue should be approved by @mehrandvd. He will announce his approval on this issue.

Reward

• The reward will be $5, which will be paid in $USDC (ERC20).

[mehrandvd]

@Ali-Sdg90 There isn't a need for a test page for it. As everything does exist in Bootstrap, this thing could be a part of a task for the "organizations page" and after a successful sync, it should show a toast. So a toast service will be created and tested there.

[Ali-Sdg90]

@mehrandvd Thanks, I have updated the issue.