update navbar to align with the design

Opentrons · Nov 14, 2024 · 7421514 · 7421514
1 parent 8685d7b
commit 7421514
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/protocol-designer/src/organisms/ProtocolNavBar/index.tsx b/protocol-designer/src/organisms/ProtocolNavBar/index.tsx
@@ -30,6 +30,7 @@ interface ProtocolNavBarProps {
   showLiquidOverflowMenu?: (liquidOverflowMenu: boolean) => void
   isAddingHardwareOrLabware?: boolean
   liquidPage?: boolean
+  isOffDeck?: boolean
 }
 
 export function ProtocolNavBar({
@@ -39,6 +40,7 @@ export function ProtocolNavBar({
   hasTrashEntity,
   showLiquidOverflowMenu,
   liquidPage = false,
+  isOffDeck = false,
 }: ProtocolNavBarProps): JSX.Element {
   const { t } = useTranslation('starting_deck_state')
   const metadata = useSelector(getFileMetadata)
@@ -54,13 +56,18 @@ export function ProtocolNavBar({
         <StyledText
           desktopStyle="bodyDefaultSemiBold"
           css={LINE_CLAMP_TEXT_STYLE(1)}
+          textAlign={isOffDeck && TYPOGRAPHY.textAlignLeft}
         >
           {metadata?.protocolName != null && metadata?.protocolName !== ''
             ? metadata?.protocolName
             : t('untitled_protocol')}
         </StyledText>
-        <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
-          {isAddingHardwareOrLabware
+        <StyledText
+          desktopStyle="bodyDefaultRegular"
+          color={COLORS.grey60}
+          textAlign={isOffDeck && TYPOGRAPHY.textAlignLeft}
+        >
+          {isAddingHardwareOrLabware || isOffDeck
             ? t('add_hardware_labware')
             : t('edit_protocol')}
         </StyledText>

diff --git a/protocol-designer/src/pages/Designer/index.tsx b/protocol-designer/src/pages/Designer/index.tsx
@@ -158,6 +158,7 @@ export function Designer(): JSX.Element {
           hasTrashEntity={hasTrashEntity}
           showLiquidOverflowMenu={showLiquidOverflowMenu}
           tabs={[startingDeckTab, protocolStepTab]}
+          isOffDeck={deckView !== leftString}
         />
 
         {tab === 'startingDeck' ? (