fix(app): update toggle group, overflow btn, historical protocol run …

…colors (#14532) updates to helix colors to close tickets RAUT-978, RAUT-982, RAUT-989
Opentrons · Feb 21, 2024 · 0e1c02b · 0e1c02b
1 parent 7b456ed
commit 0e1c02b
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/app/src/atoms/MenuList/OverflowBtn.tsx b/app/src/atoms/MenuList/OverflowBtn.tsx
@@ -17,7 +17,7 @@ export const OverflowBtn = React.forwardRef(
             background-color: ${COLORS.grey30};
           }
           &:hover circle {
-            fill: ${COLORS.black90};
+            fill: ${COLORS.grey55};
           }
 
           &:active,
@@ -31,7 +31,7 @@ export const OverflowBtn = React.forwardRef(
           }
 
           &:focus-visible {
-            box-shadow: ${`0 0 0 3px ${COLORS.blue50}`};
+            box-shadow: ${`0 0 0 3px ${COLORS.yellow50}`};
             background-color: ${'transparent'};
           }
 

diff --git a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx b/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx
@@ -55,7 +55,7 @@ describe('OverflowBtn', () => {
 
     expect(getByRole('button')).toHaveStyleRule(
       'box-shadow',
-      `0 0 0 3px ${String(COLORS.blue50)}`,
+      `0 0 0 3px ${String(COLORS.yellow50)}`,
       {
         modifier: ':focus-visible',
       }

diff --git a/app/src/molecules/ToggleGroup/useToggleGroup.tsx b/app/src/molecules/ToggleGroup/useToggleGroup.tsx
@@ -26,6 +26,7 @@ const BUTTON_GROUP_STYLES = css`
     &:focus {
       box-shadow: none;
       color: ${COLORS.white};
+      background-color: ${COLORS.blue50};
     }
 
     &:hover {

diff --git a/app/src/organisms/Devices/HistoricalProtocolRun.tsx b/app/src/organisms/Devices/HistoricalProtocolRun.tsx
@@ -96,6 +96,7 @@ export function HistoricalProtocolRun(
           css={css`
             cursor: pointer;
           `}
+          color={COLORS.grey60}
         >
           {runDisplayName}
         </StyledText>
@@ -107,6 +108,7 @@ export function HistoricalProtocolRun(
             onClick={() => history.push(`/protocols/${protocolKey}`)}
             css={CLICK_STYLE}
             marginRight={SPACING.spacing16}
+            color={COLORS.grey60}
           >
             {protocolName}
           </StyledText>
@@ -117,6 +119,7 @@ export function HistoricalProtocolRun(
             data-testid={`RecentProtocolRuns_Protocol_${String(protocolKey)}`}
             overflowWrap={OVERFLOW_WRAP_ANYWHERE}
             marginRight={SPACING.spacing16}
+            color={COLORS.grey60}
           >
             {protocolName}
           </StyledText>
@@ -126,6 +129,7 @@ export function HistoricalProtocolRun(
           width="20%"
           textTransform="capitalize"
           data-testid={`RecentProtocolRuns_Status_${String(protocolKey)}`}
+          color={COLORS.grey60}
         >
           {runStatus === 'running' && (
             <Icon