feat: Modal + ViewportDownloadForm (#1799)

* feat: Modal + ViewportDownloadForm

* styles for image preview box

* modal update & close handler

* open modal for Learn More (search info)

* change modal default alignment

* Update platform/ui/src/components/InputNumber/InputNumber.mdx

* nuke inputNumber and use inputText with refactor

* make input more reusable

* revert inputText "number" stuff

* replace inputText to Input

* fix input spacing + label

* fix modal overlay classes

* fix inline styles

* fix onclick learn more

* fix close icon

* revert transition

* remove inline styles

* remove unecessary stuff

platform/ui/src/components/Modal/Modal.css

@@ -0,0 +1,3 @@
+.modal-content {
+  max-height: calc(100vh - theme('spacing.250px'));
+}

platform/ui/src/components/Modal/Modal.jsx

@@ -1,22 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactModal from 'react-modal';
-import classNames from 'classnames';
 
-const customStyle = {
-  overlay: {
-    zIndex: 1071,
-    backgroundColor: 'rgb(0, 0, 0, 0.5)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-};
+import './Modal.css';
+
+import { Typography, useModal, IconButton, Icon } from '@ohif/ui';
 
 ReactModal.setAppElement(document.getElementById('root'));
 
 const Modal = ({
-  className,
   closeButton,
   shouldCloseOnEsc,
   isOpen,
@@ -24,15 +16,27 @@ const Modal = ({
   onClose,
   children,
 }) => {
+  const { hide } = useModal();
+
+  const handleClose = () => {
+    hide();
+  };
+
   const renderHeader = () => {
     return (
       title && (
-        <header>
-          <h4>{title}</h4>
+        <header className="mb-6 pb-4 border-b border-secondary-main">
+          <Typography variant="h4">{title}</Typography>
           {closeButton && (
-            <button data-cy="close-button" onClick={onClose}>
-              ×
-            </button>
+            <IconButton
+              className="absolute top-0 right-0 focus:outline-none flex -mr-3 -mt-3"
+              data-cy="close-button"
+              color="primary"
+              onClick={onClose}
+              rounded="full"
+            >
+              <Icon name="close" className="text-white w-8 h-8" />
+            </IconButton>
           )}
         </header>
       )
@@ -41,22 +45,26 @@ const Modal = ({
 
   return (
     <ReactModal
-      className={classNames(className)}
+      className="relative py-6 w-11/12 lg:w-10/12 xl:w-1/2 max-h-full outline-none bg-primary-dark border border-secondary-main text-white rounded"
+      overlayClassName="fixed top-0 left-0 right-0 bottom-0 z-50 bg-overlay flex items-start justify-center py-16"
       shouldCloseOnEsc={shouldCloseOnEsc}
+      onRequestClose={handleClose}
       isOpen={isOpen}
       title={title}
-      style={customStyle}
     >
-      <>
-        {renderHeader()}
-        <section>{children}</section>
-      </>
+      <div className="px-6">{renderHeader()}</div>
+      <section className="ohif-scrollbar modal-content overflow-y-auto px-6">
+        {children}
+      </section>
     </ReactModal>
   );
 };
 
+Modal.defaultProps = {
+  shouldCloseOnEsc: true,
+};
+
 Modal.propTypes = {
-  className: PropTypes.string,
   closeButton: PropTypes.bool,
   shouldCloseOnEsc: PropTypes.bool,
   isOpen: PropTypes.bool,