From 4c44d7cb096ca7d7d2721ee66b3ea371577a203a Mon Sep 17 00:00:00 2001
From: Brent Hagen <brent.hagen@opentrons.com>
Date: Fri, 23 Feb 2024 10:30:35 -0500
Subject: [PATCH] fix(app,components): change link color globally, fix location
 conflict modal styling (#14540)

changes link color and hover color, fixes location conflict modal
background color, text color, and layout

closes RAUT-968, RAUT-1013
---
 .../Link/__tests__/ExternalLink.test.tsx      |  2 +-
 .../LocationConflictModal.tsx                 | 23 ++++++++-----------
 .../src/ui-style-constants/typography.ts      |  4 ++--
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/app/src/atoms/Link/__tests__/ExternalLink.test.tsx b/app/src/atoms/Link/__tests__/ExternalLink.test.tsx
index 6158ecf69b3..25fc23544c8 100644
--- 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
index 8cf4a21175c..c5164725579 100644
--- 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
index de315736f6d..cc488a7bea2 100644
--- 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};
   }
 `