refactor(components): adjust BaseDeck styling (#14219)

adjusts BaseDeck styling of slot labels, staging area slot clip positioning, and colors to match design system deck map closes RAUT-902, RAUT-861
Opentrons · Dec 15, 2023 · f5a99be · f5a99be
1 parent 5d4845f
commit f5a99be
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 49 deletions.
diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx
@@ -71,6 +71,7 @@ interface BaseDeckProps {
  deckLayerBlocklist?: string[]
  showExpansion?: boolean
  lightFill?: string
+ mediumFill?: string
  darkFill?: string
  children?: React.ReactNode
  showSlotLabels?: boolean
@@ -86,7 +87,8 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
  modulesOnDeck = [],
  labwareOnDeck = [],
  lightFill = COLORS.light1,
- darkFill = COLORS.darkGreyEnabled,
+ mediumFill = COLORS.grey2,
+ darkFill = COLORS.darkBlack70,
  deckLayerBlocklist = [],
  deckConfig,
  showExpansion = true,
@@ -137,7 +139,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
  {showSlotLabels ? (
  <SlotLabels
  robotType={robotType}
- color={darkFill}
+ color={COLORS.darkBlackEnabled}
  show4thColumn={
  stagingAreaFixtures.length > 0 ||
  wasteChuteStagingAreaFixtures.length > 0
@@ -177,7 +179,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
  trashIconColor={lightFill}
  // TODO(bh, 2023-10-09): typeguard fixture location
  trashCutoutId={fixture.cutoutId as TrashCutoutId}
- backgroundColor={darkFill}
+ backgroundColor={mediumFill}
  />
  </React.Fragment>
  ))}
@@ -187,8 +189,8 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
  // TODO(bh, 2023-10-09): typeguard fixture location
  cutoutId={fixture.cutoutId as typeof WASTE_CHUTE_CUTOUT}
  deckDefinition={deckDef}
- slotClipColor={darkFill}
  fixtureBaseColor={lightFill}
+ wasteChuteColor={mediumFill}
  />
  ))}
  {wasteChuteStagingAreaFixtures.map(fixture => (
@@ -199,6 +201,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
  deckDefinition={deckDef}
  slotClipColor={darkFill}
  fixtureBaseColor={lightFill}
+ wasteChuteColor={mediumFill}
  />
  ))}
  </>

