From cb182a0da3a356ce91cbb64bfcffc83709202b09 Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:45:04 -0500
Subject: [PATCH] fix(components, protocol-designer): add hover state for
 Checkbox component 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
---
 components/src/atoms/Checkbox/index.tsx       |  5 ++++-
 .../organisms/EditInstrumentsModal/index.tsx  | 15 ++++++++-----
 .../SelectPipettes.tsx                        | 22 ++++++++++++-------
 3 files changed, 28 insertions(+), 14 deletions(-)

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
                               }
                             >
-                              <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
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
                                 }
                               >
-                                <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};
+  }
 `