feat(protocol-designer): update icons for steps

re AUTH-799
Opentrons · Sep 23, 2024 · ddc55e0 · ddc55e0
1 parent dcf80f3
commit ddc55e0
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git 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
@@ -146,11 +146,11 @@ export type StepType =
 
 export const stepIconsByType: Record<StepType, IconName> = {
   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
@@ -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 {
       <StepContainer
         {...{
           stepId: `TerminalItem_${id}`,
-          iconName: 'arrow-right',
+          iconName: handleIconName(),
           hovered,
           selected,
           title,