diff --git a/components/src/forms/DeprecatedCheckboxField.tsx b/components/src/forms/DeprecatedCheckboxField.tsx index a520d4da7d1..68452eb90e4 100644 --- a/components/src/forms/DeprecatedCheckboxField.tsx +++ b/components/src/forms/DeprecatedCheckboxField.tsx @@ -62,7 +62,7 @@ export function DeprecatedCheckboxField( props.isIndeterminate ? 'minus-box' : props.value - ? 'checkbox-marked' + ? 'ot-checkbox' : 'checkbox-blank-outline' } width="100%" diff --git a/protocol-designer/src/components/lists/TitledStepList.tsx b/protocol-designer/src/components/lists/TitledStepList.tsx index 1b88b291b1e..dd719b05eb5 100644 --- a/protocol-designer/src/components/lists/TitledStepList.tsx +++ b/protocol-designer/src/components/lists/TitledStepList.tsx @@ -87,7 +87,7 @@ export function TitledStepList(props: Props): JSX.Element { ) const multiSelectIconName = props.selected - ? 'checkbox-marked' + ? 'ot-checkbox' : 'checkbox-blank-outline' return ( diff --git a/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx b/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx index 2b3f9890f7a..bcd2fd954a9 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx @@ -128,11 +128,11 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element { iconInfo = ( ) } else if (showCheckbox && disabled) { diff --git a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx index f8a089c86c5..e2ec8a55ed1 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx @@ -67,9 +67,9 @@ describe('EquipmentOption', () => { } render(props) screen.getByText('mockText') - expect( - screen.getByLabelText('EquipmentOption_checkbox-marked') - ).toHaveStyle(`color: ${COLORS.blue50}`) + expect(screen.getByLabelText('EquipmentOption_ot-checkbox')).toHaveStyle( + `color: ${COLORS.blue50}` + ) expect(screen.getByLabelText('EquipmentOption_flex_mockText')).toHaveStyle( `border: ${BORDERS.activeLineBorder}` ) diff --git a/protocol-designer/src/components/steplist/MultiSelectToolbar/index.tsx b/protocol-designer/src/components/steplist/MultiSelectToolbar/index.tsx index de5a741b71c..8083949862a 100644 --- a/protocol-designer/src/components/steplist/MultiSelectToolbar/index.tsx +++ b/protocol-designer/src/components/steplist/MultiSelectToolbar/index.tsx @@ -159,7 +159,7 @@ export const MultiSelectToolbar = (props: Props): JSX.Element => { } = useConditionalConfirm(onDeleteClickAction, true) const selectProps: ClickableIconProps = { - iconName: isAllStepsSelected ? 'checkbox-marked' : 'minus-box', + iconName: isAllStepsSelected ? 'ot-checkbox' : 'minus-box', tooltipText: isAllStepsSelected ? 'Deselect All' : 'Select All', onClick: confirmSelect, }