fix(components,-protocol-designer): fix ToggleStepFormField style, realign step title

This PR makes two small style changes: 1) fixes disabled style for ToggleStepFormField (and ListButton by implication), and 2) aligns the protocol step title to the center of its container.

Author: ncdiehl11

components/src/atoms/ListButton/index.tsx

@@ -2,7 +2,7 @@ import { css } from 'styled-components'
 import { Flex } from '../../primitives'
 import { SPACING } from '../../ui-style-constants'
 import { BORDERS, COLORS } from '../../helix-design-system'
-import { CURSOR_POINTER } from '../../styles'
+import { CURSOR_DEFAULT, CURSOR_POINTER } from '../../styles'
 
 import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
@@ -42,21 +42,23 @@ const LISTBUTTON_PROPS_BY_TYPE: Record<
   odd stylings
 **/
 export function ListButton(props: ListButtonProps): JSX.Element {
-  const { type, children, disabled, onClick, ...styleProps } = props
+  const { type, children, disabled = false, onClick, ...styleProps } = props
   const listButtonProps = LISTBUTTON_PROPS_BY_TYPE[type]
 
   const LIST_BUTTON_STYLE = css`
-    cursor: ${CURSOR_POINTER};
+    cursor: ${disabled ? CURSOR_DEFAULT : CURSOR_POINTER};
     background-color: ${disabled
-      ? COLORS.grey35
+      ? COLORS.grey20
       : listButtonProps.backgroundColor};
     max-width: 26.875rem;
     padding: ${styleProps.padding ??
     `${SPACING.spacing20} ${SPACING.spacing24}`};
     border-radius: ${BORDERS.borderRadius8};
 
     &:hover {
-      background-color: ${listButtonProps.hoverBackgroundColor};
+      background-color: ${disabled
+        ? COLORS.grey20
+        : listButtonProps.hoverBackgroundColor};
     }
   `
 

protocol-designer/src/molecules/ToggleStepFormField/index.tsx

@@ -7,7 +7,6 @@ import {
   ListButton,
   SPACING,
   StyledText,
-  TOOLTIP_BOTTOM,
   Tooltip,
   useHoverTooltip,
 } from '@opentrons/components'
@@ -37,43 +36,47 @@ export function ToggleStepFormField(
     tooltipContent,
     isDisabled,
   } = props
-  const [targetProps, tooltipProps] = useHoverTooltip({
-    placement: TOOLTIP_BOTTOM,
-  })
+  const [targetProps, tooltipProps] = useHoverTooltip()
 
   return (
     <>
       <ListButton
         type="noActive"
         padding={SPACING.spacing12}
         onClick={() => {
-          toggleUpdateValue(!toggleValue)
+          if (!isDisabled) {
+            toggleUpdateValue(!toggleValue)
+          }
         }}
+        disabled={isDisabled}
       >
-        <Flex width="100%" flexDirection={DIRECTION_COLUMN}>
+        {tooltipContent != null ? (
+          <Tooltip tooltipProps={tooltipProps}>{tooltipContent}</Tooltip>
+        ) : null}
+
+        <Flex width="100%" flexDirection={DIRECTION_COLUMN} {...targetProps}>
           <Flex
             justifyContent={JUSTIFY_SPACE_BETWEEN}
             alignItems={ALIGN_CENTER}
           >
-            <StyledText desktopStyle="bodyDefaultRegular">{title}</StyledText>
+            <StyledText
+              desktopStyle="bodyDefaultRegular"
+              color={isDisabled ? COLORS.grey40 : COLORS.black90}
+            >
+              {title}
+            </StyledText>
             <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing4}>
-              {tooltipContent != null ? (
-                <Tooltip tooltipProps={tooltipProps}>{tooltipContent}</Tooltip>
-              ) : null}
               <StyledText
                 desktopStyle="bodyDefaultRegular"
-                color={COLORS.grey60}
-                {...targetProps}
+                color={isDisabled ? COLORS.grey40 : COLORS.grey60}
               >
                 {isSelected ? onLabel : offLabel}
               </StyledText>
-              {isDisabled ? null : (
-                <ToggleButton
-                  disabled={isDisabled}
-                  label={isSelected ? onLabel : offLabel}
-                  toggledOn={isSelected}
-                />
-              )}
+              <ToggleButton
+                disabled={isDisabled}
+                label={isSelected ? onLabel : offLabel}
+                toggledOn={isSelected}
+              />
             </Flex>
           </Flex>
         </Flex>

protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx

@@ -111,7 +111,10 @@ export function ProtocolSteps(): JSX.Element {
               gridGap={SPACING.spacing4}
             />
           ) : null}
-          <Flex justifyContent={JUSTIFY_SPACE_BETWEEN}>
+          <Flex
+            justifyContent={JUSTIFY_SPACE_BETWEEN}
+            alignItems={ALIGN_CENTER}
+          >
             {currentStep != null && hoveredTerminalItem == null ? (
               <StyledText desktopStyle="headingSmallBold">
                 {i18n.format(currentStep.stepName, 'capitalize')}