fix(DicomUpload): Switch to use ui-next components and colors (#5576)

* Replaced legacy Button

* Updated Dialog width

* Restore text and spacing fixes

* Updated drop zone styling

* Migrated to ui-next colors

extensions/cornerstone/src/components/DicomUpload/DicomUpload.css

@@ -1,23 +0,0 @@
-.dicom-upload-drop-area-border-dash {
-  background-image: repeating-linear-gradient(
-      to right,
-      #7bb2ce 0%,
-      #7bb2ce 50%,
-      transparent 50%,
-      transparent 100%
-    ),
-    repeating-linear-gradient(to right, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%),
-    repeating-linear-gradient(to bottom, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%),
-    repeating-linear-gradient(to bottom, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%);
-  background-position:
-    left top,
-    left bottom,
-    left top,
-    right top;
-  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
-  background-size:
-    20px 3px,
-    20px 3px,
-    3px 20px,
-    3px 20px;
-}

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

@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import DicomFileUploader from '../../utils/DicomFileUploader';
 import DicomUploadProgress from './DicomUploadProgress';
-import { Button, ButtonEnums } from '@ohif/ui';
+import { Button } from '@ohif/ui-next';
-import './DicomUpload.css';
+// Removed dashed border CSS; using simple 1px solid border with muted foreground color
 
 type DicomUploadProps = {
   dataSource;
@@ -15,7 +15,8 @@ type DicomUploadProps = {
 };
 
 function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): ReactElement {
-  const baseClassNames = 'min-h-[480px] flex flex-col bg-black select-none';
+  const baseClassNames =
+    'min-h-[375px] flex flex-col bg-black select-none rounded-lg overflow-hidden';
   const [dicomFileUploaderArr, setDicomFileUploaderArr] = useState([]);
 
   const onDrop = useCallback(async acceptedFiles => {
@@ -34,9 +35,10 @@ function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): R
         {({ getRootProps }) => (
           <div
             {...getRootProps()}
-            className="dicom-upload-drop-area-border-dash m-5 flex h-full flex-col items-center justify-center"
+            className="m-5 flex h-full flex-col items-center justify-center rounded-2xl border"
+            style={{ borderColor: 'hsl(var(--muted-foreground) / 0.25)' }}
           >
-            <div className="flex gap-3">
+            <div className="flex gap-2">
               <Dropzone
                 onDrop={onDrop}
                 noDrag
@@ -44,11 +46,16 @@ function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): R
                 {({ getRootProps, getInputProps }) => (
                   <div {...getRootProps()}>
                     <Button
+                      variant="default"
+                      size="lg"
                       disabled={false}
                       onClick={() => {}}
                     >
                       {'Add files'}
-                      <input {...getInputProps()} />
+                      <input
+                        {...getInputProps()}
+                        style={{ display: 'none' }}
+                      />
                     </Button>
                   </div>
                 )}
@@ -60,7 +67,8 @@ function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): R
                 {({ getRootProps, getInputProps }) => (
                   <div {...getRootProps()}>
                     <Button
-                      type={ButtonEnums.type.secondary}
+                      variant="secondary"
+                      size="lg"
                       disabled={false}
                       onClick={() => {}}
                     >
@@ -69,14 +77,15 @@ function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): R
                         {...getInputProps()}
                         webkitdirectory="true"
                         mozdirectory="true"
+                        style={{ display: 'none' }}
                       />
                     </Button>
                   </div>
                 )}
               </Dropzone>
             </div>
-            <div className="pt-5">or drag images or folders here</div>
+            <div className="text-foreground pt-6 text-base">or drag images or folders here</div>
-            <div className="text-aqua-pale pt-3 text-lg">(DICOM files supported)</div>
+            <div className="text-muted-foreground pt-1 text-base">(DICOM files supported)</div>
           </div>
         )}
       </Dropzone>

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import { useSystem } from '@ohif/core';
-import { Button } from '@ohif/ui';
+import { Button } from '@ohif/ui-next';
 import { Icons } from '@ohif/ui-next';
 import DicomFileUploader, {
   EVENTS,
@@ -276,7 +276,7 @@ function DicomUploadProgress({
 
   const getNumCompletedAndTimeRemainingComponent = (): ReactElement => {
     return (
-      <div className="bg-primary-dark flex h-14 items-center px-1 pb-4 text-lg text-white">
+      <div className="bg-muted flex h-14 items-center px-1 pb-4 text-lg text-white">
         {numFilesCompleted === dicomFileUploaderArr.length ? (
           <>
             <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{`${dicomFileUploaderArr.length} ${
@@ -308,7 +308,7 @@ function DicomUploadProgress({
 
             <span
               className={
-                'text-primary hover:text-primary-lightactive:text-aqua-pale ml-auto cursor-pointer whitespace-nowrap'
+                'text-primary hover:text-highlight active:text-muted-foreground ml-auto cursor-pointer whitespace-nowrap'
               }
               onClick={cancelAllUploads}
             >
@@ -337,11 +337,11 @@ function DicomUploadProgress({
 
   const getPercentCompleteComponent = (): ReactElement => {
     return (
-      <div className="ohif-scrollbar border-secondary-light overflow-y-scroll border-b px-2">
+      <div className="ohif-scrollbar border-input overflow-y-scroll border-b px-2">
         <div className="min-h-14 flex w-full items-center p-2.5">
           {numFilesCompleted === dicomFileUploaderArr.length ? (
             <>
-              <div className="text-primary-light text-xl">
+              <div className="text-highlight text-xl">
                 {numFails > 0
                   ? `Completed with ${numFails} ${numFails > 1 ? 'errors' : 'error'}!`
                   : 'Completed!'}
@@ -359,7 +359,7 @@ function DicomUploadProgress({
                 ></ProgressLoadingBar>
               </div>
               <div className="ml-1 flex w-24 items-center">
-                <div className="w-10 text-right text-foreground">{`${getPercentCompleteRounded()}%`}</div>
+                <div className="text-foreground w-10 text-right">{`${getPercentCompleteRounded()}%`}</div>
                 {getShowFailedOnlyIconComponent()}
               </div>
             </>

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

@@ -56,7 +56,7 @@ const DicomUploadProgressItem = memo(
           return (
             <Icons.ByName
               name="status-tracked"
-              className="text-primary-light"
+              className="text-highlight"
             />
           );
         case UploadStatus.InProgress:
@@ -71,7 +71,7 @@ const DicomUploadProgressItem = memo(
     };
 
     return (
-      <div className="min-h-14 border-secondary-light flex w-full items-center overflow-hidden border-b p-2.5 text-lg">
+      <div className="min-h-14 border-input flex w-full items-center overflow-hidden border-b p-2.5 text-lg">
         <div className="self-top flex w-0 shrink grow flex-col gap-1">
           <div className="flex gap-4">
             <div className="flex w-6 shrink-0 items-center justify-center">{getStatusIcon()}</div>

extensions/cornerstone/src/customizations/miscCustomization.ts

@@ -1,6 +1,12 @@
 import { CinePlayer } from '@ohif/ui-next';
 import DicomUpload from '../components/DicomUpload/DicomUpload';
 
+// Provide a wider default container for the DICOM Upload modal, without
+// affecting other dialogs. We attach a static property that WorkList reads.
+const DicomUploadWithSize = Object.assign(DicomUpload, {
+  containerClassName: 'max-w-3xl',
+});
+
 export default {
   cinePlayer: CinePlayer,
   autoCineModalities: ['OT', 'US'],
@@ -11,6 +17,6 @@ export default {
   onBeforeDicomStore: ({ dicomDict, measurementData, naturalizedReport }) => {
     return dicomDict;
   },
-  dicomUploadComponent: DicomUpload,
+  dicomUploadComponent: DicomUploadWithSize,
   codingValues: {},
 };

platform/app/src/routes/WorkList/WorkList.tsx

@@ -524,6 +524,7 @@ function WorkList({
     DicomUploadComponent && dataSource.getConfig()?.dicomUploadEnabled
       ? {
           title: 'Upload files',
+          containerClassName: DicomUploadComponent?.containerClassName,
           closeButton: true,
           shouldCloseOnEsc: false,
           shouldCloseOnOverlayClick: false,