Enhancement/modal

[henriquecbuss]

What issue does this PR close

Closes #618

Changes Proposed ( a list of new changes introduced by this PR)

• Fix overflowing issue with the "Add contact" modal
• Make the contact flag selection element and the user nav a lot more accessible
• Add a keyListener custom element. It's useful to listen for keys without the need for a subscription. It's very extensible, allowing us to listen to any event, such as keydown, keypress and keyup. It also allows for multiple (typed) keys to be listened to, and to stopPropagation. We use this element to listen for Escape on modals.
• Add a focusTrap custom element. It acts like a div, but won't let focus get outside of it. We should be careful when using it though

How to test ( a list of instructions on how to test this PR)

Testing modals:

1. Open up a modal
2. Press Tab a bunch of times. That should cycle the focus within the modal, but shouldn't focus elements outside of the modal. Do the same with Shift+Tab (to go in the opposite direction)
3. Make sure you can exit it by pressing Esc on your keyboard, clicking outside of it and by clicking on the "X" button on the top

Testing the contact flag selection:

1. Go to either the "Edit contact" page on your profile, or to the "Add contact" modal on the dashboard (it only shows up if you have no contact options)
2. Press Tab and notice how the select is only focused once. If you enter the select, you should see that pressing the up key or down key cycles through the options

[lucca65]

🦾

[juramos-2020]

Hello guys

Testing modals: - it's working 👌
Testing the contact flag selection: - it's working 👌

It was great 👌