From 84f24f24005316b8313aa87137f2a39a19b14992 Mon Sep 17 00:00:00 2001
From: Brent Hagen <brent.hagen@opentrons.com>
Date: Thu, 22 Feb 2024 09:28:50 -0500
Subject: [PATCH] fix(app,components): change link color globally, fix location
 conflict modal styling

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

closes RAUT-968, RAUT-1013
---
 .../LocationConflictModal.tsx                 | 23 ++++++++-----------
 .../src/ui-style-constants/typography.ts      |  4 ++--
 2 files changed, 11 insertions(+), 16 deletions(-)

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