From ddc55e04050c95e0daad73e0a244412ee4dca125 Mon Sep 17 00:00:00 2001 From: shiyaochen Date: Mon, 23 Sep 2024 16:48:58 -0400 Subject: [PATCH] feat(protocol-designer): update icons for steps re AUTH-799 --- components/src/icons/icon-data.ts | 25 +++++++++++++++++++ protocol-designer/src/form-types.ts | 10 ++++---- .../Timeline/TerminalItemStep.tsx | 6 ++++- 3 files changed, 35 insertions(+), 6 deletions(-) diff --git a/components/src/icons/icon-data.ts b/components/src/icons/icon-data.ts index dfdc8b1e4e4..0ed3ae79d8e 100644 --- a/components/src/icons/icon-data.ts +++ b/components/src/icons/icon-data.ts @@ -409,6 +409,11 @@ export const ICON_DATA_BY_NAME = { 'M15.5 16v-2.9l8.5 5-8.5 4.9v-3c-1.3 0-2.4-.3-3.4-.7-1.1-.4-2.1-1-2.9-1.6-1.7-1.2-3-2.3-4.8-3.1-1.2-.5-2.5-.8-4.4-.8V9.3c1.9 0 3.2-.3 4.4-.8 1.7-.7 3.1-1.9 4.8-3.1.8-.6 1.8-1.2 2.9-1.6 1-.4 2.2-.7 3.4-.7V.4l8.5 5-8.5 4.9V7.1c-1.1.1-1.9.3-2.7.7-.7.3-1.4.8-2.1 1.4-1 .7-2.1 1.6-3.5 2.3 1.4.8 2.5 1.6 3.5 2.3.8.6 1.4 1 2.1 1.4.8.5 1.6.7 2.7.8z', viewBox: '0 0 24 24', }, + 'ot-end-arrow': { + path: + 'M17.334 10V0H15.6673V10H17.334ZM5.66732 10L6.85482 8.83333L3.85482 5.83333H14.0007V4.16667H3.85482L6.83399 1.16667L5.66732 0L0.667318 5L5.66732 10Z', + viewBox: '0 0 18 10', + }, 'ot-file': { path: 'M20.907 0H3.803C3.334.044 3 .356 3 .822c0 1.822.022 3.645.022 5.467v11.355c0 1.823-.022 3.645-.022 5.467 0 .467.334.8.803.822H7.37c2.051 0 3.88.023 6.199 0 .736 0 1.383-.289 1.918-.777.535-.49 1.048-.956 1.538-1.49a201.554 201.554 0 0 0 2.989-3.177c.379-.4.713-.822 1.025-1.267a3.17 3.17 0 0 0 .58-1.844c.045-4.867.045-9.711.067-14.578.022-.444-.312-.778-.78-.8zm-2.074 16.444c-1.115.312-2.275.312-3.434.334-.424 0-.647.155-.736.555-.045.2-.023.867-.023 1.09-.066 1-.044 1.6-.178 2.6-.134.866-.624 1.51-1.762 1.488-2.586-.022-8.005 0-8.161 0V1.556h15.61v13.222c.022 1-.536 1.466-1.316 1.666z', @@ -448,11 +453,31 @@ export const ICON_DATA_BY_NAME = { 'M7.8 2.4v10.3H3.4V2.4h4.4zM5.6 21.5L.4 12.7h10.3l-5.1 8.8zm10.5.1V11.2h4.4v10.4h-4.4zm2.3-19.2l5.2 8.8H13.2l5.2-8.8z', viewBox: '0 0 24 24', }, + 'ot-move': { + path: + 'M10.303 19.7735L7.19432 16.6648L8.01273 15.8464L9.72551 17.5591L9.72551 12.3572H10.8829L10.8829 17.5567L12.5933 15.8464L13.4117 16.6648L10.303 19.7735Z M8.02171 9.49601L2.82221 9.49601L4.53256 7.78566L3.71415 6.96725L0.605469 10.0759L3.71415 13.1846L4.53256 12.3662L2.81978 10.6534L8.02171 10.6534V9.49601Z M9.66329 7.92348L9.66329 2.65493L7.88357 4.43465L7.06516 3.61624L10.1738 0.507561L13.2825 3.61624L12.4641 4.43465L10.6818 2.65236L10.6818 7.92348L9.66329 7.92348Z M12.4561 10.7853L17.6556 10.7853L15.9449 12.496L16.7633 13.3144L19.872 10.2057L16.7633 7.09706L15.9449 7.91547L17.6574 9.62792H12.4561V10.7853Z', + viewBox: '0 0 20 20', + }, + 'ot-new-mix': { + path: + 'M3.66927 9.83561V3.85645L1.52344 6.00228L0.335938 4.83561L4.5026 0.668945L8.66927 4.83561L7.48177 6.00228L5.33594 3.85645V9.83561H3.66927ZM9.5026 17.3356L5.33594 13.1689L6.52344 12.0023L8.66927 14.1481V8.16894H10.3359V14.1481L12.4818 12.0023L13.6693 13.1689L9.5026 17.3356Z', + viewBox: '0 0 14 18', + }, + 'ot-new-transfer': { + path: + 'M3.33333 12.1673C3.33333 10.5423 3.89931 9.16384 5.03125 8.0319C6.16319 6.89996 7.54167 6.33398 9.16667 6.33398C10.6528 6.33398 11.9479 6.82357 13.0521 7.80273C14.1562 8.7819 14.7917 10.0076 14.9583 11.4798L16.3333 10.1673L17.5 11.334L14.1667 14.6673L10.8333 11.334L12.0208 10.1673L13.25 11.3965C13.0556 10.4104 12.5764 9.59787 11.8125 8.95898C11.0486 8.3201 10.1667 8.00065 9.16667 8.00065C8.01389 8.00065 7.03125 8.4069 6.21875 9.2194C5.40625 10.0319 5 11.0145 5 12.1673L5 14.6673L3.33333 14.6673L3.33333 12.1673Z', + viewBox: '0 0 17 18', + }, 'ot-run': { path: 'M18.83 11.58V1.89a.6.6 0 0 0-.61-.62H5a.64.64 0 0 0-.62.64v17.34a.62.62 0 0 0 .62.64h5.45a6.06 6.06 0 1 0 8.41-8.31zm-9.36 5.09a6 6 0 0 0 .4 2.1H5.54V2.48h12.14V11a6 6 0 0 0-8.2 5.66zm4.61 2.81v-5.64l3.72 2.76z', viewBox: '0 0 24 24', }, + 'ot-start-arrow': { + path: + 'M0.166748 10V0H1.83341V10H0.166748ZM11.8334 10L10.6459 8.83333L13.6459 5.83333H3.50008V4.16667H13.6459L10.6667 1.16667L11.8334 0L16.8334 5L11.8334 10Z', + viewBox: '0 0 17 10', + }, 'ot-spinner': { path: 'M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z', diff --git a/protocol-designer/src/form-types.ts b/protocol-designer/src/form-types.ts index d091efdae5c..848db25ae54 100644 --- a/protocol-designer/src/form-types.ts +++ b/protocol-designer/src/form-types.ts @@ -146,11 +146,11 @@ export type StepType = export const stepIconsByType: Record = { comment: 'comment', - moveLabware: 'move-xy', - moveLiquid: 'ot-transfer', - mix: 'ot-mix', - pause: 'pause', - manualIntervention: 'pause', + moveLabware: 'ot-move', + moveLiquid: 'ot-new-transfer', + mix: 'ot-new-mix', + pause: 'pause-circle', + manualIntervention: 'pause-circle', magnet: 'ot-magnet-v2', temperature: 'ot-temperature-v2', thermocycler: 'ot-thermocycler', diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx index 8f1fbc0dd9a..79989a9f999 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TerminalItemStep.tsx @@ -18,6 +18,7 @@ import { } from '../../../../components/modals/ConfirmDeleteModal' import { StepContainer } from './StepContainer' +import type { IconName } from '@opentrons/components' import type { SelectTerminalItemAction, HoverOnTerminalItemAction, @@ -47,6 +48,9 @@ export function TerminalItemStep(props: TerminalItemStepProps): JSX.Element { const onMouseLeave = (): HoverOnTerminalItemAction => dispatch(stepsActions.hoverOnTerminalItem(null)) + const handleIconName = (): IconName => + title === 'Starting deck state' ? 'ot-start-arrow' : 'ot-end-arrow' + const { confirm, showConfirmation, cancel } = useConditionalConfirm( selectItem, currentFormIsPresaved || formHasChanges @@ -70,7 +74,7 @@ export function TerminalItemStep(props: TerminalItemStepProps): JSX.Element {