fix(app): update colors to align with design and update ui parts (#14351

) * fix(app): update colors to align with design and update ui parts
Opentrons · Jan 26, 2024 · 4371e79 · 4371e79
1 parent e2313d6
commit 4371e79
Show file tree

Hide file tree

Showing 23 changed files with 107 additions and 112 deletions.
diff --git a/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx b/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx
@@ -55,7 +55,7 @@ describe('ModuleIcon', () => {
   it('renders SharedIcon with correct style', () => {
     const { getByTestId } = render(props)
     const module = getByTestId('ModuleIcon_ot-temperature-v2')
-    expect(module).toHaveStyle(`color: ${String(COLORS.grey50)}`)
+    expect(module).toHaveStyle(`color: ${String(COLORS.grey60)}`)
     expect(module).toHaveStyle(`height: ${SPACING.spacing16}`)
     expect(module).toHaveStyle(`width: ${SPACING.spacing16}`)
     expect(module).toHaveStyle(`margin-left: ${SPACING.spacing2}`)

diff --git a/app/src/molecules/ModuleIcon/index.tsx b/app/src/molecules/ModuleIcon/index.tsx
@@ -33,7 +33,7 @@ export function ModuleIcon(props: ModuleIconProps): JSX.Element {
           moduleType={module.moduleType}
           size={SPACING.spacing16}
           marginX={SPACING.spacing2}
-          color={COLORS.grey50}
+          color={COLORS.grey60}
           css={MODULE_ICON_STYLE}
         />
       </Flex>

diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx
@@ -115,7 +115,6 @@ export function DeviceDetailsDeckConfiguration({
       <Flex
         alignItems={ALIGN_FLEX_START}
         backgroundColor={COLORS.white}
-        border={BORDERS.lineBorder}
         borderRadius={BORDERS.radiusSoftCorners}
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing16}

diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx
@@ -29,26 +29,26 @@ import {
   OT2_ROBOT_TYPE,
 } from '@opentrons/shared-data'
 import {
+  ALIGN_CENTER,
+  BORDERS,
   Box,
+  COLORS,
+  DIRECTION_COLUMN,
+  DISPLAY_FLEX,
   Flex,
   Icon,
   IconName,
-  useHoverTooltip,
-  ALIGN_CENTER,
-  DIRECTION_COLUMN,
-  DISPLAY_FLEX,
   JUSTIFY_CENTER,
+  JUSTIFY_FLEX_END,
   JUSTIFY_SPACE_BETWEEN,
+  Link as LinkButton,
+  PrimaryButton,
+  SecondaryButton,
   SIZE_1,
-  BORDERS,
-  COLORS,
   SPACING,
   TYPOGRAPHY,
-  PrimaryButton,
-  SecondaryButton,
   useConditionalConfirm,
-  JUSTIFY_FLEX_END,
-  Link as LinkButton,
+  useHoverTooltip,
 } from '@opentrons/components'
 
 import { getRobotUpdateDisplayInfo } from '../../../redux/robot-update'
@@ -313,8 +313,7 @@ export function ProtocolRunHeader({
       <Flex
         ref={protocolRunHeaderRef}
         backgroundColor={COLORS.white}
-        border={BORDERS.lineBorder}
-        borderRadius={BORDERS.radiusSoftCorners}
+        borderRadius={BORDERS.borderRadiusSize2}
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing16}
         marginBottom={SPACING.spacing16}
@@ -482,7 +481,9 @@ interface LabeledValueProps {
 function LabeledValue(props: LabeledValueProps): JSX.Element {
   return (
     <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-      <StyledText as="h6">{props.label}</StyledText>
+      <StyledText as="h6" color={COLORS.grey60}>
+        {props.label}
+      </StyledText>
       {typeof props.value === 'string' ? (
         <StyledText as="p">{props.value}</StyledText>
       ) : (

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx b/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx
@@ -74,7 +74,7 @@ export function SetupCalibrationItem({
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
             {label != null && (
               <StyledText
-                color={COLORS.grey50}
+                color={COLORS.grey60}
                 css={TYPOGRAPHY.h6SemiBold}
                 textTransform={TYPOGRAPHY.textTransformUppercase}
                 id={id}
@@ -87,7 +87,7 @@ export function SetupCalibrationItem({
                 {title}
               </StyledText>
             )}
-            <StyledText as="label" color={COLORS.grey50}>
+            <StyledText as="label" color={COLORS.grey60}>
               {calibrationDataNotAvailableText ?? subText ?? calibratedText}
             </StyledText>
           </Flex>

diff --git a/app/src/organisms/Devices/RecentProtocolRuns.tsx b/app/src/organisms/Devices/RecentProtocolRuns.tsx
@@ -43,7 +43,6 @@ export function RecentProtocolRuns({
     <Flex
       alignItems={ALIGN_FLEX_START}
       backgroundColor={COLORS.white}
-      border={BORDERS.lineBorder}
       borderRadius={BORDERS.radiusSoftCorners}
       flexDirection={DIRECTION_COLUMN}
       gridGap={SPACING.spacing16}

diff --git a/app/src/organisms/Devices/RobotCard.tsx b/app/src/organisms/Devices/RobotCard.tsx
@@ -4,13 +4,12 @@ import { useTranslation } from 'react-i18next'
 import { useHistory } from 'react-router-dom'
 
 import {
-  Box,
-  Flex,
   ALIGN_START,
-  BORDERS,
+  Box,
   COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
+  Flex,
   JUSTIFY_FLEX_START,
   JUSTIFY_SPACE_BETWEEN,
   POSITION_ABSOLUTE,
@@ -70,7 +69,6 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
       padding={SPACING.spacing16}
       position={POSITION_RELATIVE}
       onClick={() => history.push(`/devices/${robotName}`)}
-      css={BORDERS.cardOutlineBorder}
     >
       <img
         src={robotModel === 'OT-2' ? OT2_PNG : FLEX_PNG}
@@ -132,7 +130,7 @@ function AttachedModules(props: { robotName: string }): JSX.Element | null {
       <StyledText
         as="h6"
         textTransform={TYPOGRAPHY.textTransformUppercase}
-        color={COLORS.grey50}
+        color={COLORS.grey60}
       >
         {t('modules')}
       </StyledText>
@@ -185,7 +183,7 @@ function AttachedInstruments(props: { robotName: string }): JSX.Element {
       gridGap={SPACING.spacing4}
       minWidth="24rem"
     >
-      <StyledText as="h6" color={COLORS.grey50}>
+      <StyledText as="h6" color={COLORS.grey60}>
         {t('shared:instruments')}
       </StyledText>
 

diff --git a/app/src/organisms/LabwareCard/index.tsx b/app/src/organisms/LabwareCard/index.tsx
@@ -4,19 +4,18 @@ import startCase from 'lodash/startCase'
 import { format } from 'date-fns'
 
 import {
+  ALIGN_CENTER,
+  ALIGN_FLEX_END,
   Box,
+  COLORS,
+  DIRECTION_COLUMN,
   Flex,
   Icon,
+  JUSTIFY_SPACE_BETWEEN,
   LabwareRender,
   RobotWorkSpace,
   SPACING,
   TYPOGRAPHY,
-  BORDERS,
-  COLORS,
-  JUSTIFY_SPACE_BETWEEN,
-  DIRECTION_COLUMN,
-  ALIGN_FLEX_END,
-  ALIGN_CENTER,
 } from '@opentrons/components'
 
 import { StyledText } from '../../atoms/text'
@@ -40,7 +39,6 @@ export function LabwareCard(props: LabwareCardProps): JSX.Element {
       role="link"
       backgroundColor={COLORS.white}
       color={COLORS.black90}
-      css={BORDERS.cardOutlineBorder}
       paddingLeft={SPACING.spacing16}
       paddingY={SPACING.spacing16}
       height="auto"
@@ -104,7 +102,7 @@ export function LabwareCard(props: LabwareCardProps): JSX.Element {
             <StyledText
               as="h6"
               textTransform={TYPOGRAPHY.textTransformUppercase}
-              color={COLORS.grey50}
+              color={COLORS.grey60}
               id="LabwareCard_apiName"
             >
               {t('api_name')}

diff --git a/app/src/organisms/ModuleCard/index.tsx b/app/src/organisms/ModuleCard/index.tsx
@@ -5,19 +5,19 @@ import last from 'lodash/last'
 import { useHistory } from 'react-router-dom'
 
 import {
-  Box,
-  Flex,
-  DIRECTION_ROW,
   ALIGN_START,
+  Box,
+  COLORS,
   DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  Flex,
+  Icon,
+  IconProps,
+  ModuleIcon,
   SPACING,
   TYPOGRAPHY,
-  useOnClickOutside,
-  IconProps,
   useHoverTooltip,
-  COLORS,
-  Icon,
-  ModuleIcon,
+  useOnClickOutside,
 } from '@opentrons/components'
 import {
   getModuleDisplayName,
@@ -384,7 +384,7 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => {
               <>
                 <StyledText
                   textTransform={TYPOGRAPHY.textTransformUppercase}
-                  color={COLORS.grey50}
+                  color={COLORS.grey60}
                   fontWeight={TYPOGRAPHY.fontWeightSemiBold}
                   fontSize={TYPOGRAPHY.fontSizeH6}
                   paddingBottom={SPACING.spacing4}
@@ -409,7 +409,7 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => {
                     moduleType={module.moduleType}
                     size="1rem"
                     marginRight={SPACING.spacing2}
-                    color={COLORS.grey50}
+                    color={COLORS.grey60}
                   />
                   <StyledText>
                     {getModuleDisplayName(module.moduleModel)}

diff --git a/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx b/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx
@@ -155,7 +155,7 @@ export const RobotConfigurationDetails = (
                     moduleType={getModuleType(module.params.model)}
                     marginRight={SPACING.spacing4}
                     alignSelf={ALIGN_CENTER}
-                    color={COLORS.grey50}
+                    color={COLORS.grey60}
                     height={SIZE_1}
                     minWidth={SIZE_1}
                     minHeight={SIZE_1}

diff --git a/app/src/organisms/ProtocolDetails/index.tsx b/app/src/organisms/ProtocolDetails/index.tsx
@@ -10,27 +10,27 @@ import { useDispatch, useSelector } from 'react-redux'
 import { ErrorBoundary } from 'react-error-boundary'
 
 import {
-  Box,
-  Btn,
-  Flex,
-  Icon,
-  Link,
   ALIGN_CENTER,
   BORDERS,
+  Box,
+  Btn,
   COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   DISPLAY_FLEX,
+  Flex,
+  Icon,
   JUSTIFY_CENTER,
   JUSTIFY_SPACE_BETWEEN,
+  Link,
   POSITION_RELATIVE,
+  PrimaryButton,
+  ProtocolDeck,
+  RoundTab,
   SIZE_1,
   SIZE_5,
   SPACING,
-  RoundTab,
   TYPOGRAPHY,
-  PrimaryButton,
-  ProtocolDeck,
 } from '@opentrons/components'
 import {
   parseInitialPipetteNamesByMount,
@@ -129,7 +129,11 @@ function MetadataDetails({
         {filteredMetaData.map((item, index) => {
           return (
             <React.Fragment key={index}>
-              <StyledText as="h6" marginTop={SPACING.spacing8}>
+              <StyledText
+                as="h6"
+                marginTop={SPACING.spacing8}
+                color={COLORS.grey60}
+              >
                 {startCase(item.label)}
               </StyledText>
               <StyledText as="p">{item.value}</StyledText>
@@ -387,7 +391,6 @@ export function ProtocolDetails(
 
           <Flex
             backgroundColor={COLORS.white}
-            border={`1px solid ${COLORS.grey30}`}
             borderRadius={BORDERS.radiusSoftCorners}
             position={POSITION_RELATIVE}
             flexDirection={DIRECTION_ROW}
@@ -535,8 +538,7 @@ export function ProtocolDetails(
               flex={`0 0 ${String(SIZE_5)}`}
               flexDirection={DIRECTION_COLUMN}
               backgroundColor={COLORS.white}
-              border={`1px solid ${String(COLORS.grey30)}`}
-              borderRadius={BORDERS.radiusSoftCorners}
+              borderRadius={BORDERS.borderRadiusSize2}
               height="100%"
               data-testid="ProtocolDetails_deckMap"
             >
@@ -616,15 +618,14 @@ export function ProtocolDetails(
               </Flex>
               <Box
                 backgroundColor={COLORS.white}
-                border={BORDERS.lineBorder}
                 // remove left upper corner border radius when first tab is active
                 borderRadius={`${
                   currentTab === 'robot_config'
                     ? '0'
-                    : String(BORDERS.radiusSoftCorners)
-                } ${String(BORDERS.radiusSoftCorners)} ${String(
+                    : BORDERS.radiusSoftCorners
+                } ${BORDERS.radiusSoftCorners} ${BORDERS.radiusSoftCorners} ${
                   BORDERS.radiusSoftCorners
-                )} ${String(BORDERS.radiusSoftCorners)}`}
+                }`}
                 padding={`${SPACING.spacing16} ${SPACING.spacing16} 0 ${SPACING.spacing16}`}
               >
                 {contentsByTabName[currentTab]}

diff --git a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx
@@ -98,7 +98,6 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element | null {
       padding={SPACING.spacing16}
       position="relative"
       onClick={() => history.push(`/protocols/${protocolKey}`)}
-      css={BORDERS.cardOutlineBorder}
     >
       <ErrorBoundary fallback={UnknownAttachmentError}>
         <AnalysisInfo
@@ -216,7 +215,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
                 flexDirection={DIRECTION_COLUMN}
                 gridGap={SPACING.spacing4}
               >
-                <StyledText as="h6" color={COLORS.grey50}>
+                <StyledText as="h6" color={COLORS.grey60}>
                   {t('robot')}
                 </StyledText>
                 <StyledText as="p">
@@ -230,7 +229,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
                 data-testid={`ProtocolCard_instruments_${protocolDisplayName}`}
                 minWidth="10.625rem"
               >
-                <StyledText as="h6" color={COLORS.grey50}>
+                <StyledText as="h6" color={COLORS.grey60}>
                   {t('shared:instruments')}
                 </StyledText>
                 {
@@ -275,14 +274,14 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
               >
                 {requiredModuleTypes.length > 0 ? (
                   <>
-                    <StyledText as="h6" color={COLORS.grey50}>
+                    <StyledText as="h6" color={COLORS.grey60}>
                       {t('modules')}
                     </StyledText>
                     <Flex>
                       {requiredModuleTypes.map((moduleType, index) => (
                         <ModuleIcon
                           key={index}
-                          color={COLORS.grey50}
+                          color={COLORS.grey60}
                           moduleType={moduleType}
                           height="1rem"
                           marginRight={SPACING.spacing8}