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

refactor(app): border radius overrides feedback #14680

Merged
merged 5 commits into from
Mar 18, 2024
Merged

refactor(app): border radius overrides feedback #14680

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
afc2cc0
borderRadius2 fixes
mjhuff Mar 18, 2024
54615ee
borderRadius8 fixes
mjhuff Mar 18, 2024
c6790e2
borderRadius16 fixes
mjhuff Mar 18, 2024
47128e5
feedback
mjhuff Mar 18, 2024
35e4e25
mel wants this as BR4
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
4 changes: 2 additions & 2 deletions app/src/atoms/MenuList/OverflowBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<typeof Btn>,
Expand All @@ -13,7 +13,7 @@ export const OverflowBtn: (
return (
<Btn
css={css`
border-radius: ${SPACING.spacing4};
border-radius: ${BORDERS.borderRadius8};
max-height: ${SPACING.spacing32};

&:hover {
Expand Down
4 changes: 2 additions & 2 deletions app/src/molecules/ToggleGroup/useToggleGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,12 @@ const BUTTON_GROUP_STYLES = css`
}

button:first-child {
border-radius: ${BORDERS.borderRadius4} 0 0 ${BORDERS.borderRadius8};
border-radius: ${BORDERS.borderRadius8} 0 0 ${BORDERS.borderRadius8};
border-right: none;
}

button:last-child {
border-radius: 0 ${BORDERS.borderRadius4} ${BORDERS.borderRadius8} 0;
border-radius: 0 ${BORDERS.borderRadius8} ${BORDERS.borderRadius8} 0;
border-left: none;
}
`
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 @@ -216,7 +216,7 @@ export function AddFixtureModal({
justifyContent={JUSTIFY_SPACE_BETWEEN}
padding={`${SPACING.spacing8} ${SPACING.spacing16}`}
backgroundColor={COLORS.grey20}
borderRadius={BORDERS.borderRadius8}
borderRadius={BORDERS.borderRadius16}
>
<StyledText css={TYPOGRAPHY.pSemiBold}>
{fixtureDisplayName}
Expand Down Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion app/src/organisms/Navigation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};

Expand Down
2 changes: 1 addition & 1 deletion app/src/organisms/ProtocolSetupLabware/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -547,7 +547,7 @@ function RowLabware({
<Flex
alignItems={ALIGN_CENTER}
backgroundColor={COLORS.grey35}
borderRadius={BORDERS.borderRadius16}
borderRadius={BORDERS.borderRadius8}
padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
gridGap={SPACING.spacing32}
>
Expand Down
2 changes: 1 addition & 1 deletion app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`}
Expand Down
4 changes: 2 additions & 2 deletions app/src/organisms/TaskList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ function SubTask({
? BORDERS.activeLineBorder
: `1px solid ${COLORS.grey30}`
}
borderRadius={BORDERS.borderRadius4}
borderRadius={BORDERS.borderRadius8}
gridGap={SPACING.spacing24}
width="100%"
>
Expand Down Expand Up @@ -366,7 +366,7 @@ function Task({
border={
isActiveTask && !isTaskOpen ? BORDERS.activeLineBorder : undefined
}
borderRadius={BORDERS.borderRadius4}
borderRadius={BORDERS.borderRadius8}
width="100%"
>
<Flex
Expand Down
2 changes: 1 addition & 1 deletion app/src/pages/Devices/RobotSettings/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export function RobotSettings(): JSX.Element | null {
<Box minWidth={SIZE_6} height="max-content" padding={SPACING.spacing16}>
<Flex
backgroundColor={COLORS.white}
borderRadius={BORDERS.borderRadius4}
borderRadius={BORDERS.borderRadius8}
flexDirection={DIRECTION_COLUMN}
marginBottom={SPACING.spacing16}
minHeight="calc(100vh - 3.5rem)"
Expand Down
2 changes: 1 addition & 1 deletion app/src/pages/Labware/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export function Labware(): JSX.Element {
<Flex
flexDirection={DIRECTION_ROW}
alignItems={ALIGN_CENTER}
borderRadius={BORDERS.borderRadius4}
borderRadius={BORDERS.borderRadius8}
marginLeft={SPACING.spacing8}
css={SORT_BY_BUTTON_STYLE}
onClick={toggleSetShowSortByMenu}
Expand Down
2 changes: 1 addition & 1 deletion app/src/pages/ProtocolDetails/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ const Summary = ({ author, description, date }: SummaryProps): JSX.Element => {
</StyledText>
<Flex
backgroundColor={COLORS.grey35}
borderRadius={BORDERS.borderRadius4}
borderRadius={BORDERS.borderRadius8}
marginTop={SPACING.spacing24}
width="max-content"
padding={`${SPACING.spacing8} ${SPACING.spacing12}`}
Expand Down
6 changes: 3 additions & 3 deletions components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ 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: 2px`)
expect(checkBoxIcon).toHaveStyle(
`justify-content: ${String(JUSTIFY_CENTER)}`
)
Expand Down Expand Up @@ -82,7 +82,7 @@ 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: 2px`)
mjhuff marked this conversation as resolved.
Show resolved Hide resolved
expect(checkBoxIcon).toHaveStyle(
`justify-content: ${String(JUSTIFY_CENTER)}`
)
Expand All @@ -97,7 +97,7 @@ 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: 2px`)
mjhuff marked this conversation as resolved.
Show resolved Hide resolved
expect(checkBoxIcon).toHaveStyle(
`justify-content: ${String(JUSTIFY_CENTER)}`
)
Expand Down
4 changes: 2 additions & 2 deletions components/src/atoms/CheckboxField/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};

Expand All @@ -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};

Expand Down
Loading