refactor(app,components): borderRadius4 override (#14661)

Closes EXEC-331 Co-authored-by: Jamey Huffnagle <[email protected]>
Opentrons · Mar 18, 2024 · 21213b9 · 21213b9
1 parent fe9a09f
commit 21213b9
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 22 deletions.
diff --git a/app/src/atoms/MenuList/OverflowBtn.tsx b/app/src/atoms/MenuList/OverflowBtn.tsx
@@ -13,7 +13,7 @@ export const OverflowBtn: (
     return (
       <Btn
         css={css`
-          border-radius: ${BORDERS.borderRadius8};
+          border-radius: ${BORDERS.borderRadius4};
           max-height: ${SPACING.spacing32};
 
           &:hover {

diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx
@@ -175,7 +175,7 @@ export function AddFixtureModal({
                         flexDirection={DIRECTION_ROW}
                         alignItems={ALIGN_CENTER}
                         padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-                        css={FIXTURE_BUTTON_STYLE}
+                        css={FIXTURE_BUTTON_STYLE_ODD}
                       >
                         <StyledText
                           as="p"
@@ -250,7 +250,7 @@ export function AddFixtureModal({
   )
 }
 
-const FIXTURE_BUTTON_STYLE = css`
+const FIXTURE_BUTTON_STYLE_ODD = css`
   background-color: ${COLORS.grey35};
   cursor: default;
   border-radius: ${BORDERS.borderRadius16};

diff --git a/app/src/organisms/Devices/HistoricalProtocolRunOffsetDrawer.tsx b/app/src/organisms/Devices/HistoricalProtocolRunOffsetDrawer.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import {
   Flex,
   Box,
+  BORDERS,
   SPACING,
   COLORS,
   TYPOGRAPHY,
@@ -85,6 +86,7 @@ export function HistoricalProtocolRunOffsetDrawer(
       backgroundColor={COLORS.grey20}
       width="100%"
       padding={`${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing48}`}
+      borderRadius={BORDERS.borderRadius4}
     >
       {isOutOfDate ? (
         <Banner type="warning" marginTop={SPACING.spacing8}>
@@ -145,6 +147,7 @@ export function HistoricalProtocolRunOffsetDrawer(
             padding={SPACING.spacing8}
             backgroundColor={COLORS.white}
             marginY={SPACING.spacing8}
+            borderRadius={BORDERS.borderRadius4}
           >
             <StyledText width="23.5%" as="label">
               {t('slot', { slotName: offset.location.slotName })}

diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx
@@ -430,6 +430,7 @@ export function ProtocolRunHeader({
             display="grid"
             gridTemplateColumns="4fr 6fr 4fr"
             padding={SPACING.spacing8}
+            borderRadius={BORDERS.borderRadius4}
           >
             <LabeledValue
               label={t('protocol_start')}

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import pick from 'lodash/pick'
@@ -11,10 +11,10 @@ import {
 import {
   Flex,
   DIRECTION_COLUMN,
+  BORDERS,
   SPACING,
   TYPOGRAPHY,
   COLORS,
-  BORDERS,
   JUSTIFY_SPACE_BETWEEN,
 } from '@opentrons/components'
 
@@ -90,9 +90,9 @@ export function CurrentOffsetsTable(
           return (
             <OffsetTableRow key={offset.id}>
               <OffsetTableDatum
-                css={css`
-                  border-radius: ${BORDERS.borderRadius8} 0 0
-                    ${BORDERS.borderRadius8};
+                css={`
+                  border-radius: ${BORDERS.borderRadius4} 0 0
+                    ${BORDERS.borderRadius4};
                 `}
               >
                 {getDisplayLocation(
@@ -104,9 +104,9 @@ export function CurrentOffsetsTable(
               </OffsetTableDatum>
               <OffsetTableDatum>{labwareDisplayName}</OffsetTableDatum>
               <OffsetTableDatum
-                css={css`
-                  border-radius: 0 ${BORDERS.borderRadius8}
-                    ${BORDERS.borderRadius8} 0;
+                css={`
+                  border-radius: 0 ${BORDERS.borderRadius4}
+                    ${BORDERS.borderRadius4} 0;
                 `}
               >
                 <OffsetVector {...offset.vector} />

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx
@@ -185,7 +185,7 @@ export const LocationConflictModal = (
                 flexDirection={DIRECTION_ROW}
                 alignItems={ALIGN_CENTER}
                 justifyContent={JUSTIFY_SPACE_BETWEEN}
-                borderRadius={BORDERS.borderRadius8}
+                borderRadius={BORDERS.borderRadius4}
               >
                 <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
                   {t('protocol_specifies')}
@@ -201,7 +201,7 @@ export const LocationConflictModal = (
                 flexDirection={DIRECTION_ROW}
                 justifyContent={JUSTIFY_SPACE_BETWEEN}
                 alignItems={ALIGN_CENTER}
-                borderRadius={BORDERS.borderRadius8}
+                borderRadius={BORDERS.borderRadius4}
               >
                 <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
                   {t('currently_configured')}
@@ -288,7 +288,7 @@ export const LocationConflictModal = (
                 flexDirection={DIRECTION_ROW}
                 gridGap={SPACING.spacing20}
                 alignItems={ALIGN_CENTER}
-                borderRadius={BORDERS.borderRadius8}
+                borderRadius={BORDERS.borderRadius4}
               >
                 <StyledText as="label" width={SPACING.spacing120}>
                   {t('protocol_specifies')}
@@ -303,7 +303,7 @@ export const LocationConflictModal = (
                 flexDirection={DIRECTION_ROW}
                 gridGap={SPACING.spacing20}
                 alignItems={ALIGN_CENTER}
-                borderRadius={BORDERS.borderRadius8}
+                borderRadius={BORDERS.borderRadius4}
               >
                 <StyledText as="label" width={SPACING.spacing120}>
                   {t('currently_configured')}

diff --git a/app/src/organisms/LabwareDetails/index.tsx b/app/src/organisms/LabwareDetails/index.tsx
@@ -163,6 +163,7 @@ export function LabwareDetails(props: LabwareDetailsProps): JSX.Element {
         backgroundColor={COLORS.grey20}
         padding={SPACING.spacing16}
         marginBottom={SPACING.spacing24}
+        borderRadius={BORDERS.borderRadius4}
       >
         <StyledText as="h6">{t('api_name')}</StyledText>
         <Link

diff --git a/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx b/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx
@@ -388,13 +388,13 @@ const TerseTable = styled('table')`
   margin: ${SPACING.spacing16} 0;
   text-align: left;
   tr td:first-child {
-    border-top-left-radius: ${BORDERS.borderRadius12};
-    border-bottom-left-radius: ${BORDERS.borderRadius12};
+    border-top-left-radius: ${BORDERS.borderRadius8};
+    border-bottom-left-radius: ${BORDERS.borderRadius8};
     padding-left: ${SPACING.spacing12};
   }
   tr td:last-child {
-    border-top-right-radius: ${BORDERS.borderRadius12};
-    border-bottom-right-radius: ${BORDERS.borderRadius12};
+    border-top-right-radius: ${BORDERS.borderRadius8};
+    border-bottom-right-radius: ${BORDERS.borderRadius8};
     padding-right: ${SPACING.spacing12};
   }
 `

diff --git a/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx b/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx
@@ -7,6 +7,7 @@ import {
   DIRECTION_COLUMN,
   JUSTIFY_SPACE_BETWEEN,
   COLORS,
+  BORDERS,
   TYPOGRAPHY,
   SPACING,
   JUSTIFY_END,
@@ -169,6 +170,7 @@ export const MagneticModuleSlideout = (
         fontWeight={TYPOGRAPHY.fontWeightRegular}
         fontSize={TYPOGRAPHY.fontSizeP}
         padding={SPACING.spacing16}
+        borderRadius={BORDERS.borderRadius4}
       >
         <Flex
           flexDirection={DIRECTION_COLUMN}

diff --git a/app/src/pages/RunSummary/index.tsx b/app/src/pages/RunSummary/index.tsx
@@ -8,8 +8,8 @@ import {
   ALIGN_CENTER,
   ALIGN_FLEX_START,
   ALIGN_STRETCH,
-  Btn,
   BORDERS,
+  Btn,
   COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
@@ -416,7 +416,7 @@ const SummaryDatum = styled.div`
   grid-gap: ${SPACING.spacing4};
   height: 44px;
   background: #d6d6d6;
-  border-radius: 4px;
+  border-radius: ${BORDERS.borderRadius4};
   color: ${COLORS.grey60};
   font-size: ${TYPOGRAPHY.fontSize22};
   line-height: ${TYPOGRAPHY.lineHeight28};

diff --git a/components/src/hardware-sim/Pipette/PipetteRender.tsx b/components/src/hardware-sim/Pipette/PipetteRender.tsx
@@ -5,6 +5,7 @@ import {
   PipetteName,
 } from '@opentrons/shared-data'
 import { C_MED_DARK_GRAY, C_MED_GRAY } from '../../styles'
+import { BORDERS } from '../../helix-design-system'
 import { RobotCoordsForeignDiv } from '../Deck/RobotCoordsForeignDiv'
 import {
   MULTI_CHANNEL_PIPETTE_WIDTH,
@@ -71,7 +72,7 @@ export const PipetteRender = (props: PipetteRenderProps): JSX.Element => {
           height: '100%',
           overflow: 'visible',
           boxSizing: 'border-box',
-          borderRadius: '4px',
+          borderRadius: BORDERS.borderRadius4,
           boxShadow: `inset 0 0 0 1px ${C_MED_DARK_GRAY}`,
           backgroundColor: `${C_MED_GRAY}80`,
         },