fix(app): fix small ui bugs in Protocol Visualization page (#20196)

* fix(app): fix small ui bugs in Protocol Visualization page

Author: koji

app/src/assets/localization/en/protocol_visualization.json

@@ -14,16 +14,16 @@
   "none_attached": "None attached",
   "percent_complete": "{{percent}}% complete",
   "pipette": "Pipette",
+  "protocol_steps": "Protocol Steps",
   "quantity": "Quantity: {{quantity}}",
   "remaining_tips": "{{remaining}} tips",
   "right_mount": "RIGHT MOUNT",
   "seconds_per_step": "{{seconds}}s per step",
   "source_tips": "Source tips",
   "source_well_view": "Source well view",
   "step": "Step {{number}}",
-  "timeline": "Timeline",
   "tip_disposal": "Tip disposal",
-  "tipPickup": "Tip pickup",
+  "tip_pickup": "Tip pickup",
   "tips_in_trash": "Tips in trash",
   "tips_remaining": "Tips remaining",
   "trash_bin": "TRASH BIN",

app/src/organisms/Desktop/ProtocolVisualization/CommandSteps/__tests__/CommandSteps.test.tsx

@@ -32,7 +32,7 @@ describe('CommandSteps', () => {
   })
   it('should render header text', () => {
     render(props)
-    screen.getByText('Timeline')
+    screen.getByText('Protocol Steps')
     screen.getByText('50% complete')
   })
 

app/src/organisms/Desktop/ProtocolVisualization/CommandSteps/index.tsx

@@ -33,7 +33,7 @@ export function CommandSteps(props: CommandStepsProps): JSX.Element {
       <div className={styles.command_step}>
         <div className={styles.command_step_header}>
           <StyledText desktopStyle="bodyDefaultSemiBold">
-            {t('timeline')}
+            {t('protocol_steps')}
           </StyledText>
           <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
             {t('percent_complete', { percent: percentComplete.toFixed(0) })}

app/src/organisms/Desktop/ProtocolVisualization/DeckView/index.tsx

@@ -132,7 +132,7 @@ export function DeckView(props: DeckViewProps): JSX.Element {
   return (
     <div className={styles.deck_view_container}>
       <div className={styles.header_container}>
-        <StyledText desktopStyle="bodyLargeSemiBold">
+        <StyledText desktopStyle="bodyDefaultSemiBold">
           {t('deck_view')}
         </StyledText>
         <StyledText

app/src/organisms/Desktop/ProtocolVisualization/TipPickupContainer.tsx

@@ -52,7 +52,7 @@ export function TipPickupContainer(
   return (
     <div className={styles.container}>
       <div className={styles.header}>
-        <Tag text={t('tipPickup')} type="default" shrinkToContent />
+        <Tag text={t('tip_pickup')} type="default" shrinkToContent />
         <RobotInfoLabel deckLabel={slot} />
       </div>
       <div className={styles.subheader}>