From 775ec4b957d9e426e6ccfbc966b6cb5824089e80 Mon Sep 17 00:00:00 2001
From: Ian London <ianlondondu@gmail.com>
Date: Wed, 20 Mar 2019 17:10:27 -0400
Subject: [PATCH] feat(protocol-designer): update transfer form design (#3221)

* update Transfer form design
* expand use of i18n in PD forms
* add colon and capitalization by default for form component labels via CSS
---
 .../components/ConfigurePipette/ConfigForm.js |   2 +-
 components/src/forms/CheckboxField.js         |  12 +-
 components/src/forms/FormGroup.js             |   4 +-
 components/src/forms/InputField.js            |   6 +-
 components/src/forms/RadioGroup.js            |   7 +-
 components/src/forms/forms.css                |   5 +
 protocol-designer/src/components/FilePage.js  |  11 +-
 .../src/components/IngredientsList/index.js   |   3 +-
 .../LiquidPlacementForm.js                    |   4 +-
 .../components/LiquidsPage/LiquidEditForm.js  |   4 +-
 .../src/components/StepEditForm/ButtonRow.js  |   6 +-
 .../components/StepEditForm/StepEditForm.css  | 107 ++++++++-----
 .../StepEditForm/fields/BlowoutLocation.js    |   2 +-
 .../StepEditForm/fields/DisposalVolume.js     |  14 +-
 .../fields/FlowRate/FlowRateInput.js          |   9 +-
 .../StepEditForm/fields/Path/Path.js          |   2 +-
 .../components/StepEditForm/fields/Pipette.js |   3 +-
 .../StepEditForm/fields/TipPosition/index.js  |   2 +-
 .../components/StepEditForm/fields/Volume.js  |   7 +-
 .../fields/WellOrder/WellOrderInput.css       |   4 +
 .../fields/WellOrder/WellOrderModal.js        |   4 +-
 .../StepEditForm/fields/WellOrder/index.js    |  18 ++-
 .../WellSelection/WellSelectionInput.js       |   6 +-
 .../forms/MoveLiquid/SourceDestFields.js      | 150 +++++++++---------
 .../forms/MoveLiquid/SourceDestHeaders.js     |  60 +++++++
 .../StepEditForm/forms/MoveLiquid/index.js    |  97 ++++++++---
 .../src/components/forms/forms.css            |   4 -
 .../modals/FilePipettesModal/index.js         |   3 +-
 .../src/localization/en/application.json      |   5 +
 .../src/localization/en/form.json             |  39 +++--
 30 files changed, 384 insertions(+), 216 deletions(-)
 create mode 100644 protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestHeaders.js

diff --git a/app/src/components/ConfigurePipette/ConfigForm.js b/app/src/components/ConfigurePipette/ConfigForm.js
index 0981905d8c1..d73b0e84845 100644
--- a/app/src/components/ConfigurePipette/ConfigForm.js
+++ b/app/src/components/ConfigurePipette/ConfigForm.js
@@ -170,7 +170,7 @@ export default class ConfigForm extends React.Component<Props> {
               </FormColumn>
               <FormColumn>
                 <ConfigFormGroup
-                  groupLabel="Tip Pickup / Drop "
+                  groupLabel="Tip Pickup / Drop"
                   formFields={tipFields}
                 />
                 {this.props.showHiddenFields && (
diff --git a/components/src/forms/CheckboxField.js b/components/src/forms/CheckboxField.js
index 5aa57460474..f0186390ef6 100644
--- a/components/src/forms/CheckboxField.js
+++ b/components/src/forms/CheckboxField.js
@@ -13,6 +13,8 @@ type Props = {
   value?: boolean,
   /** classes to apply */
   className?: string,
+  /** classes to apply to inner label text div */
+  labelTextClassName?: ?string,
   /** name of field in form */
   name?: string,
   /** label text for checkbox */
@@ -27,12 +29,12 @@ type Props = {
 
 export default function CheckboxField (props: Props) {
   const error = props.error != null
-  const labelClassName = cx(
+  const outerClassName = cx(
     styles.form_field,
     props.className,
     {[styles.checkbox_disabled]: props.disabled})
 
-  const innerClassName = cx(
+  const innerDivClassName = cx(
     styles.checkbox_icon,
     {
       [styles.error]: error,
@@ -40,8 +42,8 @@ export default function CheckboxField (props: Props) {
     })
 
   return (
-    <label className={labelClassName}>
-      <div className={innerClassName}>
+    <label className={outerClassName}>
+      <div className={innerDivClassName}>
         <Icon name={props.value ? 'checkbox-marked' : 'checkbox-blank-outline'} width='100%' />
       </div>
       <input
@@ -52,7 +54,7 @@ export default function CheckboxField (props: Props) {
         disabled={props.disabled}
         onChange={props.onChange}
       />
-      <div {...props.hoverTooltipHandlers} className={styles.label_text}>
+      <div {...props.hoverTooltipHandlers} className={cx(props.labelTextClassName, styles.label_text)}>
         {props.label}
       </div>
     </label>
diff --git a/components/src/forms/FormGroup.js b/components/src/forms/FormGroup.js
index 57f4180cc97..338c17f7763 100644
--- a/components/src/forms/FormGroup.js
+++ b/components/src/forms/FormGroup.js
@@ -32,14 +32,14 @@ export default function FormGroup (props: Props) {
 
   return (
     <div className={className}>
-      <div {...props.hoverTooltipHandlers} className={styles.form_group_label}>
+      {props.label && <div {...props.hoverTooltipHandlers} className={styles.form_group_label}>
         {error &&
           <div className={styles.error_icon}>
             <Icon name='alert' />
           </div>
         }
         {props.label}
-      </div>
+      </div>}
       {props.children}
     </div>
   )
diff --git a/components/src/forms/InputField.js b/components/src/forms/InputField.js
index 2034d69bb73..e915aa95f26 100644
--- a/components/src/forms/InputField.js
+++ b/components/src/forms/InputField.js
@@ -11,10 +11,12 @@ type Props = {
   disabled?: boolean,
   /** change handler */
   onChange?: (event: SyntheticInputEvent<*>) => mixed,
-  /** classes to apply */
+  /** classes to apply to outer element */
   className?: string,
   /** inline label text. DEPRECATED */
   label?: string,
+  /** classes to apply to inner label text div */
+  labelTextClassName?: ?string,
   /** name of field in form */
   name?: string,
   /** optional ID of <input> element */
@@ -64,7 +66,7 @@ export default function InputField (props: Props) {
 
   return (
     <label className={labelClass}>
-      <div className={styles.label_text}>
+      <div className={cx(props.labelTextClassName, styles.label_text)}>
         {props.label &&
           error && (
           <div className={styles.error_icon}>
diff --git a/components/src/forms/RadioGroup.js b/components/src/forms/RadioGroup.js
index e94034a9c8a..a9b22ad599c 100644
--- a/components/src/forms/RadioGroup.js
+++ b/components/src/forms/RadioGroup.js
@@ -18,8 +18,10 @@ type Props = {
   }>,
   /** Show radio buttons inline instead of stacked */
   inline?: boolean,
-  /** classes to apply */
+  /** classes to apply to outer div */
   className?: string,
+  /** classes to apply to inner label text div */
+  labelTextClassName?: ?string,
   /** if is included, RadioGroup will use error style. The content of the string is ignored. */
   error?: ?string,
 }
@@ -56,7 +58,8 @@ export default function RadioGroup (props: Props) {
             checked={radio.value === props.value}
             onChange={props.onChange}
           />
-          <div className={styles.label_text}>{radio.name}</div>
+          <div className={cx(props.labelTextClassName, styles.label_text)}>
+            {radio.name}</div>
           {radio.children}
         </label>
       )}
diff --git a/components/src/forms/forms.css b/components/src/forms/forms.css
index 15da0456565..2962704bfec 100644
--- a/components/src/forms/forms.css
+++ b/components/src/forms/forms.css
@@ -47,6 +47,11 @@
 
   font-weight: var(--fw-semibold);
   margin-bottom: 0.15rem;
+  text-transform: capitalize;
+
+  &::after {
+    content: ":";
+  }
 }
 
 .checkbox_icon {
diff --git a/protocol-designer/src/components/FilePage.js b/protocol-designer/src/components/FilePage.js
index 01080cf4a14..70e0be8254e 100644
--- a/protocol-designer/src/components/FilePage.js
+++ b/protocol-designer/src/components/FilePage.js
@@ -31,6 +31,7 @@ type State = { isEditPipetteModalOpen: boolean }
 const DATE_ONLY_FORMAT = 'MMM DD, YYYY'
 const DATETIME_FORMAT = 'MMM DD, YYYY | h:mm A'
 
+// TODO: Ian 2019-03-15 use i18n for labels
 class FilePage extends React.Component<Props, State> {
   state = {isEditPipetteModalOpen: false}
 
@@ -56,17 +57,17 @@ class FilePage extends React.Component<Props, State> {
             render={({handleBlur, handleChange, handleSubmit, dirty, errors, setFieldValue, touched, values}) => (
               <form onSubmit={handleSubmit} className={styles.card_content}>
                 <div className={cx(formStyles.row_wrapper, formStyles.stacked_row)}>
-                  <FormGroup label='Date Created:' className={formStyles.column_1_2}>
+                  <FormGroup label='Date Created' className={formStyles.column_1_2}>
                     {values.created && moment(values.created).format(DATE_ONLY_FORMAT)}
                   </FormGroup>
 
-                  <FormGroup label='Last Exported:' className={formStyles.column_1_2}>
+                  <FormGroup label='Last Exported' className={formStyles.column_1_2}>
                     {values['last-modified'] && moment(values['last-modified']).format(DATETIME_FORMAT)}
                   </FormGroup>
                 </div>
 
                 <div className={cx(formStyles.row_wrapper, formStyles.stacked_row)}>
-                  <FormGroup label='Protocol Name:' className={formStyles.column_1_2}>
+                  <FormGroup label='Protocol Name' className={formStyles.column_1_2}>
                     <InputField
                       placeholder='Untitled'
                       name='protocol-name'
@@ -75,7 +76,7 @@ class FilePage extends React.Component<Props, State> {
                     />
                   </FormGroup>
 
-                  <FormGroup label='Organization/Author:' className={formStyles.column_1_2}>
+                  <FormGroup label='Organization/Author' className={formStyles.column_1_2}>
                     <InputField
                       name='author'
                       onChange={handleChange}
@@ -83,7 +84,7 @@ class FilePage extends React.Component<Props, State> {
                   </FormGroup>
                 </div>
 
-                <FormGroup label='Description:' className={formStyles.stacked_row}>
+                <FormGroup label='Description' className={formStyles.stacked_row}>
                   <InputField
                     name='description'
                     value={values.description}
diff --git a/protocol-designer/src/components/IngredientsList/index.js b/protocol-designer/src/components/IngredientsList/index.js
index 02a85e8c97c..77009b22791 100644
--- a/protocol-designer/src/components/IngredientsList/index.js
+++ b/protocol-designer/src/components/IngredientsList/index.js
@@ -4,6 +4,7 @@ import React from 'react'
 
 import {IconButton, SidePanel, swatchColors} from '@opentrons/components'
 import {sortWells} from '@opentrons/shared-data'
+import i18n from '../../localization'
 import {PDTitledList, PDListItem} from '../lists'
 import StepDescription from '../StepDescription'
 import LabwareDetailsCard from './LabwareDetailsCard'
@@ -71,7 +72,7 @@ class IngredGroupCard extends React.Component<CardProps, CardState> {
       >
         <PDListItem className={styles.ingredient_row_header}>
           <span>Well</span>
-          <span>μL</span>
+          <span>{i18n.t('application.units.microliter')}</span>
           <span>Name</span>
           <span />
         </PDListItem>
diff --git a/protocol-designer/src/components/LiquidPlacementForm/LiquidPlacementForm.js b/protocol-designer/src/components/LiquidPlacementForm/LiquidPlacementForm.js
index bb1e9eb6a42..28e42d37ba6 100644
--- a/protocol-designer/src/components/LiquidPlacementForm/LiquidPlacementForm.js
+++ b/protocol-designer/src/components/LiquidPlacementForm/LiquidPlacementForm.js
@@ -14,6 +14,7 @@ import {
 import i18n from '../../localization'
 import styles from './LiquidPlacementForm.css'
 import formStyles from '../forms/forms.css'
+import stepEditFormStyles from '../StepEditForm/StepEditForm.css'
 import type {Options} from '@opentrons/components'
 
 export type ValidFormValues = {
@@ -100,6 +101,7 @@ export default class LiquidPlacementForm extends React.Component <Props> {
                   className={styles.liquid_field}>
                   <DropdownField
                     name='selectedLiquidId'
+                    className={stepEditFormStyles.large_field}
                     options={liquidSelectionOptions}
                     error={touched.selectedLiquidId && errors.selectedLiquidId}
                     value={values.selectedLiquidId}
@@ -113,7 +115,7 @@ export default class LiquidPlacementForm extends React.Component <Props> {
                 >
                   <InputField
                     name='volume'
-                    units='μL'
+                    units={i18n.t('application.units.microliter')}
                     error={touched.volume && errors.volume}
                     value={values.volume}
                     onChange={this.handleChangeVolume(setFieldValue)}
diff --git a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.js b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.js
index 4f7cc9f03c4..a8d95f363c3 100644
--- a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.js
+++ b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.js
@@ -60,7 +60,7 @@ export default function LiquidEditForm (props: Props) {
               <div className={formStyles.header}>{i18n.t('form.liquid_edit.details')}</div>
               <div className={formStyles.row_wrapper}>
                 <FormGroup
-                  label={`${i18n.t('form.liquid_edit.name')}:`}
+                  label={i18n.t('form.liquid_edit.name')}
                   className={formStyles.column_1_2}>
                   <InputField
                     name='name'
@@ -71,7 +71,7 @@ export default function LiquidEditForm (props: Props) {
                   />
                 </FormGroup>
                 <FormGroup
-                  label={`${i18n.t('form.liquid_edit.description')}:`}
+                  label={i18n.t('form.liquid_edit.description')}
                   className={formStyles.column_1_2}>
                   <InputField
                     name='description'
diff --git a/protocol-designer/src/components/StepEditForm/ButtonRow.js b/protocol-designer/src/components/StepEditForm/ButtonRow.js
index 76579e97e35..29528f4e90d 100644
--- a/protocol-designer/src/components/StepEditForm/ButtonRow.js
+++ b/protocol-designer/src/components/StepEditForm/ButtonRow.js
@@ -23,12 +23,12 @@ type Props = OP & SP & DP
 const ButtonRow = (props: Props) => {
   const {canSave, onDelete, onSave, onCancel, onClickMoreOptions} = props
   return (
-    <div className={cx(styles.form_row, styles.form_footer)}>
-      <div className={styles.start_group}>
+    <div className={cx(styles.button_row, styles.form_wrapper, styles.form_footer)}>
+      <div>
         <OutlineButton className={styles.form_button} onClick={onDelete}>DELETE</OutlineButton>
         <OutlineButton className={styles.form_button} onClick={onClickMoreOptions}>NOTES</OutlineButton>
       </div>
-      <div className={styles.end_group}>
+      <div>
         <PrimaryButton className={styles.form_button} onClick={onCancel}>CLOSE</PrimaryButton>
         <PrimaryButton className={styles.form_button} disabled={!canSave} onClick={onSave}>SAVE</PrimaryButton>
       </div>
diff --git a/protocol-designer/src/components/StepEditForm/StepEditForm.css b/protocol-designer/src/components/StepEditForm/StepEditForm.css
index d1d0da279cc..87e18fc6e64 100644
--- a/protocol-designer/src/components/StepEditForm/StepEditForm.css
+++ b/protocol-designer/src/components/StepEditForm/StepEditForm.css
@@ -1,23 +1,24 @@
 @import '@opentrons/components';
 
-.form_row {
-  margin-top: 1.5rem;
-  min-height: 2.25rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+.advanced_settings_panel {
+  background-color: #f6f6f6; /* TODO Ian 2019-03-15 add to colors.css? */
+  margin: -0.5rem -0.75rem 0 -0.75rem;
+  padding: 0 0.75rem 0 0.75rem;
 }
 
-.start_group {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
+.form_wrapper {
+  max-width: 55rem; /* 'breakpoint' for gutter */
 }
 
-.end_group {
+.disposal_vol_wrapper,
+.form_row,
+.checkbox_column {
+  margin: 1rem 0;
+}
+
+.form_row {
+  min-height: 2.25rem;
   display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
 }
 
 .wrap_group {
@@ -26,23 +27,29 @@
   justify-content: flex-start;
 }
 
+/* TODO: Ian 2019-03-14 delete probably (just used for Mix) */
 .fixed_width {
   width: 17rem;
 }
 
+.field,
+.small_field,
+.medium_field,
 .large_field {
-  width: 14rem;
   margin-right: 0.5rem;
 }
 
+.large_field {
+  width: 12rem;
+}
+
+/* TODO Ian 2019-03-15: needed in mix form before update. When you do mix form, delete this if it's not needed */
 .medium_field {
-  width: 12em;
-  margin-right: 0.5rem;
+  width: 8rem;
 }
 
 .small_field {
-  width: 5rem;
-  margin-right: 0.5rem;
+  width: 5.75rem;
 }
 
 .orphan_field {
@@ -54,22 +61,17 @@
   height: 1.5rem;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
 }
 
 .checkbox_field {
-  font-size: var(--fs-body-1);
+  text-transform: capitalize;
 }
 
 .captioned_field {
   margin-bottom: 1rem;
 }
 
-.hidden_fields {
-  margin: 0 1rem 0 2.5rem;
-  min-width: 14.5rem;
-}
-
+/* TODO Ian 2019-03-14: probably delete this */
 .mix_hidden_fields {
   margin: 0 0 0 1rem;
   min-width: 0;
@@ -80,10 +82,6 @@
   margin-top: 0.5rem;
 }
 
-.form_footer {
-  margin: 2rem 0 1rem 0;
-}
-
 .form_button {
   width: 6.25rem;
 }
@@ -92,32 +90,57 @@
   margin-right: 0.625rem;
 }
 
-.sub_select_label {
+.sub_label_no_checkbox {
   @apply --font-body-1-dark;
 
+  width: 5rem;
   display: flex;
   align-items: center;
   line-height: 1;
   flex: 0 0 auto;
   padding: 0 0.5rem;
-  margin: 0.5em 0 0.5em 20px;
+  margin: 0.5rem 0 0.5rem 1.4rem;
 }
 
 .advanced_settings_button_wrapper {
+  float: right;
   height: 2.25rem;
   width: 2.25rem;
-  margin-top: 0.375rem;
 }
 
 .advanced_settings_button {
   padding: 0.375rem;
 }
 
-.section_divider {
-  height: 1px;
+.section_wrapper {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.section_column {
+  flex: 1;
+  max-width: 20rem;
+}
+
+.section_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  min-height: 1.25rem; /* Same height with and without gear icon */
+  border-bottom: 1px solid var(--c-light-gray);
   width: 100%;
-  background-color: var(--c-light-gray);
-  margin: 1em 0;
+  padding-top: 0.25rem;
+}
+
+.section_header_text {
+  /* TODO: Ian 2019-03-20: if it's reused, do typography.css entry for the below?
+  And add this color to colors.css? */
+  color: #666;
+  letter-spacing: 1px;
+  font-size: var(--fs-body-2);
+  font-weight: var(--fw-semibold);
+  text-transform: uppercase;
 }
 
 .path_option {
@@ -174,14 +197,10 @@
 
 .disposal_vol_wrapper {
   min-height: 3.5rem;
+  margin-bottom: 1rem;
 }
 
-.multi_dispense_options {
-  min-width: 14.25rem;
-}
-
-@media screen and (max-width: 1279px) {
-  .form_row {
-    flex-wrap: wrap;
-  }
+.button_row {
+  display: flex;
+  justify-content: space-between;
 }
diff --git a/protocol-designer/src/components/StepEditForm/fields/BlowoutLocation.js b/protocol-designer/src/components/StepEditForm/fields/BlowoutLocation.js
index 90cec30243a..0e20801bf2c 100644
--- a/protocol-designer/src/components/StepEditForm/fields/BlowoutLocation.js
+++ b/protocol-designer/src/components/StepEditForm/fields/BlowoutLocation.js
@@ -35,7 +35,7 @@ export const BlowoutLocationDropdown = connect(BlowoutLocationDropdownSTP)((prop
       dirtyFields={dirtyFields}
       render={({value, updateValue, disabled}) => (
         <DropdownField
-          className={cx(styles.medium_field, styles.orphan_field, className)}
+          className={cx(styles.large_field, className)}
           options={options}
           disabled={disabled}
           onBlur={() => { onFieldBlur(name) }}
diff --git a/protocol-designer/src/components/StepEditForm/fields/DisposalVolume.js b/protocol-designer/src/components/StepEditForm/fields/DisposalVolume.js
index 07d589353d5..ffa0531fd7e 100644
--- a/protocol-designer/src/components/StepEditForm/fields/DisposalVolume.js
+++ b/protocol-designer/src/components/StepEditForm/fields/DisposalVolume.js
@@ -4,6 +4,7 @@ import {FormGroup, CheckboxField, DropdownField, type Options} from '@opentrons/
 import {connect} from 'react-redux'
 import cx from 'classnames'
 
+import i18n from '../../../localization'
 import {getMaxDisposalVolumeForMultidispense} from '../../../steplist/formLevel/handleFormChange/utils'
 import {selectors as stepFormSelectors} from '../../../step-forms'
 import {selectors as uiLabwareSelectors} from '../../../ui/labware'
@@ -24,20 +25,20 @@ type SP = {
 type Props = SP & {focusHandlers: FocusHandlers}
 
 const DisposalVolumeField = (props: Props) => (
-  <FormGroup label='Multi-Dispense Options:'>
+  <FormGroup label={i18n.t('form.step_edit_form.multiDispenseOptionsLabel')}>
     <FieldConnector
       name="disposalVolume_checkbox"
       render={({value, updateValue, hoverTooltipHandlers}) => {
         const {maxDisposalVolume} = props
         const volumeBoundsCaption = maxDisposalVolume != null
-          ? `max ${maxDisposalVolume} μL`
+          ? `max ${maxDisposalVolume} ${i18n.t('application.units.microliter')}`
           : null
 
         const volumeField = (
           <div>
             <TextField
               name="disposalVolume_volume"
-              units="μL"
+              units={i18n.t('application.units.microliter')}
               caption={volumeBoundsCaption}
               className={cx(styles.small_field, styles.orphan_field)}
               {...props.focusHandlers} />
@@ -48,13 +49,12 @@ const DisposalVolumeField = (props: Props) => (
           <React.Fragment>
             <div {...hoverTooltipHandlers} className={cx(
               styles.checkbox_row,
-              styles.multi_dispense_options,
               {[styles.captioned_field]: volumeBoundsCaption}
             )}>
               <CheckboxField
                 label="Disposal Volume"
                 value={Boolean(value)}
-                className={styles.checkbox_field}
+                className={cx(styles.checkbox_field, styles.large_field)}
                 onChange={(e: SyntheticInputEvent<*>) => updateValue(!value)} />
               {
                 value
@@ -71,9 +71,9 @@ const DisposalVolumeField = (props: Props) => (
                     dirtyFields={props.focusHandlers.dirtyFields}
                     render={({value, updateValue, hoverTooltipHandlers}) => (
                       <div {...hoverTooltipHandlers} className={styles.checkbox_row} >
-                        <div className={styles.sub_select_label}>Blowout</div>
+                        <div className={styles.sub_label_no_checkbox}>Blowout</div>
                         <DropdownField
-                          className={cx(styles.medium_field, styles.orphan_field)}
+                          className={styles.large_field}
                           options={props.disposalDestinationOptions}
                           onBlur={() => { props.focusHandlers.onFieldBlur('blowout_location') }}
                           onFocus={() => { props.focusHandlers.onFieldFocus('blowout_location') }}
diff --git a/protocol-designer/src/components/StepEditForm/fields/FlowRate/FlowRateInput.js b/protocol-designer/src/components/StepEditForm/fields/FlowRate/FlowRateInput.js
index e9d86da1e7b..629c5eeef2a 100644
--- a/protocol-designer/src/components/StepEditForm/fields/FlowRate/FlowRateInput.js
+++ b/protocol-designer/src/components/StepEditForm/fields/FlowRate/FlowRateInput.js
@@ -7,6 +7,7 @@ import {
   RadioGroup,
   InputField,
 } from '@opentrons/components'
+import i18n from '../../../../localization'
 import {Portal} from '../../../portals/MainPageModalPortal'
 import modalStyles from '../../../modals/modal.css'
 import stepFormStyles from '../../StepEditForm.css'
@@ -142,7 +143,7 @@ export default class FlowRateInput extends React.Component<Props, State> {
     const FlowRateInput = (
       <InputField
         value={`${this.state.modalFlowRate || ''}`}
-        units='μL/s'
+        units={i18n.t('application.units.microliterPerSec')}
         caption={rangeDescription}
         error={errorMessage}
         onChange={this.handleChangeNumber}
@@ -173,7 +174,7 @@ export default class FlowRateInput extends React.Component<Props, State> {
           </div>
 
           <div className={styles.flow_rate_type_label}>
-            {`${flowRateType} speed:`}
+            {`${flowRateType} speed`}
           </div>
 
           <RadioGroup
@@ -184,7 +185,7 @@ export default class FlowRateInput extends React.Component<Props, State> {
             }
             onChange={this.handleChangeRadio}
             options={[
-              {name: `${defaultFlowRate || '?'} μL/s (default)`, value: 'default'},
+              {name: `${defaultFlowRate || '?'} ${i18n.t('application.units.microliterPerSec')} (default)`, value: 'default'},
               {name: 'Custom', value: 'custom', 'children': FlowRateInput},
             ]}
           />
@@ -194,7 +195,7 @@ export default class FlowRateInput extends React.Component<Props, State> {
 
     return (
       <React.Fragment>
-        <FormGroup label={`${label || DEFAULT_LABEL}:`} disabled={disabled}>
+        <FormGroup label={label || DEFAULT_LABEL} disabled={disabled}>
           <InputField
             units='μL/s'
             readOnly
diff --git a/protocol-designer/src/components/StepEditForm/fields/Path/Path.js b/protocol-designer/src/components/StepEditForm/fields/Path/Path.js
index 5bf34ccf462..1563b68bdc7 100644
--- a/protocol-designer/src/components/StepEditForm/fields/Path/Path.js
+++ b/protocol-designer/src/components/StepEditForm/fields/Path/Path.js
@@ -82,7 +82,7 @@ const getSubtitle = (path: PathOption, disabledPathMap: ?{[PathOption]: string})
 }
 const PathField = (props: PathFieldProps) => {
   return (
-    <FormGroup label='Path:'>
+    <FormGroup label='Path'>
       <StepField
         name="path"
         render={({value, updateValue}) => (
diff --git a/protocol-designer/src/components/StepEditForm/fields/Pipette.js b/protocol-designer/src/components/StepEditForm/fields/Pipette.js
index 9cffe1067e0..261cf80eb0f 100644
--- a/protocol-designer/src/components/StepEditForm/fields/Pipette.js
+++ b/protocol-designer/src/components/StepEditForm/fields/Pipette.js
@@ -6,6 +6,7 @@ import {
   DropdownField,
   type Options,
 } from '@opentrons/components'
+import i18n from '../../../localization'
 import {selectors as stepFormSelectors} from '../../../step-forms'
 import type {StepFieldName} from '../../../steplist/fieldLevel'
 import type {BaseState} from '../../../types'
@@ -26,7 +27,7 @@ const PipetteField = connect(PipetteFieldSTP)((props: PipetteFieldProps) => (
     focusedField={props.focusedField}
     dirtyFields={props.dirtyFields}
     render={({value, updateValue, hoverTooltipHandlers}) => (
-      <FormGroup label='Pipette:' className={styles.large_field} hoverTooltipHandlers={hoverTooltipHandlers}>
+      <FormGroup label={i18n.t('form.step_edit_form.field.pipette.label')} className={styles.large_field} hoverTooltipHandlers={hoverTooltipHandlers}>
         <DropdownField
           options={props.pipetteOptions}
           value={value ? String(value) : null}
diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPosition/index.js b/protocol-designer/src/components/StepEditForm/fields/TipPosition/index.js
index a7d4d66a1dc..54ffb3006b8 100644
--- a/protocol-designer/src/components/StepEditForm/fields/TipPosition/index.js
+++ b/protocol-designer/src/components/StepEditForm/fields/TipPosition/index.js
@@ -51,7 +51,7 @@ class TipPositionInput extends React.Component<OP & SP, TipPositionInputState> {
     const Wrapper = ({children, hoverTooltipHandlers}) => isTouchTipField
       ? <React.Fragment>{children}</React.Fragment>
       : <FormGroup
-        label={`${i18n.t('form.step_edit_form.field.tip_position.label')}:`}
+        label={i18n.t('form.step_edit_form.field.tip_position.label')}
         disabled={disabled}
         className={styles.well_order_input}
         hoverTooltipHandlers={hoverTooltipHandlers}>
diff --git a/protocol-designer/src/components/StepEditForm/fields/Volume.js b/protocol-designer/src/components/StepEditForm/fields/Volume.js
index 34591d8de31..233f0172497 100644
--- a/protocol-designer/src/components/StepEditForm/fields/Volume.js
+++ b/protocol-designer/src/components/StepEditForm/fields/Volume.js
@@ -2,11 +2,12 @@
 import * as React from 'react'
 import cx from 'classnames'
 import {FormGroup, HoverTooltip} from '@opentrons/components'
+import i18n from '../../../localization'
+import {getTooltipForField} from '../utils'
+import TextField from './Text'
 import type {StepType} from '../../../form-types'
 import type {FocusHandlers} from '../types'
 import styles from '../StepEditForm.css'
-import {getTooltipForField} from '../utils'
-import TextField from './Text'
 
 type Props = {stepType: StepType, focusHandlers: FocusHandlers, label: string}
 const Volume = (props: Props) => (
@@ -18,7 +19,7 @@ const Volume = (props: Props) => (
         label={props.label}
         className={cx(styles.volume_field, styles.small_field)}
         hoverTooltipHandlers={hoverTooltipHandlers}>
-        <TextField name="volume" units="μL" {...props.focusHandlers} />
+        <TextField name="volume" units={i18n.t('application.units.microliter')} {...props.focusHandlers} />
       </FormGroup>
     }
   </HoverTooltip>
diff --git a/protocol-designer/src/components/StepEditForm/fields/WellOrder/WellOrderInput.css b/protocol-designer/src/components/StepEditForm/fields/WellOrder/WellOrderInput.css
index c9bee952ab4..3a46fd948d5 100644
--- a/protocol-designer/src/components/StepEditForm/fields/WellOrder/WellOrderInput.css
+++ b/protocol-designer/src/components/StepEditForm/fields/WellOrder/WellOrderInput.css
@@ -7,6 +7,10 @@
   margin: 0.25rem 0;
 }
 
+.icon_with_label {
+  margin: 0 0.25rem;
+}
+
 .well_order_icon:hover {
   opacity: 0.7;
 }
diff --git a/protocol-designer/src/components/StepEditForm/fields/WellOrder/WellOrderModal.js b/protocol-designer/src/components/StepEditForm/fields/WellOrder/WellOrderModal.js
index ba8f37ffb8c..32d225256b4 100644
--- a/protocol-designer/src/components/StepEditForm/fields/WellOrder/WellOrderModal.js
+++ b/protocol-designer/src/components/StepEditForm/fields/WellOrder/WellOrderModal.js
@@ -109,7 +109,7 @@ class WellOrderModal extends React.Component<Props, State> {
               <div className={styles.field_row}>
                 <DropdownField
                   value={firstValue}
-                  className={cx(stepEditStyles.medium_field, styles.well_order_dropdown)}
+                  className={cx(stepEditStyles.field, styles.well_order_dropdown)}
                   onChange={this.makeOnChange('first')}
                   options={
                     WELL_ORDER_VALUES.map((value) => ({
@@ -120,7 +120,7 @@ class WellOrderModal extends React.Component<Props, State> {
                 <span className={styles.field_spacer}>{i18n.t('modal.well_order.then')}</span>
                 <DropdownField
                   value={secondValue}
-                  className={cx(stepEditStyles.medium_field, styles.well_order_dropdown)}
+                  className={cx(stepEditStyles.field, styles.well_order_dropdown)}
                   onChange={this.makeOnChange('second')}
                   options={
                     WELL_ORDER_VALUES.map((value) => ({
diff --git a/protocol-designer/src/components/StepEditForm/fields/WellOrder/index.js b/protocol-designer/src/components/StepEditForm/fields/WellOrder/index.js
index 1f7f8dfa3f8..e9bdd54a696 100644
--- a/protocol-designer/src/components/StepEditForm/fields/WellOrder/index.js
+++ b/protocol-designer/src/components/StepEditForm/fields/WellOrder/index.js
@@ -10,7 +10,11 @@ import WellOrderModal from './WellOrderModal'
 import ZIG_ZAG_IMAGE from '../../../../images/zig_zag_icon.svg'
 import type {BaseState} from '../../../../types'
 
-type OP = {prefix: 'aspirate' | 'dispense' | 'mix'}
+type OP = {
+  className?: ?string,
+  label?: string,
+  prefix: 'aspirate' | 'dispense' | 'mix',
+}
 type SP = {iconClassNames: Array<string>}
 
 type WellOrderInputState = {isModalOpen: boolean}
@@ -21,8 +25,12 @@ class WellOrderInput extends React.Component<OP & SP, WellOrderInputState> {
   handleClose = () => { this.setState({isModalOpen: false}) }
 
   render () {
+    const className = cx(this.props.className, {
+      [styles.small_field]: !this.props.label,
+      [stepEditStyles.no_label]: !this.props.label,
+    })
     return (
-      <FormGroup className={cx(styles.small_field, stepEditStyles.no_label)}>
+      <FormGroup label={this.props.label} className={className}>
         <WellOrderModal
           prefix={this.props.prefix}
           closeModal={this.handleClose}
@@ -30,7 +38,11 @@ class WellOrderInput extends React.Component<OP & SP, WellOrderInputState> {
         <img
           onClick={this.handleOpen}
           src={ZIG_ZAG_IMAGE}
-          className={cx(styles.well_order_icon, ...this.props.iconClassNames)} />
+          className={cx(
+            styles.well_order_icon,
+            {[styles.icon_with_label]: this.props.label},
+            ...this.props.iconClassNames,
+          )} />
       </FormGroup>
     )
   }
diff --git a/protocol-designer/src/components/StepEditForm/fields/WellSelection/WellSelectionInput.js b/protocol-designer/src/components/StepEditForm/fields/WellSelection/WellSelectionInput.js
index 158606607c6..3ec0e203c39 100644
--- a/protocol-designer/src/components/StepEditForm/fields/WellSelection/WellSelectionInput.js
+++ b/protocol-designer/src/components/StepEditForm/fields/WellSelection/WellSelectionInput.js
@@ -2,6 +2,7 @@
 import * as React from 'react'
 import {connect} from 'react-redux'
 import {FormGroup, InputField} from '@opentrons/components'
+import i18n from '../../../../localization'
 import WellSelectionModal from './WellSelectionModal'
 import {Portal} from '../../../portals/MainPageModalPortal'
 import {actions as stepsActions, selectors as stepsSelectors} from '../../../../ui/steps'
@@ -55,9 +56,12 @@ class WellSelectionInput extends React.Component<Props> {
   }
   render () {
     const modalKey = this.getModalKey()
+    const label = this.props.isMulti
+      ? i18n.t('form.step_edit_form.wellSelectionLabel.columns')
+      : i18n.t('form.step_edit_form.wellSelectionLabel.wells')
     return (
       <FormGroup
-        label={this.props.isMulti ? 'Columns:' : 'Wells:'}
+        label={label}
         disabled={this.props.disabled}
         className={styles.small_field}>
         <InputField
diff --git a/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js b/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js
index 43441963226..5fb4d08c557 100644
--- a/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js
+++ b/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestFields.js
@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react'
-import {FormGroup, IconButton, HoverTooltip} from '@opentrons/components'
 
 import type {StepFieldName} from '../../../../steplist/fieldLevel'
 import i18n from '../../../../localization'
@@ -8,104 +7,99 @@ import i18n from '../../../../localization'
 import type {FocusHandlers} from '../../types'
 
 import {
-  LabwareField,
   TextField,
   CheckboxRowField,
   BlowoutLocationField,
   TipPositionField,
   FlowRateField,
-  WellSelectionField,
   WellOrderField,
 } from '../../fields'
 
 import styles from '../../StepEditForm.css'
 
 type Props = {
+  className?: ?string,
   focusHandlers: FocusHandlers,
   prefix: 'aspirate' | 'dispense',
 }
-type State = {collapsed?: boolean}
 
 const makeAddFieldNamePrefix = (prefix: string) => (fieldName: string): StepFieldName => `${prefix}_${fieldName}`
 
-class SourceDestFields extends React.Component<Props, State> {
-  state = {collapsed: true}
+function SourceDestFields (props: Props) {
+  const {className, focusHandlers, prefix} = props
+  const addFieldNamePrefix = makeAddFieldNamePrefix(prefix)
 
-  handleClick = (e: SyntheticEvent<>) => {
-    this.setState({collapsed: !this.state.collapsed})
-  }
-  render () {
-    const {focusHandlers} = this.props
-    const addFieldNamePrefix = makeAddFieldNamePrefix(this.props.prefix)
-    const labwareLabel = this.props.prefix === 'aspirate' ? 'Source:' : 'Destination:'
-    const hiddenFieldsLabel = this.props.prefix === 'aspirate' ? 'Aspirate Options:' : 'Dispense Options:'
-    return (
+  return (
+    <div className={className}>
       <div className={styles.form_row}>
-        <div className={styles.start_group}>
-          <FormGroup label={labwareLabel}>
-            <LabwareField name={addFieldNamePrefix('labware')} {...focusHandlers} />
-          </FormGroup>
-          <WellSelectionField
-            name={addFieldNamePrefix('wells')}
-            labwareFieldName={addFieldNamePrefix('labware')}
-            pipetteFieldName="pipette"
+        <FlowRateField
+          name={addFieldNamePrefix('flowRate')}
+          pipetteFieldName="pipette"
+          flowRateType={prefix} />
+        <TipPositionField fieldName={addFieldNamePrefix('mmFromBottom')} />
+        <WellOrderField prefix={prefix} label={i18n.t('form.step_edit_form.field.well_order.label')} />
+      </div>
+
+      <div className={styles.checkbox_column}>
+        {prefix === 'aspirate' &&
+          <React.Fragment>
+            <CheckboxRowField
+              name="preWetTip"
+              label={i18n.t('form.step_edit_form.field.preWetTip.label')}
+              className={styles.small_field}
+            />
+            <CheckboxRowField
+              disabled
+              tooltipComponent={i18n.t('tooltip.not_in_beta')}
+              name="aspirate_airGap_checkbox"
+              label={i18n.t('form.step_edit_form.field.airGap.label')}
+              className={styles.small_field}
+            >
+              <TextField
+                disabled
+                name="aspirate_airGap_volume"
+                units={i18n.t('application.units.microliter')}
+                {...focusHandlers}
+              />
+            </CheckboxRowField>
+          </React.Fragment>
+        }
+        <CheckboxRowField
+          name={addFieldNamePrefix('touchTip_checkbox')}
+          label={i18n.t('form.step_edit_form.field.touchTip.label')}
+          className={styles.small_field}
+        >
+          <TipPositionField fieldName={addFieldNamePrefix('touchTip_mmFromBottom')} />
+        </CheckboxRowField>
+        <CheckboxRowField
+          name={addFieldNamePrefix('mix_checkbox')}
+          label={i18n.t('form.step_edit_form.field.mix.label')}
+          className={styles.small_field}>
+          <TextField
+            name={addFieldNamePrefix('mix_volume')}
+            units={i18n.t('application.units.microliter')}
+            className={styles.small_field}
+            {...focusHandlers} />
+          <TextField
+            name={addFieldNamePrefix('mix_times')}
+            units={i18n.t('application.units.times')}
+            className={styles.small_field}
             {...focusHandlers} />
-          <WellOrderField prefix={this.props.prefix} />
-        </div>
-        <div className={styles.start_group}>
-          <FlowRateField
-            name={addFieldNamePrefix('flowRate')}
-            pipetteFieldName="pipette"
-            flowRateType={this.props.prefix} />
-          <TipPositionField fieldName={addFieldNamePrefix('mmFromBottom')} />
-          <HoverTooltip tooltipComponent={i18n.t('tooltip.advanced_settings')}>
-            {(hoverTooltipHandlers) => (
-              <div {...hoverTooltipHandlers} onClick={this.handleClick} className={styles.advanced_settings_button_wrapper}>
-                <IconButton className={styles.advanced_settings_button} name="settings" hover={!this.state.collapsed} />
-              </div>
-            )}
-          </HoverTooltip>
-          <div className={styles.hidden_fields}>
-            {this.state.collapsed !== true &&
-              <FormGroup label={hiddenFieldsLabel}>
-                {this.props.prefix === 'aspirate' &&
-                  <React.Fragment>
-                    <CheckboxRowField name="preWetTip" label="Pre-wet tip" />
-                    <CheckboxRowField disabled tooltipComponent={i18n.t('tooltip.not_in_beta')} name="aspirate_airGap_checkbox" label="Air Gap">
-                      <TextField disabled name="aspirate_airGap_volume" units="μL" {...focusHandlers} />
-                    </CheckboxRowField>
-                  </React.Fragment>
-                }
-                <CheckboxRowField name={addFieldNamePrefix('touchTip_checkbox')} label="Touch tip">
-                  <TipPositionField fieldName={addFieldNamePrefix('touchTip_mmFromBottom')} />
-                </CheckboxRowField>
-                <CheckboxRowField name={addFieldNamePrefix('mix_checkbox')} label='Mix'>
-                  <TextField
-                    name={addFieldNamePrefix('mix_volume')}
-                    units="μL"
-                    className={styles.small_field}
-                    {...focusHandlers} />
-                  <TextField
-                    name={addFieldNamePrefix('mix_times')}
-                    units="Times"
-                    className={styles.small_field}
-                    {...focusHandlers} />
-                </CheckboxRowField>
-                {this.props.prefix === 'dispense' &&
-                  <CheckboxRowField name='blowout_checkbox' label='Blowout'>
-                    <BlowoutLocationField
-                      name="blowout_location"
-                      className={styles.full_width}
-                      {...focusHandlers} />
-                  </CheckboxRowField>
-                }
-              </FormGroup>
-            }
-          </div>
-        </div>
+        </CheckboxRowField>
+        {prefix === 'dispense' &&
+          <CheckboxRowField
+            name='blowout_checkbox'
+            label={i18n.t('form.step_edit_form.field.blowout.label')}
+            className={styles.small_field}>
+            <BlowoutLocationField
+              name="blowout_location"
+              className={styles.full_width}
+              {...focusHandlers} />
+          </CheckboxRowField>
+        }
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 export default SourceDestFields
diff --git a/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestHeaders.js b/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestHeaders.js
new file mode 100644
index 00000000000..d9540bbb560
--- /dev/null
+++ b/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/SourceDestHeaders.js
@@ -0,0 +1,60 @@
+// @flow
+import * as React from 'react'
+import {FormGroup, IconButton, HoverTooltip} from '@opentrons/components'
+
+import type {StepFieldName} from '../../../../steplist/fieldLevel'
+import i18n from '../../../../localization'
+
+import type {FocusHandlers} from '../../types'
+
+import {
+  LabwareField,
+  WellSelectionField,
+} from '../../fields'
+
+import styles from '../../StepEditForm.css'
+
+type Props = {
+  className?: ?string,
+  collapsed?: ?boolean,
+  toggleCollapsed: () => mixed,
+  focusHandlers: FocusHandlers,
+  prefix: 'aspirate' | 'dispense',
+}
+
+const makeAddFieldNamePrefix = (prefix: string) => (fieldName: string): StepFieldName => `${prefix}_${fieldName}`
+
+function SourceDestHeaders (props: Props) {
+  const {className, collapsed, toggleCollapsed, focusHandlers, prefix} = props
+  const addFieldNamePrefix = makeAddFieldNamePrefix(prefix)
+  const labwareLabel = i18n.t(`form.step_edit_form.labwareLabel.${prefix}`)
+
+  return (
+    <div className={className}>
+      <div className={styles.section_header}>
+        <span className={styles.section_header_text}>{prefix}</span>
+        <HoverTooltip
+          key={collapsed ? 'collapsed' : 'expanded'} // NOTE: without this key, the IconButton will not re-render unless clicked
+          tooltipComponent={i18n.t('tooltip.advanced_settings')}>
+          {(hoverTooltipHandlers) => (
+            <div {...hoverTooltipHandlers} onClick={toggleCollapsed} className={styles.advanced_settings_button_wrapper}>
+              <IconButton className={styles.advanced_settings_button} name="settings" hover={!collapsed} />
+            </div>
+          )}
+        </HoverTooltip>
+      </div>
+      <div className={styles.form_row}>
+        <FormGroup label={labwareLabel}>
+          <LabwareField name={addFieldNamePrefix('labware')} {...focusHandlers} />
+        </FormGroup>
+        <WellSelectionField
+          name={addFieldNamePrefix('wells')}
+          labwareFieldName={addFieldNamePrefix('labware')}
+          pipetteFieldName="pipette"
+          {...focusHandlers} />
+      </div>
+    </div>
+  )
+}
+
+export default SourceDestHeaders
diff --git a/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/index.js b/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/index.js
index b7773d4a033..9ac71c72b24 100644
--- a/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/index.js
+++ b/protocol-designer/src/components/StepEditForm/forms/MoveLiquid/index.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 import cx from 'classnames'
-
+import i18n from '../../../../localization'
 import type {StepType, HydratedMoveLiquidFormDataLegacy} from '../../../../form-types'
 import {
   VolumeField,
@@ -13,46 +13,91 @@ import {
 import styles from '../../StepEditForm.css'
 import type {FocusHandlers} from '../../types'
 import SourceDestFields from './SourceDestFields'
+import SourceDestHeaders from './SourceDestHeaders'
 
-type MoveLiquidFormProps = {
+type Props = {
   focusHandlers: FocusHandlers,
   stepType: StepType,
   formData: HydratedMoveLiquidFormDataLegacy,
 }
 
-// TODO: BC 2019-01-25 i18n all across step form and fields
+type State = {
+  collapsed: boolean,
+}
+
 // TODO: BC 2019-01-25 instead of passing path from here, put it in connect fields where needed
 // or question if it even needs path
 
-const MoveLiquidForm = (props: MoveLiquidFormProps) => {
-  const {focusHandlers, stepType} = props
-  const {path} = props.formData
-  return (
-    <React.Fragment>
-      <div className={cx(styles.form_row, styles.start_group)}>
-        <PipetteField name="pipette" stepType={stepType} {...focusHandlers} />
-        <VolumeField label="Transfer Vol:" focusHandlers={focusHandlers} stepType={stepType} />
-      </div>
-      <div className={styles.section_divider}></div>
+class MoveLiquidForm extends React.Component<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {collapsed: true}
+  }
+
+  toggleCollapsed = () => this.setState({collapsed: !this.state.collapsed})
 
-      <SourceDestFields focusHandlers={focusHandlers} prefix="aspirate" />
-      <div className={styles.section_divider}></div>
+  render () {
+    const {focusHandlers, stepType} = this.props
+    const {collapsed} = this.state
+    const {path} = this.props.formData
+
+    return (
+      <div className={styles.form_wrapper}>
+        <div className={styles.section_header}>
+          <span className={styles.section_header_text}>
+            {i18n.t('application.stepType.moveLiquid')}
+          </span>
+        </div>
+        <div className={styles.form_row}>
+          <PipetteField name="pipette" stepType={stepType} {...focusHandlers} />
+          <VolumeField label={i18n.t('form.step_edit_form.field.volume.label')} focusHandlers={focusHandlers} stepType={stepType} />
+        </div>
+
+        <div className={styles.section_wrapper}>
+          <SourceDestHeaders
+            className={styles.section_column}
+            focusHandlers={focusHandlers}
+            collapsed={collapsed}
+            toggleCollapsed={this.toggleCollapsed}
+            prefix="aspirate" />
+          <SourceDestHeaders
+            className={styles.section_column}
+            focusHandlers={focusHandlers}
+            collapsed={collapsed}
+            toggleCollapsed={this.toggleCollapsed}
+            prefix="dispense" />
+        </div>
 
-      <SourceDestFields focusHandlers={focusHandlers} prefix="dispense" />
-      <div className={styles.section_divider}></div>
+        {!collapsed && <div className={cx(styles.section_wrapper, styles.advanced_settings_panel)}>
+          <SourceDestFields
+            className={styles.section_column}
+            focusHandlers={focusHandlers}
+            collapsed={collapsed}
+            toggleCollapsed={this.toggleCollapsed}
+            prefix="aspirate" />
+          <SourceDestFields
+            className={styles.section_column}
+            focusHandlers={focusHandlers}
+            collapsed={collapsed}
+            toggleCollapsed={this.toggleCollapsed}
+            prefix="dispense" />
+        </div>}
 
-      <div className={styles.form_row}>
-        <div className={styles.start_group}>
-          <ChangeTipField stepType={stepType} name="changeTip" />
-          <PathField focusHandlers={focusHandlers} />
+        <div className={styles.section_header}>
+          <span className={styles.section_header_text}>{i18n.t('form.step_edit_form.section.sterility&motion')}</span>
         </div>
-        <div className={cx(styles.end_group, styles.disposal_vol_wrapper)}>
-          {path === 'multiDispense' && <DisposalVolumeField focusHandlers={focusHandlers} />}
+        <div className={styles.section_wrapper}>
+          <div className={cx(styles.form_row, styles.section_column)}>
+            <ChangeTipField stepType={stepType} name="changeTip" />
+            <PathField focusHandlers={focusHandlers} />
+          </div>
+          <div className={cx(styles.section_column, styles.disposal_vol_wrapper)}>
+            {path === 'multiDispense' && <DisposalVolumeField focusHandlers={focusHandlers} />}
+          </div>
         </div>
-        <div className={styles.hidden_fields}></div>
       </div>
-    </React.Fragment>
-  )
+    )
+  }
 }
 
 export default MoveLiquidForm
diff --git a/protocol-designer/src/components/forms/forms.css b/protocol-designer/src/components/forms/forms.css
index d1c0caa6c6c..2adedc0ecac 100644
--- a/protocol-designer/src/components/forms/forms.css
+++ b/protocol-designer/src/components/forms/forms.css
@@ -30,7 +30,3 @@
 .row_wrapper {
   lost-utility: clearfix;
 }
-
-.dropdown_field {
-  font-size: var(--fs-body-1);
-}
diff --git a/protocol-designer/src/components/modals/FilePipettesModal/index.js b/protocol-designer/src/components/modals/FilePipettesModal/index.js
index 8150615e9f8..2d58ddadfdf 100644
--- a/protocol-designer/src/components/modals/FilePipettesModal/index.js
+++ b/protocol-designer/src/components/modals/FilePipettesModal/index.js
@@ -46,6 +46,7 @@ const initialState = {
   },
 }
 
+// TODO: Ian 2019-03-15 use i18n for labels
 export default class FilePipettesModal extends React.Component<Props, State> {
   constructor (props: Props) {
     super(props)
@@ -140,7 +141,7 @@ export default class FilePipettesModal extends React.Component<Props, State> {
             </h2>
 
             {useProtocolFields && (
-              <FormGroup className={formStyles.stacked_row} label='Name:'>
+              <FormGroup className={formStyles.stacked_row} label='Name'>
                 <InputField
                   autoFocus
                   tabIndex={1}
diff --git a/protocol-designer/src/localization/en/application.json b/protocol-designer/src/localization/en/application.json
index aa681b43234..27cb0292a35 100644
--- a/protocol-designer/src/localization/en/application.json
+++ b/protocol-designer/src/localization/en/application.json
@@ -4,6 +4,11 @@
     "moveLiquid": "transfer",
     "pause": "pause"
   },
+  "units": {
+    "microliter": "μL",
+    "microliterPerSec": "μL/s",
+    "times": "times"
+  },
   "version": "Protocol Designer Version",
   "beta": "beta",
   "networking": {
diff --git a/protocol-designer/src/localization/en/form.json b/protocol-designer/src/localization/en/form.json
index afb25e85462..67e8b2d3cce 100644
--- a/protocol-designer/src/localization/en/form.json
+++ b/protocol-designer/src/localization/en/form.json
@@ -22,9 +22,23 @@
     "volume_exceeded": "Warning: exceeded max volume per well: {{volume}}µL"
   },
   "step_edit_form": {
+    "section": {
+      "sterility&motion": "sterility & motion"
+    },
+    "labwareLabel": {
+      "aspirate": "source",
+      "dispense": "destination"
+    },
+    "multiDispenseOptionsLabel": "multi-dispense options",
+    "wellSelectionLabel": {
+      "columns": "columns",
+      "wells": "wells"
+    },
     "field": {
+      "airGap": {"label": "air gap"},
+      "blowout": {"label": "blowout"},
       "change_tip": {
-        "label": "Change Tip",
+        "label": "change tip",
         "option": {
           "always": "Always",
           "once": "Once",
@@ -40,9 +54,8 @@
           "never": "Use same tip as last step"
         }
       },
-      "tip_position": {
-        "label": "Tip Position"
-      },
+      "tip_position": {"label": "tip position"},
+      "volume": {"label": "volume"},
       "well_order": {
         "label": "Well Order",
         "option": {
@@ -52,12 +65,9 @@
           "b2t": "Bottom to top"
         }
       },
-      "step_name": {
-        "label": "Step Name"
-      },
-      "step_notes": {
-        "label": "Step Notes"
-      },
+      "step_name": {"label": "Step Name"},
+      "step_notes": {"label": "Step Notes"},
+      "mix": {"label": "mix"},
       "path": {
         "title": {
           "single": "Single Transfers",
@@ -71,11 +81,10 @@
           "incompatible_with_per_dest": "Incompatible with \"Per Destination Well\" Change Tip setting",
           "incompatible_with_per_source": "Incompatible with \"Per Source Well\" Change Tip setting"
         }
-      }
-    },
-    "section": {
-      "aspirate": "aspirate",
-      "dispense": "dispense"
+      },
+      "pipette": {"label": "pipette"},
+      "preWetTip": {"label": "pre-wet tip"},
+      "touchTip": {"label": "touch tip"}
     }
   }
 }