fix(components, protocol-designer): add hover state for Checkbox comp…

…onent and StyledLabel (#16942) Fix enabled and hover state background color for both checked and unchecked states of Checkbox component, and add hover state for StyledLabel one-off in SelectPipettes component. Closes RQA-3655
Opentrons · Nov 21, 2024 · cb182a0 · cb182a0
1 parent 7d50f2d
commit cb182a0
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git 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
@@ -565,11 +565,13 @@ export function EditInstrumentsModal(
                                 TYPOGRAPHY.textDecorationUnderline
                               }
                             >
-                              <StyledText desktopStyle="bodyDefaultRegular">
-                                {allowAllTipracks
-                                  ? t('show_default_tips')
-                                  : t('show_all_tips')}
-                              </StyledText>
+                              <StyledLabel>
+                                <StyledText desktopStyle="bodyDefaultRegular">
+                                  {allowAllTipracks
+                                    ? t('show_default_tips')
+                                    : t('show_all_tips')}
+                                </StyledText>
+                              </StyledLabel>{' '}
                             </Btn>
                           )}
                         </Flex>
@@ -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
@@ -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
                                 }
                               >
-                                <StyledText
-                                  desktopStyle="bodyDefaultRegular"
-                                  padding={SPACING.spacing4}
-                                >
-                                  {allowAllTipracks
-                                    ? t('show_default_tips')
-                                    : t('show_all_tips')}
-                                </StyledText>
+                                <StyledLabel>
+                                  <StyledText
+                                    desktopStyle="bodyDefaultRegular"
+                                    padding={SPACING.spacing4}
+                                  >
+                                    {allowAllTipracks
+                                      ? t('show_default_tips')
+                                      : t('show_all_tips')}
+                                  </StyledText>
+                                </StyledLabel>
                               </Btn>
                             )}
                           </Box>
@@ -557,4 +560,7 @@ const StyledLabel = styled.label`
   input[type='file'] {
     display: none;
   }
+  &:hover {
+    color: ${COLORS.blue50};
+  }
 `