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

…t modal styling changes link color and hover color, fixes location conflict modal background color, text color, and layout closes RAUT-968, RAUT-1013
Opentrons · Feb 22, 2024 · 84f24f2 · 84f24f2
1 parent 4e42317
commit 84f24f2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 16 deletions.
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};
   }
 `