Implement concept for modal windows

[barmac]

Summary of changes:

• Close button is now focusable.
• Close by background click is removed.
• Modal has a fixed width.
• Header, body and footer are now visibly separated.
• Modal keeps responsiveness for smaller screens.
• In case of content being higher than maximum height,
  modal body is scrollable.

Closes #1681
Closes #1575

[barmac]

Umm I missed the close icon hover/active style. Let me fix that.

[barmac]

@nikku @nazlikaya Ready for review

[nikku]

Some visual impressions:

[nikku]

Looks good from the feel perspective.

[nikku]

Added two minor fixes on top.

[philippfromme]

Looking goood! 👍

[barmac]

Noticed: missing X button for some modals

[barmac]

This needs to be clarified. Not sure what could be the meaning of X button in case of privacy preferences.

[nikku]

This needs to be clarified. Not sure what could be the meaning of X button in case of privacy preferences.

This is by design. The user may not close the dialog via ESC or close button. Instead, she has to explicitly confirm what is written there (provide consent).

[barmac]

This needs to be clarified. Not sure what could be the meaning of X button in case of privacy preferences.

This is by design. The user may not close the dialog via ESC or close button. Instead, she has to explicitly confirm what is written there (provide consent).

Exactly.

[nazlikaya]

Enter needs to trigger the Primary button, only if the primary button is on focus. Other than that 👍

[barmac]

Enter needs to trigger the Primary button, only if the primary button is on focus.

That's how it works right now, right?

[barmac]

I added X button for Privacy Preferences when they are already saved somehow (so not for the first startup modal).

[nikku]

🍰