feat: Enhance more beautiful valid text alerts by using modal

[Armakuji]

Related Issue or bug

Fixes: #26

Describe the changes you've made

• add valid text modal
• add some css

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)
• Code style update (formatting, local variables)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• My changes generate no new warnings.
• New and existing unit tests pass locally with my changes.
• Any dependent changes have been merged and published in downstream modules.

Screenshots

Original	Updated

[netlify]

✔️ Deploy Preview for bookslibraryreactjs ready!

🔨 Explore the source changes: 6566312

🔍 Inspect the deploy log: https://app.netlify.com/sites/bookslibraryreactjs/deploys/6159a9afd540b70008f1d42a

😎 Browse the preview: https://deploy-preview-28--bookslibraryreactjs.netlify.app/

[jatiinyadav]

1. When someone hovers on the cross, the cursor should be a pointer.
2. Do the styling changes in the style.scss file not in style.css.
3. Resolve the conflicts.

[Armakuji]

OK, Thanks for your review. I will fix that.

[Armakuji]

@jatiinyadav I fixed all the comments ✨. Please review again.

[jatiinyadav]

@Armakuji Thank you for your contribution. Looking forward to more such amazing contributions 🥂