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}
                     />
                   ))}