refactor(protocol-designer): dQA for deck setup and protocol overview (#18525)

closes RQA-2122, RQA-4212, RQA-4213, RQA-4214, RQA-4215, RQA-4217,
RQA-4218, RQA-4231,

Author: jerader

protocol-designer/src/assets/localization/en/protocol_steps.json

@@ -26,7 +26,7 @@
   },
   "change_tips": "Change tips",
   "column": "Column",
-  "configurations": "Configurations",
+  "configuration": "Configuration",
   "consolidate": "Conslidate",
   "of": "of",
   "comfirm_reset_settings": {

protocol-designer/src/assets/localization/en/shared.json

@@ -19,6 +19,7 @@
   "copyright": "Copyright © {{year}} Opentrons",
   "create_a_protocol": "Create a protocol",
   "create_new": "Create new",
+  "deck_hardware": "Deck Hardware",
   "destination_well": "Destination Well",
   "developer_ff": "Developer Feature Flags",
   "done": "Done",

protocol-designer/src/assets/localization/en/starting_deck_state.json

@@ -22,7 +22,6 @@
   "convert_gen1_to_gen2": "To convert engage heights from GEN1 to GEN2, divide your engage height by 2.",
   "convert_gen2_to_gen1": "To convert engage heights from GEN2 to GEN1, multiply your engage height by 2.",
   "custom": "Custom labware definitions",
-  "customize_slot": "Customize slot",
   "deck_hardware": "Deck hardware",
   "deck_slots_full": "Deck slots are full",
   "define_liquid": "Define a liquid",

protocol-designer/src/components/molecules/LiquidButton/index.tsx

@@ -38,7 +38,13 @@ export function LiquidButton({
         name="water-drop"
         data-testid="water-drop"
       />
-      <StyledText desktopStyle="bodyDefaultSemiBold">{t('liquids')}</StyledText>
+      <StyledText
+        desktopStyle={
+          isInToolbox ? 'bodyDefaultRegular' : 'bodyDefaultSemiBold'
+        }
+      >
+        {t('liquids')}
+      </StyledText>
     </Btn>
   )
 }

protocol-designer/src/pages/Designer/DeckSetup/DeckSetupToolbox.tsx

@@ -249,7 +249,7 @@ export function DeckSetupToolbox(
               }
             />
             <StyledText desktopStyle="bodyLargeSemiBold">
-              {t('customize_slot')}
+              {t('edit_labware')}
             </StyledText>
           </Flex>
         }

protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupToolbox.test.tsx

@@ -107,7 +107,7 @@ describe('DeckSetupToolbox', () => {
   })
   it('should render empty labware and add labware CTA opens modal ', () => {
     render(props)
-    screen.getByText('Customize slot')
+    screen.getByText('Edit labware')
     screen.getByText('Add labware')
     screen.getByText('No labware added')
     screen.getByText('Select labware to add to slot')

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/Configurations.tsx

@@ -36,9 +36,9 @@ export function Configurations({
           desktopStyle="bodyDefaultSemiBold"
           css={LINE_CLAMP_TEXT_STYLE(1)}
         >
-          {t('configurations')}
+          {t('configuration')}
         </StyledText>
-        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
           <HardwareStep sidebarWidth={sidebarWidth} />
           <LiquidButton
             showLiquidOverflowMenu={showLiquidOverflowMenu}

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx

@@ -131,9 +131,9 @@ export function TimelineToolbox({
       maxHeight={`calc(100vh - ${NAV_BAR_HEIGHT_REM}rem - 2 * ${SPACING.spacing12})`}
       width={`${sidebarWidth / 16}rem`}
       title={
-        <Flex flexDirection={DIRECTION_COLUMN}>
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
           <StyledText
-            desktopStyle="bodyDefaultSemiBold"
+            desktopStyle="bodyLargeSemiBold"
             overflowWrap={OVERFLOW_WRAP_ANYWHERE}
             css={LINE_CLAMP_TEXT_STYLE(1)}
           >

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/Configurations.test.tsx

@@ -34,7 +34,7 @@ describe('Configurations', () => {
 
   it('should render test and mock components', () => {
     render(props)
-    screen.getByText('Configurations')
+    screen.getByText('Configuration')
     screen.getByText('mock LiquidButton')
     screen.getByText('mock HardwareStep')
   })

protocol-designer/src/pages/ProtocolOverview/HardwareInfo.tsx

@@ -41,14 +41,14 @@ export function HardwareInfo({
   const { t } = useTranslation(['protocol_overview', 'shared'])
   const navigate = useNavigate()
   const isFlex = robotType === FLEX_ROBOT_TYPE
-  const tCSlot = isFlex ? 'A1, B1' : '7,8,10,11'
+  const tCSlot = isFlex ? 'A1+B1' : '7,8,10,11'
   const additionalEquipmentLength = Object.keys(additionalEquipment).length
 
   return (
     <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing12}>
       <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_CENTER}>
         <StyledText desktopStyle="headingSmallBold">
-          {isFlex ? t('deck_hardware') : t('modules')}
+          {isFlex ? t('shared:deck_hardware') : t('modules')}
         </StyledText>
         <Flex padding={SPACING.spacing4}>
           <Btn