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

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

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 variant="body" className="my-4 leading-relaxed">
-          {text}
-        </Typography>
-      </div>
+      <Typography
+        variant="inherit"
+        color="initial"
+        className="text-[14px] !leading-[1.2]"
+      >
+        {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 spacing = 'p-6';
-  const theme = 'bg-primary-dark';
+  const padding = 'pt-[20px]';
 
   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 spacing = 'p-4';
+  const padding = 'pb-[20px]';
 
   return (
-    <div className={classNames(theme, flex, border, spacing)}>
-      <Typography variant="h6" color="primaryActive">
+    <div className={classNames(theme, flex, padding)}>
+      <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"
-            className="flex grow text-primary-light font-light"
+            variant="h6"
+            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"
-          className="flex grow text-primary-light font-light pb-2"
+          variant="inherit"
+          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} />