diff --git a/components/src/hardware-sim/BaseDeck/StagingAreaFixture.tsx b/components/src/hardware-sim/BaseDeck/StagingAreaFixture.tsx
@@ -54,10 +54,10 @@ export function StagingAreaFixture(
  <SlotClip d="M326,329.8v-10.5h10.6" stroke={slotClipColor} />,
  <SlotClip d="M457.8,398.9V409H447" stroke={slotClipColor} />,
  <SlotClip d="M457.8,329.8v-10.7H447" stroke={slotClipColor} />
- <SlotClip d="M488,398.9v10.1h10.8" stroke={slotClipColor} />,
- <SlotClip d="M488,329.8v-10.5h10.6" stroke={slotClipColor} />,
- <SlotClip d="M619.8,398.9v10.1H609" stroke={slotClipColor} />,
- <SlotClip d="M619.8,329.8v-10.7H609" stroke={slotClipColor} />
+ <SlotClip d="M490,398.9v10.1h10.8" stroke={slotClipColor} />,
+ <SlotClip d="M490,329.8v-10.5h10.6" stroke={slotClipColor} />,
+ <SlotClip d="M621.8,398.9v10.1h-10.8" stroke={slotClipColor} />,
+ <SlotClip d="M621.8,329.8v-10.7h-10.8" stroke={slotClipColor} />
  </>
  ),
  cutoutB3: (
@@ -70,10 +70,10 @@ export function StagingAreaFixture(
  <SlotClip d="M326,222.8v-10.5h10.6" stroke={slotClipColor} />,
  <SlotClip d="M457.8,291.9V302H447" stroke={slotClipColor} />,
  <SlotClip d="M457.8,222.8v-10.7H447" stroke={slotClipColor} />
- <SlotClip d="M488,291.9v10.1h10.8" stroke={slotClipColor} />,
- <SlotClip d="M488,222.8v-10.5h10.6" stroke={slotClipColor} />,
- <SlotClip d="M619.8,291.9v10.1H609" stroke={slotClipColor} />,
- <SlotClip d="M619.8,222.8v-10.7H609" stroke={slotClipColor} />
+ <SlotClip d="M490,291.9v10.1h10.8" stroke={slotClipColor} />,
+ <SlotClip d="M490,222.8v-10.5h10.6" stroke={slotClipColor} />,
+ <SlotClip d="M621.8,291.9v10.1h-10.8" stroke={slotClipColor} />,
+ <SlotClip d="M621.8,222.8v-10.7h-10.8" stroke={slotClipColor} />
  </>
  ),
  cutoutC3: (
@@ -86,10 +86,10 @@ export function StagingAreaFixture(
  <SlotClip d="M326,115.8v-10.5h10.6" stroke={slotClipColor} />,
  <SlotClip d="M457.8,185v10.1H447" stroke={slotClipColor} />,
  <SlotClip d="M457.8,115.8v-10.7H447" stroke={slotClipColor} />
- <SlotClip d="M488,185v10.1h10.8" stroke={slotClipColor} />,
- <SlotClip d="M488,115.8v-10.5h10.6" stroke={slotClipColor} />,
- <SlotClip d="M619.8,185v10.1H609" stroke={slotClipColor} />,
- <SlotClip d="M619.8,115.8v-10.7H609" stroke={slotClipColor} />
+ <SlotClip d="M490,185v10.1h10.8" stroke={slotClipColor} />,
+ <SlotClip d="M490,115.8v-10.5h10.6" stroke={slotClipColor} />,
+ <SlotClip d="M621.8,185v10.1h-10.8" stroke={slotClipColor} />,
+ <SlotClip d="M621.8,115.8v-10.7h-10.8" stroke={slotClipColor} />
  </>
  ),
  cutoutD3: (
@@ -102,10 +102,10 @@ export function StagingAreaFixture(
  <SlotClip d="M326,8.8V-1.7h10.6" stroke={slotClipColor} />
  <SlotClip d="M457.8,77.9V88H447" stroke={slotClipColor} />
  <SlotClip d="M457.8,8.8V-1.9H447" stroke={slotClipColor} />
- <SlotClip d="M488,77.9v10.1h10.8" stroke={slotClipColor} />,
- <SlotClip d="M488,8.8v-10.5h10.6" stroke={slotClipColor} />,
- <SlotClip d="M619.8,77.9v10.1H609" stroke={slotClipColor} />,
- <SlotClip d="M619.8,8.8v-10.7H609" stroke={slotClipColor} />
+ <SlotClip d="M490,77.9v10.1h10.8" stroke={slotClipColor} />,
+ <SlotClip d="M490,8.8v-10.5h10.6" stroke={slotClipColor} />,
+ <SlotClip d="M621.8,77.9v10.1h-10.8" stroke={slotClipColor} />,
+ <SlotClip d="M621.8,8.8v-10.7h-10.8" stroke={slotClipColor} />
  </>
  ),
  }

diff --git a/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx b/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx
@@ -21,7 +21,7 @@ interface WasteChuteFixtureProps extends React.SVGProps<SVGGElement> {
  deckDefinition: DeckDefinition
  moduleType?: ModuleType
  fixtureBaseColor?: React.SVGProps<SVGPathElement>['fill']
- slotClipColor?: React.SVGProps<SVGPathElement>['stroke']
+ wasteChuteColor?: string
  showExtensions?: boolean
 }
 
@@ -32,7 +32,7 @@ export function WasteChuteFixture(
  cutoutId,
  deckDefinition,
  fixtureBaseColor = COLORS.light1,
- slotClipColor = COLORS.darkGreyEnabled,
+ wasteChuteColor = COLORS.grey2,
  ...restProps
  } = props
 
@@ -60,7 +60,7 @@ export function WasteChuteFixture(
  fill={fixtureBaseColor}
  />
  <WasteChute
- backgroundColor={slotClipColor}
+ backgroundColor={wasteChuteColor}
  wasteIconColor={fixtureBaseColor}
  />
  </g>

diff --git a/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx b/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx
@@ -16,6 +16,7 @@ interface WasteChuteStagingAreaFixtureProps
  moduleType?: ModuleType
  fixtureBaseColor?: React.SVGProps<SVGPathElement>['fill']
  slotClipColor?: React.SVGProps<SVGPathElement>['stroke']
+ wasteChuteColor?: string
  showExtensions?: boolean
 }
 
@@ -26,7 +27,8 @@ export function WasteChuteStagingAreaFixture(
  cutoutId,
  deckDefinition,
  fixtureBaseColor = COLORS.light1,
- slotClipColor = COLORS.darkGreyEnabled,
+ slotClipColor = COLORS.darkBlack70,
+ wasteChuteColor = COLORS.grey2,
  ...restProps
  } = props
 
@@ -53,13 +55,13 @@ export function WasteChuteStagingAreaFixture(
  d="M314.8,96.1h329.9c2.4,0,4.3-1.9,4.3-4.3V-5.6c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,94.2,312.4,96.1,314.8,96.1z"
  fill={fixtureBaseColor}
  />
- <SlotClip d="M488,77.9v10.1h10.8" stroke={slotClipColor} />,
- <SlotClip d="M488,8.8v-10.5h10.6" stroke={slotClipColor} />,
- <SlotClip d="M619.8,77.9v10.1H609" stroke={slotClipColor} />,
- <SlotClip d="M619.8,8.8v-10.7H609" stroke={slotClipColor} />
+ <SlotClip d="M490,77.9v10.1h10.8" stroke={slotClipColor} />,
+ <SlotClip d="M490,8.8v-10.5h10.6" stroke={slotClipColor} />,
+ <SlotClip d="M621.8,77.9v10.1h-10.8" stroke={slotClipColor} />,
+ <SlotClip d="M621.8,8.8v-10.7h-10.8" stroke={slotClipColor} />
  <WasteChute
  wasteIconColor={fixtureBaseColor}
- backgroundColor={slotClipColor}
+ backgroundColor={wasteChuteColor}
  />
  </g>
  )

diff --git a/components/src/hardware-sim/DeckConfigurator/index.tsx b/components/src/hardware-sim/DeckConfigurator/index.tsx
@@ -38,7 +38,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
  handleClickAdd,
  handleClickRemove,
  lightFill = COLORS.light1,
- darkFill = COLORS.darkGreyEnabled,
+ darkFill = COLORS.darkBlackEnabled,
  readOnly = false,
  showExpansion = true,
  children,

diff --git a/components/src/molecules/LocationIcon/__tests__/LocationIcon.test.tsx b/components/src/molecules/LocationIcon/__tests__/LocationIcon.test.tsx
@@ -21,7 +21,7 @@ describe('LocationIcon', () => {
  it('should render the proper styles', () => {
  const [{ getByTestId }] = render(props)
  const locationIcon = getByTestId('LocationIcon_A1')
- expect(locationIcon).toHaveStyle(`padding: ${SPACING.spacing2} 0.375rem`)
+ expect(locationIcon).toHaveStyle(`padding: ${SPACING.spacing4} 0.375rem`)
  expect(locationIcon).toHaveStyle('height: 2rem')
  expect(locationIcon).toHaveStyle('width: max-content')
  expect(locationIcon).toHaveStyle(`border: 2px solid ${COLORS.darkBlack100}`)

diff --git a/components/src/molecules/LocationIcon/index.tsx b/components/src/molecules/LocationIcon/index.tsx
@@ -4,13 +4,7 @@ import { css } from 'styled-components'
 import { Icon } from '../../icons'
 import { Flex, Text } from '../../primitives'
 import { ALIGN_CENTER } from '../../styles'
-import {
- BORDERS,
- COLORS,
- RESPONSIVENESS,
- SPACING,
- TYPOGRAPHY,
-} from '../../ui-style-constants'
+import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 
 import type { IconName } from '../../icons'
 import type { StyleProps } from '../../primitives'
@@ -40,19 +34,13 @@ const LOCATION_ICON_STYLE = css<{
  border: 2px solid ${props => props.color ?? COLORS.darkBlack100};
  border-radius: ${BORDERS.borderRadiusSize3};
  height: ${props => props.height ?? SPACING.spacing32};
- padding: ${SPACING.spacing2} 0.375rem;
  width: ${props => props.width ?? 'max-content'};
- @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
- padding: ${SPACING.spacing4}
- ${props => (props.slotName != null ? SPACING.spacing8 : SPACING.spacing6)};
- }
+ padding: ${SPACING.spacing4}
+ ${props => (props.slotName != null ? SPACING.spacing8 : SPACING.spacing6)};
 `
 
 const SLOT_NAME_TEXT_STYLE = css`
- ${TYPOGRAPHY.pSemiBold}
- @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
- ${TYPOGRAPHY.smallBodyTextBold}
- }
+ ${TYPOGRAPHY.smallBodyTextBold}
 `
 
 export function LocationIcon({

diff --git a/protocol-designer/src/components/DeckSetup/index.tsx b/protocol-designer/src/components/DeckSetup/index.tsx
@@ -112,7 +112,7 @@ interface ContentsProps {
 }
 
 const lightFill = COLORS.light1
-const darkFill = COLORS.darkGreyEnabled
+const darkFill = COLORS.darkBlack70
 
 export const DeckSetupContents = (props: ContentsProps): JSX.Element => {
  const {
@@ -631,7 +631,6 @@ export const DeckSetup = (): JSX.Element => {
  key={fixture.id}
  cutoutId={fixture.location as typeof WASTE_CHUTE_CUTOUT}
  deckDefinition={deckDef}
- slotClipColor={darkFill}
  fixtureBaseColor={lightFill}
  />
  ))}