fix(Button): redesign of existing Button component for consistency (#3473)

extensions/tmtv/src/Panels/PanelPetSUV.tsx

@@ -225,9 +225,7 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
               value={metadata.SeriesTime || ''}
               onChange={() => {}}
             />
-            <Button color="primary" onClick={updateMetadata}>
-              Reload Data
-            </Button>
+            <Button onClick={updateMetadata}>Reload Data</Button>
           </div>
         </div>
       }

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ExportReports.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonGroup } from '@ohif/ui';
+import { LegacyButton, ButtonGroup } from '@ohif/ui';
 import { useTranslation } from 'react-i18next';
 
 function ExportReports({ segmentations, tmtvValue, config, commandsManager }) {
@@ -9,8 +9,9 @@ function ExportReports({ segmentations, tmtvValue, config, commandsManager }) {
     <>
       {segmentations?.length ? (
         <div className="flex justify-center mt-4 space-x-2">
+          {/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
           <ButtonGroup color="black" size="inherit">
-            <Button
+            <LegacyButton
               className="px-2 py-2 text-base"
               disabled={tmtvValue === null}
               onClick={() => {
@@ -22,10 +23,10 @@ function ExportReports({ segmentations, tmtvValue, config, commandsManager }) {
               }}
             >
               {t('Export CSV')}
-            </Button>
+            </LegacyButton>
           </ButtonGroup>
           <ButtonGroup color="black" size="inherit">
-            <Button
+            <LegacyButton
               className="px-2 py-2 text-base"
               onClick={() => {
                 commandsManager.runCommand('createTMTVRTReport');
@@ -33,7 +34,7 @@ function ExportReports({ segmentations, tmtvValue, config, commandsManager }) {
               disabled={tmtvValue === null}
             >
               {t('Create RT Report')}
-            </Button>
+            </LegacyButton>
           </ButtonGroup>
         </div>
       ) : null}

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/PanelROIThresholdSegmentation.tsx

@@ -181,7 +181,6 @@ export default function PanelRoiThresholdSegmentation({
         <div className="overflow-x-hidden overflow-y-auto invisible-scrollbar">
           <div className="flex mx-4 my-4 mb-4 space-x-4">
             <Button
-              color="primary"
               onClick={() => {
                 setLabelmapLoading(true);
                 setTimeout(() => {
@@ -194,9 +193,7 @@ export default function PanelRoiThresholdSegmentation({
             >
               {labelmapLoading ? 'loading ...' : 'New Label'}
             </Button>
-            <Button color="primary" onClick={handleROIThresholding}>
-              Run
-            </Button>
+            <Button onClick={handleROIThresholding}>Run</Button>
           </div>
           <div
             className="flex items-center justify-around h-8 mb-2 border-t outline-none cursor-pointer select-none bg-secondary-dark first:border-0 border-secondary-light"

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ROIThresholdConfiguration.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Label, Select, Button, ButtonGroup } from '@ohif/ui';
+import { Input, Label, Select, LegacyButton, ButtonGroup } from '@ohif/ui';
 import { useTranslation } from 'react-i18next';
 
 export const ROI_STAT = 'roi_stat';
@@ -38,8 +38,9 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
           />
         </div>
         <div className="w-1/2">
+          {/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
           <ButtonGroup>
-            <Button
+            <LegacyButton
               size="initial"
               className="px-2 py-2 text-base text-white"
               color="primaryLight"
@@ -47,8 +48,8 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
               onClick={() => runCommand('setStartSliceForROIThresholdTool')}
             >
               {t('Start')}
-            </Button>
-            <Button
+            </LegacyButton>
+            <LegacyButton
               size="initial"
               color="primaryLight"
               variant="outlined"
@@ -56,7 +57,7 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
               onClick={() => runCommand('setEndSliceForROIThresholdTool')}
             >
               {t('End')}
-            </Button>
+            </LegacyButton>
           </ButtonGroup>
         </div>
       </div>

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/segmentationEditHandler.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Dialog } from '@ohif/ui';
+import { Input, Dialog, ButtonEnums } from '@ohif/ui';
 
 function segmentationItemEditHandler({ id, servicesManager }) {
   const { segmentationService, uiDialogService } = servicesManager.services;
@@ -44,23 +44,20 @@ function segmentationItemEditHandler({ id, servicesManager }) {
           }
         };
         return (
-          <div className="p-4 bg-primary-dark">
-            <Input
-              autoFocus
-              className="mt-2 bg-black border-primary-main"
-              type="text"
-              containerClassName="mr-2"
-              value={value.label}
-              onChange={onChangeHandler}
-              onKeyPress={onKeyPressHandler}
-            />
-          </div>
+          <Input
+            autoFocus
+            className="bg-black border-primary-main"
+            type="text"
+            containerClassName="mr-2"
+            value={value.label}
+            onChange={onChangeHandler}
+            onKeyPress={onKeyPressHandler}
+          />
         );
       },
       actions: [
-        // temp: swap button types until colors are updated
-        { id: 'cancel', text: 'Cancel', type: 'primary' },
-        { id: 'save', text: 'Save', type: 'secondary' },
+        { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
+        { id: 'save', text: 'Save', type: ButtonEnums.type.primary },
       ],
       onSubmit: onSubmitHandler,
     },