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

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

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} />