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

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import React from 'react';
-import { Dialog, Input } from '@ohif/ui';
+import { ButtonEnums, Dialog, Input } from '@ohif/ui';
 import RESPONSE from './PROMPT_RESPONSES';
 
 export default function createReportDialogPrompt(uiDialogService) {
@@ -43,8 +43,8 @@ export default function createReportDialogPrompt(uiDialogService) {
         noCloseButton: true,
         onClose: _handleClose,
         actions: [
-          { 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 },
         ],
         // TODO: Should be on button press...
         onSubmit: _handleFormSubmit,

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptBeginTracking.js

@@ -1,3 +1,5 @@
+import { ButtonEnums } from '@ohif/ui';
+
 const RESPONSE = {
   NO_NEVER: -1,
   CANCEL: 0,
@@ -31,19 +33,19 @@ function _askTrackMeasurements(uiViewportDialogService, viewportIndex) {
     const actions = [
       {
         id: 'prompt-begin-tracking-cancel',
-        type: 'cancel',
+        type: ButtonEnums.type.secondary,
         text: 'No',
         value: RESPONSE.CANCEL,
       },
       {
         id: 'prompt-begin-tracking-no-do-not-ask-again',
-        type: 'secondary',
+        type: ButtonEnums.type.secondary,
         text: 'No, do not ask again',
         value: RESPONSE.NO_NEVER,
       },
       {
         id: 'prompt-begin-tracking-yes',
-        type: 'primary',
+        type: ButtonEnums.type.primary,
         text: 'Yes',
         value: RESPONSE.SET_STUDY_AND_SERIES,
       },

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptHydrateStructuredReport.js

@@ -1,4 +1,5 @@
 import { hydrateStructuredReport } from '@ohif/extension-cornerstone-dicom-sr';
+import { ButtonEnums } from '@ohif/ui';
 
 const RESPONSE = {
   NO_NEVER: -1,
@@ -61,12 +62,12 @@ function _askTrackMeasurements(uiViewportDialogService, viewportIndex) {
       'Do you want to continue tracking measurements for this study?';
     const actions = [
       {
-        type: 'secondary',
+        type: ButtonEnums.type.secondary,
         text: 'No',
         value: RESPONSE.CANCEL,
       },
       {
-        type: 'primary',
+        type: ButtonEnums.type.primary,
         text: 'Yes',
         value: RESPONSE.HYDRATE_REPORT,
       },

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewSeries.js

@@ -1,3 +1,5 @@
+import { ButtonEnums } from '@ohif/ui';
+
 const RESPONSE = {
   NO_NEVER: -1,
   CANCEL: 0,
@@ -38,14 +40,18 @@ function _askShouldAddMeasurements(uiViewportDialogService, viewportIndex) {
     const message =
       'Do you want to add this measurement to the existing report?';
     const actions = [
-      { type: 'cancel', text: 'Cancel', value: RESPONSE.CANCEL },
       {
-        type: 'secondary',
+        type: ButtonEnums.type.secondary,
+        text: 'Cancel',
+        value: RESPONSE.CANCEL,
+      },
+      {
+        type: ButtonEnums.type.primary,
         text: 'Create new report',
         value: RESPONSE.CREATE_REPORT,
       },
       {
-        type: 'primary',
+        type: ButtonEnums.type.primary,
         text: 'Add to existing report',
         value: RESPONSE.ADD_SERIES,
       },

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-import { Button, ButtonGroup } from '@ohif/ui';
+import { Button, ButtonEnums } from '@ohif/ui';
 
 function ActionButtons({ onExportClick, onCreateReportClick, disabled }) {
   const { t } = useTranslation('MeasurementTable');
@@ -10,23 +10,18 @@ function ActionButtons({ onExportClick, onCreateReportClick, disabled }) {
   return (
     <React.Fragment>
       <Button
-        className="text-base px-2 py-2"
-        size="initial"
-        variant={disabled ? 'disabled' : 'outlined'}
-        color="black"
-        border="primaryActive"
         onClick={onExportClick}
         disabled={disabled}
+        type={ButtonEnums.type.secondary}
+        size={ButtonEnums.size.small}
       >
         {t('Export')}
       </Button>
       <Button
-        className="ml-2 px-2 text-base"
-        variant={disabled ? 'disabled' : 'outlined'}
-        size="initial"
-        color="black"
-        border="primaryActive"
+        className="ml-2"
         onClick={onCreateReportClick}
+        type={ButtonEnums.type.secondary}
+        size={ButtonEnums.size.small}
         disabled={disabled}
       >
         {t('Create Report')}

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

@@ -6,6 +6,7 @@ import {
   Dialog,
   Input,
   useViewportGrid,
+  ButtonEnums,
 } from '@ohif/ui';
 import { DicomMetadataStore, utils } from '@ohif/core';
 import { useDebounce } from '@hooks';
@@ -217,9 +218,8 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
           );
         },
         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,
       },

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx

@@ -6,6 +6,7 @@ import {
   useImageViewer,
   useViewportGrid,
   Dialog,
+  ButtonEnums,
 } from '@ohif/ui';
 import { useTrackedMeasurements } from '../../getContextModule';
 
@@ -507,11 +508,15 @@ function _mapDisplaySets(
                   </div>
                 ),
                 actions: [
-                  { id: 'cancel', text: 'Cancel', type: 'secondary' },
+                  {
+                    id: 'cancel',
+                    text: 'Cancel',
+                    type: ButtonEnums.type.secondary,
+                  },
                   {
                     id: 'yes',
                     text: 'Yes',
-                    type: 'primary',
+                    type: ButtonEnums.type.primary,
                     classes: ['reject-yes-button'],
                   },
                 ],