From 5be88738048b77fc09b6ac679ebe0bee9dbe7c67 Mon Sep 17 00:00:00 2001 From: Brent Hagen Date: Fri, 15 Dec 2023 13:51:38 -0500 Subject: [PATCH] refactor(components): adjust BaseDeck styling adjusts BaseDeck styling of slot labels, staging area slot clip positioning, and colors to match design system deck map closes RAUT-902, RAUT-861 --- .../src/hardware-sim/BaseDeck/BaseDeck.tsx | 11 ++++--- .../BaseDeck/StagingAreaFixture.tsx | 32 +++++++++---------- .../BaseDeck/WasteChuteFixture.tsx | 6 ++-- .../BaseDeck/WasteChuteStagingAreaFixture.tsx | 14 ++++---- .../hardware-sim/DeckConfigurator/index.tsx | 2 +- .../__tests__/LocationIcon.test.tsx | 2 +- .../src/molecules/LocationIcon/index.tsx | 20 +++--------- .../src/components/DeckSetup/index.tsx | 3 +- 8 files changed, 41 insertions(+), 49 deletions(-) diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx index 3de5dfb5071..2cf40694da5 100644 --- 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 ? ( 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} /> ))} @@ -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 index 107da94b8c2..600d4bfbd6f 100644 --- a/components/src/hardware-sim/BaseDeck/StagingAreaFixture.tsx +++ b/components/src/hardware-sim/BaseDeck/StagingAreaFixture.tsx @@ -54,10 +54,10 @@ export function StagingAreaFixture( , , - , - , - , - + , + , + , + ), cutoutB3: ( @@ -70,10 +70,10 @@ export function StagingAreaFixture( , , - , - , - , - + , + , + , + ), cutoutC3: ( @@ -86,10 +86,10 @@ export function StagingAreaFixture( , , - , - , - , - + , + , + , + ), cutoutD3: ( @@ -102,10 +102,10 @@ export function StagingAreaFixture( - , - , - , - + , + , + , + ), } diff --git a/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx b/components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx index 9f562731b72..0928429edd7 100644 --- 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 { deckDefinition: DeckDefinition moduleType?: ModuleType fixtureBaseColor?: React.SVGProps['fill'] - slotClipColor?: React.SVGProps['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} /> diff --git a/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx b/components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx index 564db96c5fb..c75effcfa50 100644 --- 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['fill'] slotClipColor?: React.SVGProps['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} /> - , - , - , - + , + , + , + ) diff --git a/components/src/hardware-sim/DeckConfigurator/index.tsx b/components/src/hardware-sim/DeckConfigurator/index.tsx index 374c4d39ef9..f592b76d489 100644 --- 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 index 47f659d841d..785304a7c96 100644 --- 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 index 42dc1e71632..4bb33b3ca34 100644 --- 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 index f826e695462..a69b2189f35 100644 --- 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} /> ))}