Skip to content

Commit

Permalink
fix styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@koji
koji committed Oct 24, 2024
1 parent 5bd0b5c commit b6c84e3
Show file tree
Hide file tree
Showing 5 changed files with 166 additions and 58 deletions.
61 changes: 37 additions & 24 deletions protocol-designer/src/organisms/MaterialsListModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
DIRECTION_ROW,
Flex,
InfoScreen,
JUSTIFY_SPACE_BETWEEN,
LiquidIcon,
ListItem,
ListItemDescriptor,
Expand All @@ -32,13 +31,14 @@ import { getInitialDeckSetup } from '../../step-forms/selectors'
import { getTopPortalEl } from '../../components/portals/TopPortal'
import { selectors as labwareIngredSelectors } from '../../labware-ingred/selectors'
import { HandleEnter } from '../../atoms/HandleEnter'
import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'

import type { AdditionalEquipmentName } from '@opentrons/step-generation'
import type { LabwareOnDeck, ModuleOnDeck } from '../../step-forms'
import type { OrderedLiquids } from '../../labware-ingred/types'

// ToDo (kk:09/04/2024) this should be removed when break-point is set up
const MODAL_MIN_WIDTH = '36.1875rem'
const MODAL_MIN_WIDTH = '37.125rem'

export interface FixtureInList {
name: AdditionalEquipmentName
Expand Down Expand Up @@ -82,6 +82,7 @@ export function MaterialsListModal({
title={t('materials_list')}
marginLeft="0rem"
minWidth={MODAL_MIN_WIDTH}
childrenPadding={SPACING.spacing24}
>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing24}>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
Expand Down Expand Up @@ -130,7 +131,11 @@ export function MaterialsListModal({
<ListItemDescriptor
type="large"
description={
<DeckInfoLabel deckLabel={formatLocation(hw.slot)} />
<Flex minWidth="13.75rem">
<DeckInfoLabel
deckLabel={formatLocation(hw.slot)}
/>
</Flex>
}
content={
<Flex
Expand Down Expand Up @@ -189,9 +194,15 @@ export function MaterialsListModal({
<ListItemDescriptor
type="large"
description={
<DeckInfoLabel deckLabel={deckLabelSlot} />
<Flex minWidth="13.75rem">
<DeckInfoLabel deckLabel={deckLabelSlot} />
</Flex>
}
content={
<StyledText desktopStyle="bodyDefaultRegular">
{lw.def.metadata.displayName}
</StyledText>
}
content={lw.def.metadata.displayName}
/>
</ListItem>
)
Expand Down Expand Up @@ -246,29 +257,31 @@ export function MaterialsListModal({
} else {
return (
<ListItem type="noActive" key={`liquid_${id}`}>
<Flex
justifyContent={JUSTIFY_SPACE_BETWEEN}
width="100%"
padding={SPACING.spacing12}
>
<Flex
alignItems={ALIGN_CENTER}
gridGap={SPACING.spacing8}
flex="1"
>
<LiquidIcon color={liquid.displayColor ?? ''} />
<StyledText desktopStyle="bodyDefaultRegular">
{liquid.name ?? t('n/a')}
</StyledText>
</Flex>

<Flex flex="1.27">
<ListItemDescriptor
type="large"
description={
<Flex
minWidth="13.75rem"
alignItems={ALIGN_CENTER}
gridGap={SPACING.spacing8}
width="13.75rem"
>
<LiquidIcon color={liquid.displayColor ?? ''} />
<StyledText
desktopStyle="bodyDefaultRegular"
css={LINE_CLAMP_TEXT_STYLE(3)}
>
{liquid.name ?? t('n/a')}
</StyledText>
</Flex>
}
content={
<Tag
text={`${totalVolume.toString()} uL`}
type="default"
/>
</Flex>
</Flex>
}
/>
</ListItem>
)
}
Expand Down
83 changes: 69 additions & 14 deletions protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { useTranslation } from 'react-i18next'

import {
Flex,
StyledText,
Btn,
COLORS,
DIRECTION_COLUMN,
SPACING,
Flex,
JUSTIFY_SPACE_BETWEEN,
TYPOGRAPHY,
ListItem,
ListItemDescriptor,
SPACING,
StyledText,
TYPOGRAPHY,
} from '@opentrons/components'
import { getPipetteSpecsV2, FLEX_ROBOT_TYPE } from '@opentrons/shared-data'

Expand Down Expand Up @@ -93,34 +94,88 @@ export function InstrumentsInfo({
<ListItem type="noActive" key={`ProtocolOverview_robotType`}>
<ListItemDescriptor
type="large"
description={t('robotType')}
description={
<Flex minWidth="13.75rem">
{' '}
<StyledText
desktopStyle="bodyDefaultRegular"
color={COLORS.grey60}
>
{t('robotType')}
</StyledText>
</Flex>
}
content={
robotType === FLEX_ROBOT_TYPE
? t('shared:opentrons_flex')
: t('shared:ot2')
<StyledText desktopStyle="bodyDefaultRegular">
{robotType === FLEX_ROBOT_TYPE
? t('shared:opentrons_flex')
: t('shared:ot2')}
</StyledText>
}
/>
</ListItem>
<ListItem type="noActive" key={`ProtocolOverview_left`}>
<ListItemDescriptor
type="large"
description={t('left_pip')}
content={pipetteInfo(leftPipette)}
description={
<Flex minWidth="13.75rem">
{' '}
<StyledText
desktopStyle="bodyDefaultRegular"
color={COLORS.grey60}
>
{t('left_pip')}
</StyledText>
</Flex>
}
content={
<StyledText desktopStyle="bodyDefaultRegular">
{pipetteInfo(leftPipette)}
</StyledText>
}
/>
</ListItem>
<ListItem type="noActive" key={`ProtocolOverview_right`}>
<ListItemDescriptor
type="large"
description={t('right_pip')}
content={pipetteInfo(rightPipette)}
description={
<Flex minWidth="13.75rem">
{' '}
<StyledText
desktopStyle="bodyDefaultRegular"
color={COLORS.grey60}
>
{t('right_pip')}
</StyledText>
</Flex>
}
content={
<StyledText desktopStyle="bodyDefaultRegular">
{pipetteInfo(rightPipette)}
</StyledText>
}
/>
</ListItem>
{robotType === FLEX_ROBOT_TYPE ? (
<ListItem type="noActive" key={`ProtocolOverview_gripper`}>
<ListItemDescriptor
type="large"
description={t('extension')}
content={isGripperAttached ? t('gripper') : t('na')}
description={
<Flex minWidth="13.75rem">
{' '}
<StyledText
desktopStyle="bodyDefaultRegular"
color={COLORS.grey60}
>
{t('extension')}
</StyledText>
</Flex>
}
content={
<StyledText desktopStyle="bodyDefaultRegular">
{isGripperAttached ? t('gripper') : t('na')}
</StyledText>
}
/>
</ListItem>
) : null}
Expand Down
17 changes: 14 additions & 3 deletions protocol-designer/src/pages/ProtocolOverview/LiquidDefinitions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,19 +37,30 @@ export function LiquidDefinitions({
<ListItemDescriptor
type="large"
description={
<Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
<Flex
alignItems={ALIGN_CENTER}
gridGap={SPACING.spacing8}
minWidth="13.75rem"
width="13.75rem"
>
<LiquidIcon color={liquid.displayColor} />
<StyledText
desktopStyle="bodyDefaultRegular"
overflowWrap="anywhere"
id="liquid-name"
css={LINE_CLAMP_TEXT_STYLE(3)}
>
{liquid.name}
</StyledText>
</Flex>
}
content={liquid.description ?? t('na')}
content={
<StyledText
desktopStyle="bodyDefaultRegular"
css={LINE_CLAMP_TEXT_STYLE(10)}
>
{liquid.description ?? t('na')}
</StyledText>
}
/>
</ListItem>
))
Expand Down
49 changes: 38 additions & 11 deletions protocol-designer/src/pages/ProtocolOverview/ProtocolMetadata.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { useTranslation } from 'react-i18next'
import {
Flex,
Btn,
COLORS,
DIRECTION_COLUMN,
SPACING,
Flex,
JUSTIFY_SPACE_BETWEEN,
TYPOGRAPHY,
StyledText,
ListItem,
ListItemDescriptor,
Btn,
SPACING,
StyledText,
TYPOGRAPHY,
} from '@opentrons/components'

import { BUTTON_LINK_STYLE } from '../../atoms'
Expand Down Expand Up @@ -62,19 +63,45 @@ export function ProtocolMetadata({
<ListItem type="noActive" key={`ProtocolOverview_${title}`}>
<ListItemDescriptor
type="large"
description={t(`${title}`)}
content={value ?? t('na')}
description={
<Flex minWidth="13.75rem">
<StyledText
desktopStyle="bodyDefaultRegular"
color={COLORS.grey60}
>
{t(`${title}`)}
</StyledText>
</Flex>
}
content={
<StyledText desktopStyle="bodyDefaultRegular">
{value ?? t('na')}
</StyledText>
}
/>
</ListItem>
)
})}
<ListItem type="noActive" key="ProtocolOverview_robotVersion">
<ListItemDescriptor
type="large"
description={t('required_app_version')}
content={t('app_version', {
version: REQUIRED_APP_VERSION,
})}
description={
<Flex minWidth="13.75rem">
<StyledText
desktopStyle="bodyDefaultRegular"
color={COLORS.grey60}
>
{t('required_app_version')}
</StyledText>
</Flex>
}
content={
<StyledText desktopStyle="bodyDefaultRegular">
{t('app_version', {
version: REQUIRED_APP_VERSION,
})}
</StyledText>
}
/>
</ListItem>
</Flex>
Expand Down
14 changes: 8 additions & 6 deletions protocol-designer/src/pages/ProtocolOverview/StepsInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,14 @@ export function StepsInfo({ savedStepForms }: StepsInfoProps): JSX.Element {
<ListItemDescriptor
type="large"
description={
<StyledText
desktopStyle="bodyDefaultRegular"
color={COLORS.grey60}
>
{t('number_of_steps')}
</StyledText>
<Flex minWidth="13.75rem">
<StyledText
desktopStyle="bodyDefaultRegular"
color={COLORS.grey60}
>
{t('number_of_steps')}
</StyledText>
</Flex>
}
content={
<StyledText desktopStyle="bodyDefaultRegular">
Expand Down

0 comments on commit b6c84e3

Please sign in to comment.