feat: New dialog service (#1202)

* Add dialog provider boilerplate and improve provider imports

* Add react-draggable dependency

* Add dialog service boilerplate

* Refactor modal to use react-modal and remove dependency on modal themed styles

* Update cinedialog to use new dialog provider

* Add multiple dialogs and refactor provider (dialogs)

* Set app root (modal)

* Add modal zindex bigger than tooltip

* Block drag on buttons/svgs/paths/input and improve jsdoc

* Use guid util to generate dialog ids

* Explicit props in dialog provider

* Improve jsdocs

* Fix tests broken

* Fix boundaries calculation

* Remember last dialog position

* Update providers location

* Add scroll to modal

* Add toggable button toolbar and fix css modal

platform/ui/src/components/userPreferencesForm/HotKeysPreferences.styl

@@ -1,7 +1,5 @@
 .HotKeysPreferences
   display: flex;
-  margin-right: -15px;
-  margin-left: -15px;
 
   .column
     width: 50%;

platform/ui/src/components/userPreferencesForm/UserPreferences.js

@@ -90,8 +90,8 @@ export class UserPreferences extends Component {
 
   render() {
     return (
-      <div>
-        <div className="dialog-separator-after">
+      <div className="UserPreferences">
+        <div className="UserPreferences__selector">
           <ul className="nav nav-tabs">
             <li
               onClick={() => {

platform/ui/src/components/userPreferencesForm/UserPreferences.styl

@@ -3,23 +3,27 @@
 @import './../../design/styles/common/state.styl'
 @import './../../design/styles/common/global.styl'
 
-.modal-body
-  overflow: hidden
+.UserPreferences
+  display: flex
+  flex-direction: column
 
-.errorMessage
-  color: var(--state-error-text)
-  font-size: 10px
-  text-transform: uppercase;
+  &__selector
+    border-bottom: 3px solid black
 
-.form-content
-  border-bottom: 3px solid var(--primary-background-color)
-  margin-bottom: 20px
-  margin-left: -22px
-  margin-right: -22px
-  max-height: 70vh
-  overflow-y: auto
-  padding: 22px
-  min-height: 500px
+  .errorMessage
+    color: var(--state-error-text)
+    font-size: 10px
+    text-transform: uppercase;
 
-.popover
-  width: 300px
+  .form-content
+    border-bottom: 3px solid var(--primary-background-color)
+    margin-bottom: 20px
+    margin-left: -20px
+    margin-right: -20px
+    max-height: 70vh
+    overflow-y: auto
+    padding: 20px
+    min-height: 500px
+
+  .popover
+    width: 300px

platform/ui/src/components/userPreferencesForm/UserPreferencesForm.js

@@ -2,7 +2,7 @@ import './UserPreferencesForm.styl';
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from '../../utils/LanguageProvider';
+import { withTranslation } from '../../contextProviders';
 
 import cloneDeep from 'lodash.clonedeep';
 import isEqual from 'lodash.isequal';

platform/ui/src/components/userPreferencesForm/UserPreferencesForm.styl

@@ -16,7 +16,6 @@
   .footer
     display: flex
     flex-direction: row
-    padding-bottom: 20px
     justify-content: space-between
 
     div