Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(app,components): borderRadius4 override #14661

Merged
merged 7 commits into from
Mar 18, 2024
Merged

refactor(app,components): borderRadius4 override #14661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1828b45
fix(components): PipetteRender border radius
sfoster1 Mar 14, 2024
ffb1441
fix(app): RunSummaryDatum border radius
sfoster1 Mar 14, 2024
28a2c3c
some examples
mjhuff Mar 14, 2024
65d877a
web informational content
mjhuff Mar 18, 2024
7e77a2f
Merge branch 'edge' into exec-331-override-border-radius-4
mjhuff Mar 18, 2024
a365852
lint
mjhuff Mar 18, 2024
6e630a1
mel feedback
mjhuff Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/src/atoms/MenuList/OverflowBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const OverflowBtn: (
return (
<Btn
css={css`
border-radius: ${BORDERS.borderRadius8};
border-radius: ${BORDERS.borderRadius4};
max-height: ${SPACING.spacing32};

&:hover {
Expand Down
4 changes: 2 additions & 2 deletions app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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};
Expand Down
3 changes: 3 additions & 0 deletions app/src/organisms/Devices/HistoricalProtocolRunOffsetDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
import {
Flex,
Box,
BORDERS,
SPACING,
COLORS,
TYPOGRAPHY,
Expand Down Expand Up @@ -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}>
Expand Down Expand Up @@ -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 })}
Expand Down
1 change: 1 addition & 0 deletions app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -430,6 +430,7 @@ export function ProtocolRunHeader({
display="grid"
gridTemplateColumns="4fr 6fr 4fr"
padding={SPACING.spacing8}
borderRadius={BORDERS.borderRadius4}
>
<LabeledValue
label={t('protocol_start')}
Expand Down
16 changes: 8 additions & 8 deletions app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -11,10 +11,10 @@ import {
import {
Flex,
DIRECTION_COLUMN,
BORDERS,
SPACING,
TYPOGRAPHY,
COLORS,
BORDERS,
JUSTIFY_SPACE_BETWEEN,
} from '@opentrons/components'

Expand Down Expand Up @@ -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(
Expand All @@ -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} />
Expand Down
8 changes: 4 additions & 4 deletions app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')}
Expand All @@ -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')}
Expand Down Expand Up @@ -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')}
Expand All @@ -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')}
Expand Down
1 change: 1 addition & 0 deletions app/src/organisms/LabwareDetails/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
}
`
Expand Down
2 changes: 2 additions & 0 deletions app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
DIRECTION_COLUMN,
JUSTIFY_SPACE_BETWEEN,
COLORS,
BORDERS,
TYPOGRAPHY,
SPACING,
JUSTIFY_END,
Expand Down Expand Up @@ -169,6 +170,7 @@ export const MagneticModuleSlideout = (
fontWeight={TYPOGRAPHY.fontWeightRegular}
fontSize={TYPOGRAPHY.fontSizeP}
padding={SPACING.spacing16}
borderRadius={BORDERS.borderRadius4}
>
<Flex
flexDirection={DIRECTION_COLUMN}
Expand Down
4 changes: 2 additions & 2 deletions app/src/pages/RunSummary/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import {
ALIGN_CENTER,
ALIGN_FLEX_START,
ALIGN_STRETCH,
Btn,
BORDERS,
Btn,
COLORS,
DIRECTION_COLUMN,
DIRECTION_ROW,
Expand Down Expand Up @@ -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};
Expand Down
3 changes: 2 additions & 1 deletion components/src/hardware-sim/Pipette/PipetteRender.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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`,
},
Expand Down
Loading