diff --git a/app/src/atoms/MenuList/OverflowBtn.tsx b/app/src/atoms/MenuList/OverflowBtn.tsx index a01c752e712..a3ca57db753 100644 --- a/app/src/atoms/MenuList/OverflowBtn.tsx +++ b/app/src/atoms/MenuList/OverflowBtn.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { css } from 'styled-components' -import { Btn, COLORS, SPACING } from '@opentrons/components' +import { Btn, BORDERS, COLORS, SPACING } from '@opentrons/components' export const OverflowBtn: ( props: React.ComponentProps, @@ -13,7 +13,7 @@ export const OverflowBtn: ( return ( {fixtureDisplayName} @@ -253,7 +253,7 @@ export function AddFixtureModal({ const FIXTURE_BUTTON_STYLE = css` background-color: ${COLORS.grey35}; cursor: default; - border-radius: ${BORDERS.borderRadiusFull}; + border-radius: ${BORDERS.borderRadius16}; box-shadow: none; &:focus { diff --git a/app/src/organisms/Navigation/index.tsx b/app/src/organisms/Navigation/index.tsx index a28d5f364f9..3434a85ee7a 100644 --- a/app/src/organisms/Navigation/index.tsx +++ b/app/src/organisms/Navigation/index.tsx @@ -195,7 +195,7 @@ const TouchNavLink = styled(NavLink)` ` const IconButton = styled('button')` - border-radius: ${SPACING.spacing4}; + border-radius: ${BORDERS.borderRadius8}; max-height: 100%; background-color: ${COLORS.white}; diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx index d4e50a9b004..50836cbcce1 100644 --- a/app/src/organisms/ProtocolSetupLabware/index.tsx +++ b/app/src/organisms/ProtocolSetupLabware/index.tsx @@ -547,7 +547,7 @@ function RowLabware({ diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx index 26162c65eb8..ae7d75206b0 100644 --- a/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx @@ -312,7 +312,7 @@ function ModuleTableItem({ ? COLORS.grey35 : COLORS.yellow35 } - borderRadius={BORDERS.borderRadius12} + borderRadius={BORDERS.borderRadius8} cursor={isDuplicateModuleModel ? 'pointer' : 'inherit'} gridGap={SPACING.spacing24} padding={`${SPACING.spacing16} ${SPACING.spacing24}`} diff --git a/app/src/organisms/TaskList/index.tsx b/app/src/organisms/TaskList/index.tsx index c90547da5fa..1f9bff0383b 100644 --- a/app/src/organisms/TaskList/index.tsx +++ b/app/src/organisms/TaskList/index.tsx @@ -223,7 +223,7 @@ function SubTask({ ? BORDERS.activeLineBorder : `1px solid ${COLORS.grey30}` } - borderRadius={BORDERS.borderRadius4} + borderRadius={BORDERS.borderRadius8} gridGap={SPACING.spacing24} width="100%" > @@ -366,7 +366,7 @@ function Task({ border={ isActiveTask && !isTaskOpen ? BORDERS.activeLineBorder : undefined } - borderRadius={BORDERS.borderRadius4} + borderRadius={BORDERS.borderRadius8} width="100%" > { { expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`) expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey60)}`) expect(checkBoxIcon).toHaveStyle(`display: flex`) - expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`) + expect(checkBoxIcon).toHaveStyle( + `border-radius: ${String(BORDERS.borderRadius2)}` + ) expect(checkBoxIcon).toHaveStyle( `justify-content: ${String(JUSTIFY_CENTER)}` ) @@ -82,7 +84,9 @@ describe('CheckboxField', () => { expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`) expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.blue60)}`) expect(checkBoxIcon).toHaveStyle(`display: flex`) - expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`) + expect(checkBoxIcon).toHaveStyle( + `border-radius: ${String(BORDERS.borderRadius2)}` + ) expect(checkBoxIcon).toHaveStyle( `justify-content: ${String(JUSTIFY_CENTER)}` ) @@ -97,7 +101,9 @@ describe('CheckboxField', () => { expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`) expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey60)}`) expect(checkBoxIcon).toHaveStyle(`display: flex`) - expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`) + expect(checkBoxIcon).toHaveStyle( + `border-radius: ${String(BORDERS.borderRadius2)}` + ) expect(checkBoxIcon).toHaveStyle( `justify-content: ${String(JUSTIFY_CENTER)}` ) diff --git a/components/src/atoms/CheckboxField/index.tsx b/components/src/atoms/CheckboxField/index.tsx index 6cf761e38dc..39e88308231 100644 --- a/components/src/atoms/CheckboxField/index.tsx +++ b/components/src/atoms/CheckboxField/index.tsx @@ -50,7 +50,7 @@ const INNER_STYLE_VALUE = css` min-width: ${SPACING.spacing20}; color: ${COLORS.blue50}; display: flex; - border-radius: 1px; + border-radius: ${BORDERS.borderRadius2}; justify-content: ${JUSTIFY_CENTER}; align-items: ${ALIGN_CENTER}; @@ -76,7 +76,7 @@ const INNER_STYLE_NO_VALUE = css` min-width: ${SPACING.spacing20}; color: ${COLORS.grey50}; display: flex; - border-radius: 1px; + border-radius: ${BORDERS.borderRadius2}; justify-content: ${JUSTIFY_CENTER}; align-items: ${ALIGN_CENTER};