#6 [FE] - Create reusable Modal component

[janevalencia]

Description

Not using any library, building the reusable Modal component for the project from scratch with our custom-styling.

• [ ] FontAwesome for icons (should already be installed - optional use).
• [x] Added transparent-background styling.
• [x] Built Modal component.
• [x] Modal component should be flexible in accepting title.
• [x] Modal component should be flexible in accepting content.
• [x] Modal component should be flexible in accepting confirm action button. For example: for this project the modal will be used upon confirming deletion of a comment, thus, the confirm-button should display "Yes, Delete".
• [x] Modal component added to the CommentCard component, but should stay flexible and reusable anywhere else.
• [x] Modal component is following the design guideline.

Testing Instruction

✅ Clicking the transparent-bg of Modal will auto-close it ✅ Cancel button will close the Modal ✅ (Temporary) Yes, Delete button will print on console 'comment deleted' => the callback func is working, only need to implement the [BE] further ✅ Comment DELETE CTA is opening up the Modal

Modal component [Screenshot]

[janevalencia]

Update: After carefully checking the design-guideline of this project, I have decided not to use any icons for the modal-cta buttons.