From ed5a290fe16b1826523fa6948a6d10c5de6dd2d3 Mon Sep 17 00:00:00 2001
From: ncdiehl11 <ndiehl@opentrons.com>
Date: Mon, 18 Nov 2024 11:18:01 -0500
Subject: [PATCH] fix(components, protocol-designer): fix toolbox and transfer
 tools styling

Add title padding prop to toolbox and set default. Fix shared DropdownMenu component spacing between
title and dropdown

Closes RQA-3414
---
 components/src/molecules/DropdownMenu/index.tsx           | 8 ++------
 components/src/organisms/Toolbox/index.tsx                | 4 +++-
 .../Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx   | 4 +---
 .../Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx   | 2 ++
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
index 851e759abca..af24cbf075d 100644
--- a/components/src/molecules/DropdownMenu/index.tsx
+++ b/components/src/molecules/DropdownMenu/index.tsx
@@ -205,15 +205,11 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     <Flex
       flexDirection={DIRECTION_COLUMN}
       ref={dropDownMenuWrapperRef}
-      gridGap={SPACING.spacing4}
+      gridGap={SPACING.spacing8}
       width={width}
     >
       {title !== null ? (
-        <Flex
-          gridGap={SPACING.spacing8}
-          paddingBottom={SPACING.spacing8}
-          alignItems={ALIGN_CENTER}
-        >
+        <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
           <StyledText
             desktopStyle="bodyDefaultRegular"
             color={disabled ? COLORS.grey35 : COLORS.grey60}
diff --git a/components/src/organisms/Toolbox/index.tsx b/components/src/organisms/Toolbox/index.tsx
index 35e4083643b..de1748601c8 100644
--- a/components/src/organisms/Toolbox/index.tsx
+++ b/components/src/organisms/Toolbox/index.tsx
@@ -25,6 +25,7 @@ export interface ToolboxProps {
   closeButton?: JSX.Element
   side?: 'left' | 'right'
   horizontalSide?: 'top' | 'bottom'
+  titlePadding?: string
   childrenPadding?: string
   subHeader?: JSX.Element | null
   secondaryHeaderButton?: JSX.Element
@@ -45,6 +46,7 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
     side = 'right',
     horizontalSide = 'bottom',
     confirmButton,
+    titlePadding = SPACING.spacing16,
     childrenPadding = SPACING.spacing16,
     subHeader,
     secondaryHeaderButton,
@@ -97,7 +99,7 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
         justifyContent={JUSTIFY_SPACE_BETWEEN}
       >
         <Flex
-          padding={`${SPACING.spacing20} ${SPACING.spacing16}`}
+          padding={titlePadding}
           flexDirection={DIRECTION_COLUMN}
           borderBottom={`1px solid ${COLORS.grey30}`}
         >
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx
index 922220b7e81..3a1ddff44f0 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx
@@ -5,7 +5,6 @@ import {
   Flex,
   Icon,
   PrimaryButton,
-  SPACING,
   StyledText,
   Toolbox,
 } from '@opentrons/components'
@@ -62,7 +61,6 @@ export function SubstepsToolbox(
     substeps.substepType === THERMOCYCLER_PROFILE ? (
     <Toolbox
       width={FLEX_MAX_CONTENT}
-      childrenPadding="0"
       closeButton={<Icon size="2rem" name="close" />}
       onCloseClick={handleClose}
       confirmButton={
@@ -81,7 +79,7 @@ export function SubstepsToolbox(
         </StyledText>
       }
     >
-      <Flex padding={SPACING.spacing12}>
+      <Flex>
         {substeps.substepType === THERMOCYCLER_PROFILE ? (
           <ThermocyclerProfileSubsteps key="substeps" stepId={stepId} />
         ) : (
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
index 76c5afa9540..2c59e33314e 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
@@ -66,6 +66,8 @@ export const TimelineToolbox = (): JSX.Element => {
           {t('protocol_timeline')}
         </StyledText>
       }
+      titlePadding={SPACING.spacing12}
+      childrenPadding={SPACING.spacing12}
       confirmButton={formData != null ? undefined : <AddStepButton />}
     >
       <Flex