fix(app): fix quick transfer DQA spacing issues (#16068)

fixes a variety of quick transfer spacing and layout DQA issues closes RQA-2969, RQA-2970, RQA-2972, RQA-2978
Opentrons · Aug 20, 2024 · e6ae0f4 · e6ae0f4
1 parent ef3769d
commit e6ae0f4
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 121 deletions.
diff --git a/app/src/assets/localization/en/quick_transfer.json b/app/src/assets/localization/en/quick_transfer.json
@@ -151,5 +151,5 @@
   "well_ratio": "Quick transfers with multiple source wells can either be one-to-one (select {{wells}} for this transfer) or consolidate (select 1 destination well).",
   "well_selection": "Well selection",
   "wells": "wells",
-  "will_be_deleted": " will be permanently deleted."
+  "will_be_deleted": "<strong>{{transferName}}</strong> will be permanently deleted."
 }
diff --git a/app/src/organisms/QuickTransferFlow/ConfirmExitModal.tsx b/app/src/organisms/QuickTransferFlow/ConfirmExitModal.tsx
@@ -29,7 +29,7 @@ export const ConfirmExitModal = (props: ConfirmExitModalProps): JSX.Element => {
     >
       <Flex
         flexDirection={DIRECTION_COLUMN}
-        gridGap={SPACING.spacing10}
+        gridGap={SPACING.spacing32}
         width="100%"
       >
         <LegacyStyledText css={TYPOGRAPHY.bodyTextRegular}>

diff --git a/app/src/organisms/QuickTransferFlow/NameQuickTransfer.tsx b/app/src/organisms/QuickTransferFlow/NameQuickTransfer.tsx
@@ -6,12 +6,13 @@ import {
   LegacyStyledText,
   SPACING,
   DIRECTION_COLUMN,
+  JUSTIFY_CENTER,
   POSITION_FIXED,
   COLORS,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { getTopPortalEl } from '../../App/portal'
-import { AlphanumericKeyboard } from '../../atoms/SoftwareKeyboard'
+import { FullKeyboard } from '../../atoms/SoftwareKeyboard'
 import { InputField } from '../../atoms/InputField'
 import { ChildNavigation } from '../ChildNavigation'
 
@@ -42,42 +43,53 @@ export function NameQuickTransfer(props: NameQuickTransferProps): JSX.Element {
         buttonIsDisabled={name === '' || error != null}
       />
       <Flex
+        // height of ChildNavigation
         marginTop={SPACING.spacing120}
+        // height of keyboard
+        marginBottom="13.75rem"
+        // remainder of screen height
+        height="16.25rem"
         flexDirection={DIRECTION_COLUMN}
-        padding={`${SPACING.spacing16} ${SPACING.spacing60} ${SPACING.spacing40} ${SPACING.spacing60}`}
-        gridGap={SPACING.spacing4}
+        justifyContent={JUSTIFY_CENTER}
+        padding={`0 ${SPACING.spacing60}`}
         width="100%"
       >
-        <InputField
-          type="text"
-          value={name}
-          textAlign={TYPOGRAPHY.textAlignCenter}
-        />
-        <LegacyStyledText
-          as="p"
-          color={COLORS.grey60}
-          fontWeight={TYPOGRAPHY.fontWeightRegular}
-          textAlign={TYPOGRAPHY.textAlignCenter}
-        >
-          {t('enter_characters')}
-        </LegacyStyledText>
-        <LegacyStyledText
-          as="p"
-          color={COLORS.red50}
-          fontWeight={TYPOGRAPHY.fontWeightRegular}
-          textAlign={TYPOGRAPHY.textAlignCenter}
+        <Flex
+          flexDirection={DIRECTION_COLUMN}
+          gridGap={SPACING.spacing4}
+          width="100%"
         >
-          {error}
-        </LegacyStyledText>
-        <Flex width="100%" position={POSITION_FIXED} left="0" bottom="0">
-          <AlphanumericKeyboard
-            onChange={(input: string) => {
-              setName(input)
-            }}
-            keyboardRef={keyboardRef}
+          <InputField
+            type="text"
+            value={name}
+            textAlign={TYPOGRAPHY.textAlignCenter}
           />
+          <LegacyStyledText
+            as="p"
+            color={COLORS.grey60}
+            fontWeight={TYPOGRAPHY.fontWeightRegular}
+            textAlign={TYPOGRAPHY.textAlignCenter}
+          >
+            {t('enter_characters')}
+          </LegacyStyledText>
+          <LegacyStyledText
+            as="p"
+            color={COLORS.red50}
+            fontWeight={TYPOGRAPHY.fontWeightRegular}
+            textAlign={TYPOGRAPHY.textAlignCenter}
+          >
+            {error}
+          </LegacyStyledText>
         </Flex>
       </Flex>
+      <Flex width="100%" position={POSITION_FIXED} left="0" bottom="0">
+        <FullKeyboard
+          onChange={(input: string) => {
+            setName(input)
+          }}
+          keyboardRef={keyboardRef}
+        />
+      </Flex>
     </Flex>,
     getTopPortalEl()
   )

diff --git a/app/src/organisms/QuickTransferFlow/SaveOrRunModal.tsx b/app/src/organisms/QuickTransferFlow/SaveOrRunModal.tsx
@@ -33,13 +33,10 @@ export const SaveOrRunModal = (props: SaveOrRunModalProps): JSX.Element => {
     >
       <Flex
         flexDirection={DIRECTION_COLUMN}
-        gridGap={SPACING.spacing10}
+        gridGap={SPACING.spacing32}
         width="100%"
       >
-        <LegacyStyledText
-          css={TYPOGRAPHY.bodyTextRegular}
-          paddingBottom={SPACING.spacing24}
-        >
+        <LegacyStyledText css={TYPOGRAPHY.bodyTextRegular}>
           {t('save_to_run_later')}
         </LegacyStyledText>
         <Flex gridGap={SPACING.spacing8}>

diff --git a/app/src/organisms/QuickTransferFlow/SelectDestWells.tsx b/app/src/organisms/QuickTransferFlow/SelectDestWells.tsx
@@ -150,10 +150,11 @@ export function SelectDestWells(props: SelectDestWellsProps): JSX.Element {
       <Flex
         justifyContent={JUSTIFY_CENTER}
         marginTop={SPACING.spacing120}
-        padding={`${SPACING.spacing16} ${SPACING.spacing60} ${SPACING.spacing40} ${SPACING.spacing60}`}
+        padding={`${SPACING.spacing16} ${SPACING.spacing60} ${SPACING.spacing8} ${SPACING.spacing32}`}
         position={POSITION_FIXED}
         top="0"
         left="0"
+        height="80%"
         width="100%"
       >
         {labwareDefinition != null ? (

diff --git a/app/src/organisms/QuickTransferFlow/SelectSourceWells.tsx b/app/src/organisms/QuickTransferFlow/SelectSourceWells.tsx
@@ -82,10 +82,11 @@ export function SelectSourceWells(props: SelectSourceWellsProps): JSX.Element {
       <Flex
         justifyContent={JUSTIFY_CENTER}
         marginTop={SPACING.spacing120}
-        padding={`${SPACING.spacing16} ${SPACING.spacing60} ${SPACING.spacing40} ${SPACING.spacing60}`}
+        padding={`${SPACING.spacing16} ${SPACING.spacing60} ${SPACING.spacing8} ${SPACING.spacing32}`}
         position={POSITION_FIXED}
         top="0"
         left="0"
+        height="80%"
         width="100%"
       >
         {state.source != null && displayLabwareDefinition != null ? (

diff --git a/app/src/organisms/WellSelection/Selection384Wells.tsx b/app/src/organisms/WellSelection/Selection384Wells.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import flatten from 'lodash/flatten'
 
 import {
-  Box,
   Checkbox,
   DIRECTION_COLUMN,
   Flex,
@@ -131,16 +130,17 @@ export function Selection384Wells({
     )
   }
   return (
-    <Flex
-      justifyContent={JUSTIFY_SPACE_BETWEEN}
-      gridGap={SPACING.spacing40}
-      width="100%"
-    >
-      <Box flex="2 0 0">{labwareRender}</Box>
+    <Flex width="100%">
+      {labwareRender}
       <Flex
         flex="1 0 0"
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing32}
+        height="100%"
+        justifyContent={JUSTIFY_SPACE_BETWEEN}
+        marginLeft={`-${SPACING.spacing12}`}
+        paddingTop={SPACING.spacing24}
+        paddingBottom={SPACING.spacing40}
       >
         {channels === 1 ? (
           <SelectBy
@@ -196,34 +196,36 @@ function SelectBy({
       <LegacyStyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
         {i18n.format(t('select_by'), 'capitalize')}
       </LegacyStyledText>
-      <RadioButton
-        buttonLabel={i18n.format(t('columns'), 'capitalize')}
-        buttonValue="columns"
-        isSelected={selectBy === 'columns'}
-        onChange={() => {
-          setSelectBy('columns')
-          setLastSelectedIndex(lastSelectedIndex =>
-            lastSelectedIndex != null
-              ? Math.floor(lastSelectedIndex / ROW_COUNT_384)
-              : lastSelectedIndex
-          )
-        }}
-        radioButtonType="small"
-      />
-      <RadioButton
-        buttonLabel={i18n.format(t('wells'), 'capitalize')}
-        buttonValue="wells"
-        isSelected={selectBy === 'wells'}
-        onChange={() => {
-          setSelectBy('wells')
-          setLastSelectedIndex(lastSelectedIndex =>
-            lastSelectedIndex != null
-              ? (lastSelectedIndex + 1) * ROW_COUNT_384 - 1
-              : lastSelectedIndex
-          )
-        }}
-        radioButtonType="small"
-      />
+      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
+        <RadioButton
+          buttonLabel={i18n.format(t('columns'), 'capitalize')}
+          buttonValue="columns"
+          isSelected={selectBy === 'columns'}
+          onChange={() => {
+            setSelectBy('columns')
+            setLastSelectedIndex(lastSelectedIndex =>
+              lastSelectedIndex != null
+                ? Math.floor(lastSelectedIndex / ROW_COUNT_384)
+                : lastSelectedIndex
+            )
+          }}
+          radioButtonType="small"
+        />
+        <RadioButton
+          buttonLabel={i18n.format(t('wells'), 'capitalize')}
+          buttonValue="wells"
+          isSelected={selectBy === 'wells'}
+          onChange={() => {
+            setSelectBy('wells')
+            setLastSelectedIndex(lastSelectedIndex =>
+              lastSelectedIndex != null
+                ? (lastSelectedIndex + 1) * ROW_COUNT_384 - 1
+                : lastSelectedIndex
+            )
+          }}
+          radioButtonType="small"
+        />
+      </Flex>
     </Flex>
   )
 }
@@ -269,27 +271,29 @@ function StartingWell({
       <LegacyStyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
         {i18n.format(t('starting_well'), 'capitalize')}
       </LegacyStyledText>
-      {checkboxWellOptions.map(well => (
-        <Checkbox
-          key={well}
-          isChecked={startingWellState[well]}
-          labelText={well}
-          onClick={() => {
-            if (channels === 96) {
-              if (startingWellState[well]) {
-                deselectWells([well])
-              } else {
-                selectWells({ [well]: null })
+      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
+        {checkboxWellOptions.map(well => (
+          <Checkbox
+            key={well}
+            isChecked={startingWellState[well]}
+            labelText={well}
+            onClick={() => {
+              if (channels === 96) {
+                if (startingWellState[well]) {
+                  deselectWells([well])
+                } else {
+                  selectWells({ [well]: null })
+                }
               }
-            }
 
-            setStartingWellState(startingWellState => ({
-              ...startingWellState,
-              [well]: !startingWellState[well],
-            }))
-          }}
-        />
-      ))}
+              setStartingWellState(startingWellState => ({
+                ...startingWellState,
+                [well]: !startingWellState[well],
+              }))
+            }}
+          />
+        ))}
+      </Flex>
     </Flex>
   )
 }
@@ -321,7 +325,7 @@ function ButtonControls(props: ButtonControlsProps): JSX.Element {
             'capitalize'
           )}
         </LegacyStyledText>
-        <Flex gridGap={SPACING.spacing16}>
+        <Flex gridGap={SPACING.spacing16} height="6.5rem">
           <IconButton
             disabled={minusDisabled}
             onClick={handleMinus}

diff --git a/app/src/pages/QuickTransferDashboard/DeleteTransferConfirmationModal.tsx b/app/src/pages/QuickTransferDashboard/DeleteTransferConfirmationModal.tsx
@@ -1,21 +1,17 @@
 import * as React from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useQueryClient } from 'react-query'
-import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { Trans, useTranslation } from 'react-i18next'
 
 import { deleteProtocol, deleteRun, getProtocol } from '@opentrons/api-client'
 import {
   ALIGN_CENTER,
-  Box,
   COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   Flex,
-  OVERFLOW_HIDDEN,
-  OVERFLOW_WRAP_ANYWHERE,
   SPACING,
-  TYPOGRAPHY,
+  StyledText,
 } from '@opentrons/components'
 import { useHost, useProtocolQuery } from '@opentrons/react-api-client'
 
@@ -97,10 +93,17 @@ export function DeleteTransferConfirmationModal({
         gridGap={SPACING.spacing32}
         width="100%"
       >
-        <Box width="100%">
-          <TransferNameText>{transferName}</TransferNameText>
-          <AdditionalText>{t('will_be_deleted')}</AdditionalText>
-        </Box>
+        <Flex width="100%">
+          <StyledText oddStyle="bodyTextRegular">
+            <Trans
+              t={t}
+              i18nKey="will_be_deleted"
+              values={{
+                transferName,
+              }}
+            />
+          </StyledText>
+        </Flex>
         <Flex
           flexDirection={DIRECTION_ROW}
           gridGap={SPACING.spacing8}
@@ -124,21 +127,3 @@ export function DeleteTransferConfirmationModal({
     </Modal>
   )
 }
-
-const TransferNameText = styled.span`
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: ${OVERFLOW_HIDDEN};
-  overflow-wrap: ${OVERFLOW_WRAP_ANYWHERE};
-  font-weight: ${TYPOGRAPHY.fontWeightBold};
-  font-size: ${TYPOGRAPHY.fontSize22};
-  line-height: ${TYPOGRAPHY.lineHeight28};
-  color: ${COLORS.grey60};
-`
-const AdditionalText = styled.span`
-  font-weight: ${TYPOGRAPHY.fontWeightRegular};
-  font-size: ${TYPOGRAPHY.fontSize22};
-  line-height: ${TYPOGRAPHY.lineHeight28};
-  color: ${COLORS.grey60};
-`