fix(app,components): change link color globally, fix location conflic…

…t modal styling (#14540) changes link color and hover color, fixes location conflict modal background color, text color, and layout closes RAUT-968, RAUT-1013
Opentrons · Feb 23, 2024 · 4c44d7c · 4c44d7c
1 parent 4e42317
commit 4c44d7c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 17 deletions.
diff --git a/app/src/atoms/Link/__tests__/ExternalLink.test.tsx b/app/src/atoms/Link/__tests__/ExternalLink.test.tsx
@@ -25,7 +25,7 @@ describe('ExternalLink', () => {
     const link = getByText('Test Link')
     expect(link).toHaveAttribute('href', 'https://opentrons.com')
     expect(link).toHaveAttribute('target', '_blank')
-    expect(link).toHaveStyle(`color: ${COLORS.blue55}`)
+    expect(link).toHaveStyle(`color: ${COLORS.blue50}`)
   })
 
   it('renders open-in-new icon', () => {

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx
@@ -16,7 +16,6 @@ import {
   COLORS,
   JUSTIFY_END,
   ALIGN_CENTER,
-  Box,
   JUSTIFY_SPACE_BETWEEN,
   BORDERS,
 } from '@opentrons/components'
@@ -290,28 +289,24 @@ export const LocationConflictModal = (
                   gridGap={SPACING.spacing20}
                   alignItems={ALIGN_CENTER}
                 >
-                  <Box width="107px">
-                    <StyledText as="label" color={COLORS.grey60}>
-                      {t('protocol_specifies')}
-                    </StyledText>
-                  </Box>
-                  <StyledText as="label">
+                  <StyledText as="label" width={SPACING.spacing120}>
+                    {t('protocol_specifies')}
+                  </StyledText>
+                  <StyledText as="label" flex="1">
                     {protocolSpecifiesDisplayName}
                   </StyledText>
                 </Flex>
                 <Flex
                   padding={SPACING.spacing8}
-                  backgroundColor={COLORS.grey10}
+                  backgroundColor={COLORS.grey20}
                   flexDirection={DIRECTION_ROW}
                   gridGap={SPACING.spacing20}
                   alignItems={ALIGN_CENTER}
                 >
-                  <Box width="max-content">
-                    <StyledText as="label">
-                      {t('currently_configured')}
-                    </StyledText>
-                  </Box>
-                  <StyledText as="label">
+                  <StyledText as="label" width={SPACING.spacing120}>
+                    {t('currently_configured')}
+                  </StyledText>
+                  <StyledText as="label" flex="1">
                     {isThermocycler
                       ? currentThermocyclerFixtureDisplayName
                       : currentFixtureDisplayName}

diff --git a/components/src/ui-style-constants/typography.ts b/components/src/ui-style-constants/typography.ts
@@ -125,10 +125,10 @@ export const linkPSemiBold = css`
   font-size: ${fontSizeP};
   font-weight: ${fontWeightSemiBold};
   line-height: ${lineHeight20};
-  color: ${COLORS.blue55};
+  color: ${COLORS.blue50};
 
   &:hover {
-    color: ${COLORS.grey50};
+    color: ${COLORS.blue55};
   }
 `