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/content/aboutContent/AboutContent.js

@@ -58,7 +58,7 @@ const AboutContent = () => {
   );
 
   return (
-    <div data-cy="about-modal">
+    <div className="AboutContent" data-cy="about-modal">
       <div className="btn-group">
         <a
           className="btn btn-default"

platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.js

@@ -189,7 +189,7 @@ const ViewportDownloadForm = ({
   };
 
   return (
-    <>
+    <div className="ViewportDownloadForm">
       <div className="title">
         {t(
           'Please specify the dimensions, filename, and desired type for the output image.'
@@ -284,10 +284,6 @@ const ViewportDownloadForm = ({
           className="viewport-preview"
           src={viewportPreview.src}
           alt="Viewport Preview"
-          style={{
-            height: viewportPreview.height,
-            width: viewportPreview.width,
-          }}
         />
       </div>
 
@@ -303,7 +299,7 @@ const ViewportDownloadForm = ({
           </button>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.styl

@@ -3,15 +3,13 @@
 @import '../../../design/styles/common/button.styl'
 
 .ViewportDownloadForm
-  color: var(--text-secondary-color);
-  filter: drop-shadow(0 0 3px var(--ui-gray-darkest));
-  border: none;
-  border-radius: 8px;
-  width: inherit;
-  padding: 15px;
-  background: transparent;
+  display: flex;
+  flex-direction: column;
   z-index: 1080 !important;
 
+  input, select
+    max-height: 30px;
+
   .title
     margin: 0;
     font-weight: bold;
@@ -67,6 +65,7 @@
     padding: 10px;
     border-radius: 5px;
     align-self: center;
+    margin-bottom: 20px;
     @media screen and (max-width: 1023px)
       width: 100%;
       justify-content: center;
@@ -90,7 +89,6 @@
 
   .actions
     display: flex;
-    height: 60px;
     flex-wrap: nowrap;
     justify-content: flex-end;
     align-items: center;