fix(modal and dialogues): fixes as per specifications (#3438)

Co-authored-by: Alireza <ar.sedghi@gmail.com>

extensions/cornerstone-dicom-seg/src/panels/callInputDialog.tsx

@@ -24,7 +24,7 @@ function callInputDialog(uiDialogService, label, callback) {
       showOverlay: true,
       content: Dialog,
       contentProps: {
-        title: 'Enter Segment Label',
+        title: 'Segment',
         value: { label },
         noCloseButton: true,
         onClose: () => uiDialogService.dismiss({ id: dialogId }),
@@ -35,24 +35,23 @@ function callInputDialog(uiDialogService, label, callback) {
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {
           return (
-            <div className="p-4 bg-primary-dark">
+            <Input
-              <Input
+              label="Enter the segment label"
-                autoFocus
+              labelClassName="text-white text-[14px] leading-[1.2]"
-                className="mt-2 bg-black border-primary-main"
+              autoFocus
-                type="text"
+              className="bg-black border-primary-main"
-                containerClassName="mr-2"
+              type="text"
-                value={value.label}
+              value={value.label}
-                onChange={event => {
+              onChange={event => {
-                  event.persist();
+                event.persist();
-                  setValue(value => ({ ...value, label: event.target.value }));
+                setValue(value => ({ ...value, label: event.target.value }));
-                }}
+              }}
-                onKeyPress={event => {
+              onKeyPress={event => {
-                  if (event.key === 'Enter') {
+                if (event.key === 'Enter') {
-                    onSubmitHandler({ value, action: { id: 'save' } });
+                  onSubmitHandler({ value, action: { id: 'save' } });
-                  }
+                }
-                }}
+              }}
-              />
+            />
-            </div>
           );
         },
       },

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx

@@ -97,7 +97,7 @@ const DicomUploadProgressItem = memo(
               )}
               <div className="flex cursor-pointer ml-auto">
                 <Icon
-                  className="w-6 h-6 self-center text-primary-active"
+                  className="self-center text-primary-active"
                   name="close"
                   onClick={cancelUpload}
                 />

extensions/cornerstone/src/utils/callInputDialog.tsx

@@ -27,8 +27,8 @@ function callInputDialog(
       : data.label
     : '';
   const {
-    dialogTitle = 'Enter your annotation',
+    dialogTitle = 'Annotation',
-    inputLabel = '',
+    inputLabel = 'Enter your annotation',
     validateFunc = value => true,
   } = dialogConfig;
 
@@ -66,27 +66,24 @@ function callInputDialog(
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {
           return (
-            <div className="p-4 bg-primary-dark">
+            <Input
-              <Input
+              autoFocus
-                autoFocus
+              className="bg-black border-primary-main"
-                className="mt-2 bg-black border-primary-main"
+              type="text"
-                type="text"
+              id="annotation"
-                id="annotation"
+              label={inputLabel}
-                containerClassName="mr-2"
+              labelClassName="text-white text-[14px] leading-[1.2]"
-                label={inputLabel}
+              value={value.label}
-                labelClassName="text-primary-light"
+              onChange={event => {
-                value={value.label}
+                event.persist();
-                onChange={event => {
+                setValue(value => ({ ...value, label: event.target.value }));
-                  event.persist();
+              }}
-                  setValue(value => ({ ...value, label: event.target.value }));
+              onKeyPress={event => {
-                }}
+                if (event.key === 'Enter') {
-                onKeyPress={event => {
+                  onSubmitHandler({ value, action: { id: 'save' } });
-                  if (event.key === 'Enter') {
+                }
-                    onSubmitHandler({ value, action: { id: 'save' } });
+              }}
-                  }
+            />
-                }}
-              />
-            </div>
           );
         },
       },

extensions/default/src/Panels/PanelMeasurementTable.tsx

@@ -160,7 +160,7 @@ export default function PanelMeasurementTable({
       showOverlay: true,
       content: Dialog,
       contentProps: {
-        title: 'Enter your annotation',
+        title: 'Annotation',
         noCloseButton: true,
         value: { label: measurement.label || '' },
         body: ({ value, setValue }) => {
@@ -175,18 +175,17 @@ export default function PanelMeasurementTable({
             }
           };
           return (
-            <div className="p-4 bg-primary-dark">
+            <Input
-              <Input
+              label="Enter your annotation"
-                autoFocus
+              labelClassName="text-white text-[14px] leading-[1.2]"
-                id="annotation"
+              autoFocus
-                className="mt-2 bg-black border-primary-main"
+              id="annotation"
-                type="text"
+              className="bg-black border-primary-main"
-                containerClassName="mr-2"
+              type="text"
-                value={value.label}
+              value={value.label}
-                onChange={onChangeHandler}
+              onChange={onChangeHandler}
-                onKeyPress={onKeyPressHandler}
+              onKeyPress={onKeyPressHandler}
-              />
+            />
-            </div>
           );
         },
         actions: [

extensions/default/src/Panels/createReportDialogPrompt.tsx

@@ -11,7 +11,7 @@ export default function createReportDialogPrompt(
   uiDialogService,
   { extensionManager }
 ) {
-  return new Promise(function (resolve, reject) {
+  return new Promise(function(resolve, reject) {
     let dialogId = undefined;
 
     const _handleClose = () => {
@@ -73,7 +73,7 @@ export default function createReportDialogPrompt(
       useLastPosition: false,
       showOverlay: true,
       contentProps: {
-        title: 'Provide a name for your report',
+        title: 'Create Report',
         value: {
           label: '',
           dataSourceName: extensionManager.activeDataSource,
@@ -102,38 +102,34 @@ export default function createReportDialogPrompt(
           };
           return (
             <>
-              <div className="p-4 bg-primary-dark">
+              {dataSourcesOpts.length > 1 && (
-                {dataSourcesOpts.length > 1 && (
+                <Select
-                  <Select
+                  closeMenuOnSelect={true}
-                    closeMenuOnSelect={true}
+                  className="mr-2 bg-black border-primary-main"
-                    className="mr-2 bg-black border-primary-main"
+                  options={dataSourcesOpts}
-                    options={dataSourcesOpts}
+                  placeholder={
-                    placeholder={
+                    dataSourcesOpts.find(
-                      dataSourcesOpts.find(
+                      option => option.value === value.dataSourceName
-                        option => option.value === value.dataSourceName
+                    ).placeHolder
-                      ).placeHolder
+                  }
-                    }
+                  value={value.dataSourceName}
-                    value={value.dataSourceName}
+                  onChange={evt => {
-                    onChange={evt => {
+                    setValue(v => ({ ...v, dataSourceName: evt.value }));
-                      setValue(v => ({ ...v, dataSourceName: evt.value }));
+                  }}
-                    }}
+                  isClearable={false}
-                    isClearable={false}
-                  />
-                )}
-              </div>
-              <div className="p-4 bg-primary-dark">
-                <Input
-                  autoFocus
-                  className="mt-2 bg-black border-primary-main"
-                  type="text"
-                  placeholder="Enter Report Name"
-                  containerClassName="mr-2"
-                  value={value.label}
-                  onChange={onChangeHandler}
-                  onKeyPress={onKeyPressHandler}
-                  required
                 />
-              </div>
+              )}
+              <Input
+                autoFocus
+                label="Enter the report name"
+                labelClassName="text-white text-[14px] leading-[1.2]"
+                className="bg-black border-primary-main"
+                type="text"
+                value={value.label}
+                onChange={onChangeHandler}
+                onKeyPress={onKeyPressHandler}
+                required
+              />
             </>
           );
         },

extensions/dicom-microscopy/src/getCommandsModule.ts

@@ -31,7 +31,6 @@ export default function getCommandsModule({
 
       callInputDialog({
         uiDialogService,
-        title: 'Enter your annotation',
         defaultValue: '',
         callback: (value: string, action: string) => {
           switch (action) {

extensions/dicom-microscopy/src/utils/callInputDialog.tsx

@@ -12,7 +12,7 @@ import { Input, Dialog } from '@ohif/ui';
  */
 export default function callInputDialog({
   uiDialogService,
-  title = 'Enter your annotation',
+  title = 'Annotation',
   defaultValue = '',
   callback = (value: string, action: string) => {}
 }) {
@@ -49,24 +49,23 @@ export default function callInputDialog({
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {
           return (
-            <div className="p-4 bg-primary-dark">
+            <Input
-              <Input
+              label="Enter your annotation"
-                autoFocus
+              labelClassName="text-white text-[14px] leading-[1.2]"
-                className="mt-2 bg-black border-primary-main"
+              autoFocus
-                type="text"
+              className="bg-black border-primary-main"
-                containerClassName="mr-2"
+              type="text"
-                value={value.defaultValue}
+              value={value.defaultValue}
-                onChange={event => {
+              onChange={event => {
-                  event.persist();
+                event.persist();
-                  setValue(value => ({ ...value, value: event.target.value }));
+                setValue(value => ({ ...value, value: event.target.value }));
-                }}
+              }}
-                onKeyPress={event => {
+              onKeyPress={event => {
-                  if (event.key === 'Enter') {
+                if (event.key === 'Enter') {
-                    onSubmitHandler({ value, action: { id: 'save' } });
+                  onSubmitHandler({ value, action: { id: 'save' } });
-                  }
+                }
-                }}
+              }}
-              />
+            />
-            </div>
           );
         },
       },

extensions/measurement-tracking/src/_shared/createReportDialogPrompt.tsx

@@ -38,7 +38,7 @@ export default function createReportDialogPrompt(uiDialogService) {
       useLastPosition: false,
       showOverlay: true,
       contentProps: {
-        title: 'Provide a name for your report',
+        title: 'Create Report',
         value: { label: '' },
         noCloseButton: true,
         onClose: _handleClose,
@@ -60,12 +60,13 @@ export default function createReportDialogPrompt(uiDialogService) {
             }
           };
           return (
-            <div className="p-4 bg-primary-dark">
+            <div className="">
               <Input
+                label="Enter the report name"
+                labelClassName="text-white grow leading-[1.2] text-[14px]"
                 autoFocus
-                className="mt-2 bg-black border-primary-main"
+                className="bg-black border-primary-main grow"
                 type="text"
-                containerClassName="mr-2"
                 value={value.label}
                 onChange={onChangeHandler}
                 onKeyPress={onKeyPressHandler}

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx

@@ -188,7 +188,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
       showOverlay: true,
       content: Dialog,
       contentProps: {
-        title: 'Enter your annotation',
+        title: 'Annotation',
         noCloseButton: true,
         value: { label: measurement.label || '' },
         body: ({ value, setValue }) => {
@@ -203,18 +203,17 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
             }
           };
           return (
-            <div className="p-4 bg-primary-dark">
+            <Input
-              <Input
+              label="Enter your annotation"
-                autoFocus
+              labelClassName="text-white grow text-[14px] leading-[1.2]"
-                id="annotation"
+              autoFocus
-                className="mt-2 bg-black border-primary-main"
+              id="annotation"
-                type="text"
+              className="bg-black border-primary-main"
-                containerClassName="mr-2"
+              type="text"
-                value={value.label}
+              value={value.label}
-                onChange={onChangeHandler}
+              onChange={onChangeHandler}
-                onKeyPress={onKeyPressHandler}
+              onKeyPress={onKeyPressHandler}
-              />
+            />
-            </div>
           );
         },
         actions: [

platform/app/public/config/local_orthanc.js

@@ -33,7 +33,7 @@ window.config = {
         supportsWildcard: true,
         dicomUploadEnabled: true,
         bulkDataURI: {
-          enabled: false,
+          enabled: true,
         },
       },
     },

platform/docs/docs/deployment/docker.md

@@ -43,3 +43,11 @@ The Dockerfile and entry point use the `${PORT}` environment variable as the por
 ```sh
 docker run -d -e PORT=8080 -p 3000:8080/tcp --name ohif-viewer-container ohif-viewer-image
 ```
+
+### Configuring the OHIF config file
+
+The OHIF [config file](../configuration/configurationFiles.md) to use can be specified by mounting it as a volume for the Docker container using the `-v` flag. If the OHIF config file is on the local file system then it can be specified as below. Note that depending on the version of Docker, an absolute path to the config file might be required.
+
+```sh
+docker run -d -p 3000:80/tcp -v /path/to/config/file.js:/usr/share/nginx/html/app-config.js --name ohif-viewer-container ohif-viewer-image
+```

platform/ui/src/assets/icons/close.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19">
-    <g fill="currentColor" fill-rule="evenodd">
-        <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
-            <path d="M.188.187L8.813 8.812M8.813.187L.188 8.812" transform="translate(5 5)"/>
-        </g>
-    </g>
-</svg>

platform/ui/src/assets/icons/closeIcon.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 1.05 10.95 0 6 4.95 1.05 0 0 1.05 4.95 6 0 10.95 1.05 12 6 7.05 10.95 12 12 10.95 7.05 6z" fill="currentColor" fill-rule="evenodd"/>
+</svg>

platform/ui/src/components/AboutModal/AboutModal.tsx

@@ -49,7 +49,11 @@ const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
 
   const renderRowTitle = title => (
     <div className="pb-3 mb-3 border-b-2 border-black">
-      <Typography variant="h6" className="text-primary-light">
+      <Typography
+        variant="inherit"
+        color="primaryLight"
+        className="text-[16px] font-semibold !leading-[1.2]"
+      >
         {title}
       </Typography>
     </div>

platform/ui/src/components/Dialog/Body.tsx

@@ -8,11 +8,13 @@ const Body = ({ text, className }) => {
   const theme = 'bg-primary-dark';
   return (
     <div className={classNames('relative flex-auto', theme, className)}>
-      <div className="p-6">
+      <Typography
-        <Typography variant="body" className="my-4 leading-relaxed">
+        variant="inherit"
-          {text}
+        color="initial"
-        </Typography>
+        className="text-[14px] !leading-[1.2]"
-      </div>
+      >
+        {text}
+      </Typography>
     </div>
   );
 };

platform/ui/src/components/Dialog/Dialog.tsx

@@ -22,12 +22,13 @@ const Dialog = ({
 }) => {
   const [value, setValue] = useState(defaultValue);
 
-  const theme = 'bg-secondary-light';
+  const theme = 'bg-primary-dark';
   const flex = 'flex flex-col';
-  const border = 'border-0 rounded-lg drop-shadow-lg';
+  const border = 'border-0 rounded';
   const outline = 'outline-none focus:outline-none';
   const position = 'relative';
   const width = 'w-full';
+  const padding = 'px-[20px] pb-[20px] pt-[13px]';
 
   useEffect(() => {
     if (onShow) {
@@ -36,7 +37,17 @@ const Dialog = ({
   }, [onShow]);
 
   return (
-    <div className={classNames(theme, flex, border, outline, position, width)}>
+    <div
+      className={classNames(
+        theme,
+        flex,
+        border,
+        outline,
+        position,
+        width,
+        padding
+      )}
+    >
       <HeaderComponent
         title={title}
         noCloseButton={noCloseButton}

platform/ui/src/components/Dialog/Footer.tsx

@@ -6,12 +6,10 @@ import { Button } from '..';
 
 const Footer = ({ actions, className, onSubmit, value }) => {
   const flex = 'flex items-center justify-end';
-  const border = 'border-t-2 border-solid border-black rounded-b';
+  const padding = 'pt-[20px]';
-  const spacing = 'p-6';
-  const theme = 'bg-primary-dark';
 
   return (
-    <div className={classNames(flex, border, spacing, theme, className)}>
+    <div className={classNames(flex, padding, className)}>
       {actions.map((action, index) => {
         const isFirst = index === 0;
         const isPrimary = action.type === 'primary';

platform/ui/src/components/Dialog/Header.tsx

@@ -10,7 +10,7 @@ const CloseButton = ({ onClick }) => {
       data-cy="close-button"
       onClick={onClick}
       name="close"
-      className="cursor-pointer text-primary-active w-6 h-6"
+      className="cursor-pointer text-primary-active"
     />
   );
 };
@@ -20,14 +20,13 @@ CloseButton.propTypes = {
 };
 
 const Header = ({ title, noCloseButton, onClose }) => {
-  const theme = 'bg-secondary-main';
+  const theme = 'bg-primary-dark';
   const flex = 'flex items-center justify-between';
-  const border = 'border-b-2 border-solid border-black rounded-t';
+  const padding = 'pb-[20px]';
-  const spacing = 'p-4';
 
   return (
-    <div className={classNames(theme, flex, border, spacing)}>
+    <div className={classNames(theme, flex, padding)}>
-      <Typography variant="h6" color="primaryActive">
+      <Typography variant="h6" color="primaryLight" className="!leading-[1.2]">
         {title}
       </Typography>
       {!noCloseButton && <CloseButton onClick={onClose} />}

platform/ui/src/components/Icon/getIcon.js

@@ -8,7 +8,7 @@ import arrowRightSmall from './../../assets/icons/arrow-right-small.svg';
 import calendar from './../../assets/icons/calendar.svg';
 import cancel from './../../assets/icons/cancel.svg';
 import clipboard from './../../assets/icons/clipboard.svg';
-import close from './../../assets/icons/close.svg';
+import close from './../../assets/icons/closeIcon.svg';
 import dottedCircle from './../../assets/icons/dotted-circle.svg';
 import circledCheckmark from './../../assets/icons/circled-checkmark.svg';
 import chevronDown from './../../assets/icons/chevron-down.svg';

platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx

@@ -62,7 +62,7 @@ const LegacyCinePlayer = ({
         className="mr-3 border rounded-full text-primary-active border-primary-active"
         onClick={onClose}
       >
-        <Icon name="close" width="15px" height="15px" />
+        <Icon name="close" />
       </IconButton>
     </div>
   );

platform/ui/src/components/Modal/Modal.tsx

@@ -29,10 +29,11 @@ const Modal = ({
   const renderHeader = () => {
     return (
       title && (
-        <header className="flex items-center p-4 border-b-2 border-black bg-secondary-dark rounded-tl rounded-tr">
+        <header className="flex items-center px-[20px] py-[13px] bg-primary-dark rounded-tl rounded-tr">
           <Typography
-            variant="h4"
+            variant="h6"
-            className="flex grow text-primary-light font-light"
+            color="primaryLight"
+            className="flex grow !leading-[1.2]"
             data-cy="modal-header"
           >
             {title}
@@ -41,7 +42,7 @@ const Modal = ({
             <Icon
               onClick={onClose}
               name="close"
-              className="cursor-pointer text-primary-active w-6 h-6"
+              className="cursor-pointer text-primary-active"
             />
           )}
         </header>
@@ -60,7 +61,7 @@ const Modal = ({
       shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
     >
       {renderHeader()}
-      <section className="ohif-scrollbar modal-content overflow-y-auto px-4 py-6 rounded-bl rounded-br bg-primary-dark">
+      <section className="ohif-scrollbar modal-content overflow-y-auto px-[20px] pt-2 pb-[20px] rounded-bl rounded-br bg-primary-dark">
         {children}
       </section>
     </ReactModal>

platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx

@@ -66,7 +66,7 @@ const SegmentItem = ({
         {isSegmentIndexHovering && showSegmentDelete ? (
           <Icon
             name="close"
-            className={classnames('w-5 h-5 pr-2')}
+            className={classnames('pr-0.5')}
             onClick={e => {
               e.stopPropagation();
               onDelete(segmentationId, segmentIndex);

platform/ui/src/components/SegmentationTable/SegmentationItem.tsx

@@ -55,7 +55,7 @@ const SegmentationItem = ({
           <Icon
             name="close"
             className={classnames(
-              'w-5 transition duration-500 text-center hover:opacity-80',
+              'w-[10px] transition duration-500 text-center hover:opacity-80',
               {
                 'bg-primary-light text-black': isActive,
                 'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,

platform/ui/src/components/Snackbar/SnackbarItem.tsx

@@ -56,7 +56,7 @@ const SnackbarItem = ({ options, onClose }) => {
           onClick={handleClose}
           className="w-5 h-5 rounded-full flex items-center justify-center self-start ml-auto relative left-[3px] top-[-3px] text-[#0944b3]"
         >
-          <Icon name="close" className="w-5 h-5 text-black" />
+          <Icon name="close" className="text-black" />
         </div>
       </div>
     </div>

platform/ui/src/components/Typography/Typography.tsx

@@ -46,6 +46,7 @@ const classes = {
     inherit: 'text-inherit',
     primary: 'text-primary-main',
     primaryActive: 'text-primary-active',
+    primaryLight: 'text-primary-light',
     secondary: 'text-common-light',
     error: 'text-red-600',
   },
@@ -133,7 +134,7 @@ Typography.propTypes = {
     'primaryActive',
     'secondary',
     'error',
-    'primaryActive',
+    'primaryLight',
   ]),
   className: PropTypes.string,
   children: PropTypes.node,

platform/ui/src/components/UserPreferences/UserPreferences.tsx

@@ -63,8 +63,9 @@ const UserPreferences = ({
     <>
       <div className="border-b-2 border-black mb-2">
         <Typography
-          variant="h5"
+          variant="inherit"
-          className="flex grow text-primary-light font-light pb-2"
+          color="primaryLight"
+          className="flex text-[16px] font-semibold pb-2 !leading-[1.2]"
         >
           {title}
         </Typography>
@@ -74,7 +75,7 @@ const UserPreferences = ({
   );
 
   return (
-    <div className="p-2">
+    <>
       <Section title={t('General')}>
         <div className="flex flex-row justify-center items-center w-72">
           <Typography variant="subtitle" className="mr-5 text-right h-full">
@@ -122,7 +123,7 @@ const UserPreferences = ({
           </Button>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

platform/ui/src/contextProviders/DialogProvider.tsx

@@ -219,7 +219,7 @@ const DialogProvider = ({ children, service }) => {
               isDragging && 'dragging',
               isDraggable && 'draggable'
             )}
-            style={{ zIndex: '999', position: 'absolute' }}
+            style={{ zIndex: '999', position: 'absolute', width: '350px' }}
             onClick={() => _bringToFront(id)}
           >
             <DialogContent {...dialog} {...contentProps} />