Improve the structure of the modal

[kuv2707]

Description

The modal component in library directory was supposed to be as reusable as possible, but ended up catering to a particular use case. In other places where modals were needed, we made duplicate modals tailored to that use case only. All these modals have some common features which can be extracted into one actually reusable and configurable modal component.

• Clicking on the blurred area closes the modal.
• The styles of all the modal containers are the same.
• Some modals need buttons, others don't.
• The ESC key closes the modal (tracked separately)

Lets start with these for now. We should have a ModalContainer library component which accepts the following as props:

• The modal content
• An array of buttons to be displayed at the bottom.

We should have a context for the modal in the same way we have for toasts.

We should be able to use it like this:

function HomePage(){
const modal = useModal(<div>Hi there</div>,[<Button/>]);
return <div onClick={()=>modal.show()}></div>
}

Any action (click etc) on the buttons passed to the modal will close the modal.

Notes

• Following the commit adding the modal context, refactor all the existing modals to use the newly created modal system.
• We currently have modals for:
  • Asking join game code.
  • Rules
  • About us

[issue-assigner[bot]]

Comment '@csoc-bot claim' to get this issue assigned or '@csoc-bot abandon' to get this issue unassigned.

[ritwik-69]

@csoc-bot claim

[issue-assigner[bot]]

@ritwik-69 This issue has been successfully assigned to you! 🚀

[realnilesh]

@csoc-bot claim

[issue-assigner[bot]]

@realnilesh Sorry, maximum limit for assignees in this issue has reached. Please check other issues or contact a maintainer.