diff --git a/components/src/atoms/Checkbox/index.tsx b/components/src/atoms/Checkbox/index.tsx index 8ace61cb0bf..44c2ba8ee04 100644 --- a/components/src/atoms/Checkbox/index.tsx +++ b/components/src/atoms/Checkbox/index.tsx @@ -48,7 +48,7 @@ export function Checkbox(props: CheckboxProps): JSX.Element { align-items: ${ALIGN_CENTER}; flex-direction: ${DIRECTION_ROW}; color: ${isChecked ? COLORS.white : COLORS.black90}; - background-color: ${isChecked ? COLORS.blue50 : COLORS.blue35}; + background-color: ${isChecked ? COLORS.blue50 : COLORS.blue30}; border-radius: ${type === 'round' ? BORDERS.borderRadiusFull : BORDERS.borderRadius8}; @@ -68,6 +68,9 @@ export function Checkbox(props: CheckboxProps): JSX.Element { background-color: ${COLORS.grey35}; color: ${COLORS.grey50}; } + &:hover { + background-color: ${isChecked ? COLORS.blue55 : COLORS.blue35}; + } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { padding: ${SPACING.spacing20}; diff --git a/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx b/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx index c986c1ce9ba..eefcad8f4bd 100644 --- a/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx +++ b/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx @@ -565,11 +565,13 @@ export function EditInstrumentsModal( TYPOGRAPHY.textDecorationUnderline } > - - {allowAllTipracks - ? t('show_default_tips') - : t('show_all_tips')} - + + + {allowAllTipracks + ? t('show_default_tips') + : t('show_all_tips')} + + {' '} )} @@ -594,4 +596,7 @@ const StyledLabel = styled.label` input[type='file'] { display: none; } + &:hover { + color: ${COLORS.blue50}; + } ` diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx index 3f48e08e6bd..b3c4e691746 100644 --- a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx +++ b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx @@ -14,6 +14,7 @@ import { Box, Btn, Checkbox, + COLORS, CURSOR_POINTER, DIRECTION_COLUMN, DIRECTION_ROW, @@ -399,14 +400,16 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null { TYPOGRAPHY.textDecorationUnderline } > - - {allowAllTipracks - ? t('show_default_tips') - : t('show_all_tips')} - + + + {allowAllTipracks + ? t('show_default_tips') + : t('show_all_tips')} + + )} @@ -557,4 +560,7 @@ const StyledLabel = styled.label` input[type='file'] { display: none; } + &:hover { + color: ${COLORS.blue50}; + } `