fix(app): fix DeckFixtureSetupInstructions modal to align with the la…

…test design (#13748) * fix(app): fix DeckFixtureSetupInstructions modal to align with the latest design
Opentrons · Oct 10, 2023 · f73772c · f73772c
1 parent 981b3cb
commit f73772c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 31 deletions.
diff --git a/app/src/assets/localization/en/device_details.json b/app/src/assets/localization/en/device_details.json
@@ -35,7 +35,8 @@
   "deck_cal_missing": "Pipette Offset calibration missing. Calibrate deck first.",
   "deck_configuration": "deck configuration",
   "deck_fixture_setup_instructions": "Deck fixture setup instructions",
-  "deck_fixture_setup_modal_bottom_description": "For detailed instructions for different types of fixtures, scan the QR code or go to the link below.",
+  "deck_fixture_setup_modal_bottom_description_desktop": "For detailed instructions for different types of fixtures, scan the QR code or go to the link below.",
+  "deck_fixture_setup_modal_bottom_description": "For details on installing different fixture types, scan the QR code or search for “deck configuration” on support.opentrons.com",
   "deck_fixture_setup_modal_top_description": "First, unscrew and remove the deck slot where you'll install a fixture. Then put the fixture in place and attach it as needed.",
   "deck_slot": "deck slot {{slot}}",
   "delete_run": "Delete protocol run record",

diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckFixtureSetupInstructionsModal.tsx
@@ -2,14 +2,12 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   ALIGN_FLEX_END,
-  BORDERS,
   COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   Flex,
   PrimaryButton,
   SPACING,
-  TYPOGRAPHY,
 } from '@opentrons/components'
 import { StyledText } from '../../atoms/text'
 import { ExternalLink } from '../../atoms/Link/ExternalLink'
@@ -21,8 +19,7 @@ import type { LegacyModalProps } from '../../molecules/LegacyModal'
 
 import imgSrc from '../../assets/images/on-device-display/deck_fixture_setup_qrcode.png'
 
-const SETUP_INSTRUCTION_URL = 'www.opentrons.com/support/fixtures'
-const SETUP_INSTRUCTION_EXTERNAL_URL =
+const SETUP_INSTRUCTION_URL =
   'https://support.opentrons.com/s/article/Deck-configuration-on-Opentrons-Flex'
 const IMG_ALT = 'QRCode for Deck fixture setup instructions page'
 
@@ -59,28 +56,15 @@ export function DeckFixtureSetupInstructionsModal({
           onOutsideClick={() => setShowSetupInstructionsModal(false)}
         >
           <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing40}>
-            <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing24}>
-              <Flex
-                flexDirection={DIRECTION_COLUMN}
-                gridGap={SPACING.spacing12}
-              >
-                <StyledText as="p">
-                  {t('deck_fixture_setup_modal_top_description')}
-                </StyledText>
-                <StyledText as="p">
-                  {t('deck_fixture_setup_modal_bottom_description')}
-                </StyledText>
-              </Flex>
-              <Flex
-                padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-                backgroundColor={COLORS.light1}
-                borderRadius={BORDERS.borderRadiusSize3}
-              >
-                <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
-                  {SETUP_INSTRUCTION_URL}
-                </StyledText>
-              </Flex>
+            <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing12}>
+              <StyledText as="p">
+                {t('deck_fixture_setup_modal_top_description')}
+              </StyledText>
+              <StyledText as="p">
+                {t('deck_fixture_setup_modal_bottom_description')}
+              </StyledText>
             </Flex>
+
             <Flex>
               <img src={imgSrc} alt={IMG_ALT} width="178px" height="178px" />
             </Flex>
@@ -96,16 +80,16 @@ export function DeckFixtureSetupInstructionsModal({
               >
                 <Flex
                   flexDirection={DIRECTION_COLUMN}
-                  gridGap={SPACING.spacing32}
+                  gridGap={SPACING.spacing16}
                 >
                   <StyledText as="p">
                     {t('deck_fixture_setup_modal_top_description')}
                   </StyledText>
                   <StyledText as="p">
-                    {t('deck_fixture_setup_modal_bottom_description')}
+                    {t('deck_fixture_setup_modal_bottom_description_desktop')}
                   </StyledText>
                 </Flex>
-                <ExternalLink href={SETUP_INSTRUCTION_EXTERNAL_URL}>
+                <ExternalLink href={SETUP_INSTRUCTION_URL}>
                   {t('deck_fixture_setup_instructions')}
                 </ExternalLink>
               </Flex>

diff --git a/...nisms/DeviceDetailsDeckConfiguration/__tests__/DeckFixtureSetupInstructionsModal.test.tsx b/...nisms/DeviceDetailsDeckConfiguration/__tests__/DeckFixtureSetupInstructionsModal.test.tsx
@@ -16,6 +16,7 @@ const render = (
     i18nInstance: i18n,
   })
 }
+
 describe('Touchscreen DeckFixtureSetupInstructionsModal', () => {
   let props: React.ComponentProps<typeof DeckFixtureSetupInstructionsModal>
 
@@ -33,11 +34,10 @@ describe('Touchscreen DeckFixtureSetupInstructionsModal', () => {
       "First, unscrew and remove the deck slot where you'll install a fixture. Then put the fixture in place and attach it as needed."
     )
     getByText(
-      'For detailed instructions for different types of fixtures, scan the QR code or go to the link below.'
+      'For details on installing different fixture types, scan the QR code or search for “deck configuration” on support.opentrons.com'
     )
     const img = getByRole('img')
     expect(img.getAttribute('src')).toEqual(PNG_FILE_NAME)
-    getByText('www.opentrons.com/support/fixtures')
   })
 
   it('should call a mock function when tapping the close icon', () => {