feat(app): Robot Settings Design QA 2 (#11020)

jerader · web-flow · commit 8b439959d97c · 2022-07-12T17:29:24.000-04:00
closes #10893
diff --git a/app/src/atoms/buttons/index.tsx b/app/src/atoms/buttons/index.tsx
@@ -140,9 +140,46 @@ export const SecondaryButton = styled(NewSecondaryBtn)`
   }
 `
 
+const TOGGLE_DISABLED_STYLES = css`
+  color: ${COLORS.darkGreyEnabled};
+
+  &:hover {
+    color: ${COLORS.darkGreyHover};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${COLORS.warning};
+  }
+
+  &:disabled {
+    colors: ${COLORS.greyDisabled};
+  }
+`
+
+const TOGGLE_ENABLED_STYLES = css`
+  color: ${COLORS.blue};
+
+  &:hover {
+    color: ${COLORS.blueHover};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${COLORS.warning};
+  }
+
+  &:disabled {
+    colors: ${COLORS.greyDisabled};
+  }
+`
+
 export const ToggleButton = (props: ToggleBtnProps): JSX.Element => {
-  const color = props.toggledOn ? COLORS.blue : COLORS.darkGreyEnabled
-  return <ToggleBtn size={SIZE_2} color={color} {...props} />
+  return (
+    <ToggleBtn
+      size={SIZE_2}
+      css={props.toggledOn ? TOGGLE_ENABLED_STYLES : TOGGLE_DISABLED_STYLES}
+      {...props}
+    />
+  )
 }
 
 interface SubmitPrimaryButtonProps {
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx b/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx
@@ -69,7 +69,7 @@ export function SetupCalibrationItem({
               size={SIZE_1}
               color={calibratedDate != null ? COLORS.success : COLORS.warning}
               marginRight={SPACING.spacing4}
-              name={calibratedDate != null ? 'check-circle' : 'alert-circle'}
+              name={calibratedDate != null ? 'ot-check' : 'alert-circle'}
             />
           ) : null}
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing2}>
diff --git a/app/src/organisms/Devices/ProtocolRun/SetupStep.tsx b/app/src/organisms/Devices/ProtocolRun/SetupStep.tsx
@@ -113,9 +113,7 @@ export function SetupStep({
                     }
                     marginRight={SPACING.spacing3}
                     name={
-                      calibrationStatusComplete
-                        ? 'check-circle'
-                        : 'alert-circle'
+                      calibrationStatusComplete ? 'ot-check' : 'alert-circle'
                     }
                     id={'RunSetupCard_calibrationIcon'}
                   />
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisableHoming.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisableHoming.tsx
@@ -6,9 +6,9 @@ import {
   Flex,
   ALIGN_CENTER,
   JUSTIFY_SPACE_BETWEEN,
-  Box,
-  SPACING,
   TYPOGRAPHY,
+  SPACING,
+  Box,
 } from '@opentrons/components'
 
 import { StyledText } from '../../../../atoms/text'
@@ -48,9 +48,8 @@ export function DisableHoming({
     <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN}>
       <Box width="70%">
         <StyledText
-          as="h2"
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          paddingBottom={SPACING.spacing4}
+          css={TYPOGRAPHY.pSemiBold}
+          paddingBottom={SPACING.spacing2}
           id="AdvancedSettings_disableHoming"
         >
           {t('disable_homing')}
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/FactoryReset.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/FactoryReset.tsx
@@ -5,9 +5,9 @@ import {
   Flex,
   ALIGN_CENTER,
   JUSTIFY_SPACE_BETWEEN,
-  Box,
   SPACING,
   SPACING_AUTO,
+  Box,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -42,9 +42,8 @@ export function FactoryReset({
     <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN}>
       <Box width="70%">
         <StyledText
-          as="h2"
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          marginBottom={SPACING.spacing4}
+          css={TYPOGRAPHY.pSemiBold}
+          marginBottom={SPACING.spacing2}
           id="AdvancedSettings_factoryReset"
         >
           {t('factory_reset')}
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/LegacySettings.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/LegacySettings.tsx
@@ -45,7 +45,11 @@ export function LegacySettings({
   }
 
   return (
-    <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN}>
+    <Flex
+      alignItems={ALIGN_CENTER}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      marginTop="2.5rem"
+    >
       <Box width="70%">
         <StyledText
           as="h2"
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/OpenJupyterControl.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/OpenJupyterControl.tsx
@@ -34,9 +34,8 @@ export function OpenJupyterControl({
     <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN}>
       <Box width="70%">
         <StyledText
-          as="h2"
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          marginBottom={SPACING.spacing4}
+          css={TYPOGRAPHY.pSemiBold}
+          marginBottom={SPACING.spacing2}
           id="AdvancedSettings_About"
         >
           {t('jupyter_notebook')}
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotServerVersion.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotServerVersion.tsx
@@ -62,9 +62,8 @@ export function RobotServerVersion({
       <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN}>
         <Box width="70%">
           <StyledText
-            as="h2"
-            fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-            paddingBottom={SPACING.spacing4}
+            css={TYPOGRAPHY.pSemiBold}
+            paddingBottom={SPACING.spacing2}
             id="AdvancedSettings_RobotServerVersion"
           >
             {t('robot_server_versions')}
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx
@@ -48,9 +48,8 @@ export function ShortTrashBin({
     <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN}>
       <Box width="70%">
         <StyledText
-          as="h2"
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          paddingBottom={SPACING.spacing4}
+          css={TYPOGRAPHY.pSemiBold}
+          paddingBottom={SPACING.spacing2}
           id="AdvancedSettings_devTools"
         >
           {t('short_trash_bin')}
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/Troubleshooting.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/Troubleshooting.tsx
@@ -48,7 +48,11 @@ export function Troubleshooting({
   }, [robotLogsDownloading, updateDownloadLogsStatus])
 
   return (
-    <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN}>
+    <Flex
+      alignItems={ALIGN_CENTER}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      marginTop="2.5rem"
+    >
       <Box width="70%">
         <StyledText
           as="h2"
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/UpdateRobotSoftware.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/UpdateRobotSoftware.tsx
@@ -7,12 +7,12 @@ import {
   Flex,
   ALIGN_CENTER,
   JUSTIFY_SPACE_BETWEEN,
-  Box,
   SPACING,
   SPACING_AUTO,
-  TYPOGRAPHY,
+  Box,
   Tooltip,
   useHoverTooltip,
+  TYPOGRAPHY,
 } from '@opentrons/components'
 
 import { StyledText } from '../../../../atoms/text'
@@ -68,13 +68,12 @@ export function UpdateRobotSoftware({
     <Flex
       alignItems={ALIGN_CENTER}
       justifyContent={JUSTIFY_SPACE_BETWEEN}
-      marginBottom={SPACING.spacing5}
+      marginBottom={SPACING.spacing4}
     >
       <Box width="70%">
         <StyledText
-          as="h2"
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          marginBottom={SPACING.spacing4}
+          css={TYPOGRAPHY.pSemiBold}
+          marginBottom={SPACING.spacing2}
           id="AdvancedSettings_updateRobotSoftware"
         >
           {t('update_robot_software')}
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx
@@ -6,9 +6,9 @@ import {
   Flex,
   ALIGN_CENTER,
   JUSTIFY_SPACE_BETWEEN,
-  Box,
   SPACING,
   TYPOGRAPHY,
+  Box,
 } from '@opentrons/components'
 
 import { StyledText } from '../../../../atoms/text'
@@ -45,12 +45,15 @@ export function UsageSettings({
   }
 
   return (
-    <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN}>
+    <Flex
+      alignItems={ALIGN_CENTER}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      marginTop="2.5rem"
+    >
       <Box width="70%">
         <StyledText
-          as="h2"
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          paddingBottom={SPACING.spacing4}
+          css={TYPOGRAPHY.h2SemiBold}
+          marginBottom={SPACING.spacing4}
           id="AdvancedSettings_UsageSettings"
         >
           {t('usage_settings')}
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/UseOlderAspirateBehavior.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/UseOlderAspirateBehavior.tsx
@@ -6,8 +6,8 @@ import {
   Flex,
   ALIGN_CENTER,
   JUSTIFY_SPACE_BETWEEN,
-  Box,
   SPACING,
+  Box,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -48,9 +48,8 @@ export function UseOlderAspirateBehavior({
     <Flex alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN}>
       <Box width="70%">
         <StyledText
-          as="h2"
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          paddingBottom={SPACING.spacing4}
+          css={TYPOGRAPHY.pSemiBold}
+          paddingBottom={SPACING.spacing2}
           id="AdvancedSettings_devTools"
         >
           {t('use_older_aspirate')}
diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/UseOlderProtocol.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/UseOlderProtocol.tsx
@@ -6,8 +6,8 @@ import {
   Flex,
   ALIGN_CENTER,
   JUSTIFY_SPACE_BETWEEN,
-  Box,
   SPACING,
+  Box,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -47,13 +47,12 @@ export function UseOlderProtocol({
     <Flex
       alignItems={ALIGN_CENTER}
       justifyContent={JUSTIFY_SPACE_BETWEEN}
-      marginBottom={SPACING.spacing5}
+      marginBottom={SPACING.spacing4}
     >
       <Box width="70%">
         <StyledText
-          as="h2"
-          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-          paddingBottom={SPACING.spacing4}
+          css={TYPOGRAPHY.pSemiBold}
+          paddingBottom={SPACING.spacing2}
           id="AdvancedSettings_showLink"
         >
           {t('use_older_protocol_analysis_method')}
diff --git a/app/src/organisms/Devices/RobotSettings/CalibrationDetails/OverflowMenu.tsx b/app/src/organisms/Devices/RobotSettings/CalibrationDetails/OverflowMenu.tsx
@@ -34,6 +34,7 @@ import {
 } from '../../hooks'
 import { useCalibratePipetteOffset } from '../../../CalibratePipetteOffset/useCalibratePipetteOffset'
 import { DeckCalibrationConfirmModal } from '../DeckCalibrationConfirmModal'
+import { useMenuHandleClickOutside } from '../../../../atoms/MenuList/hooks'
 
 const CAL_BLOCK_MODAL_CLOSED: 'cal_block_modal_closed' =
   'cal_block_modal_closed'
@@ -64,7 +65,12 @@ export function OverflowMenu({
 }: OverflowMenuProps): JSX.Element {
   const { t } = useTranslation('device_settings')
   const doTrackEvent = useTrackEvent()
-  const [showOverflowMenu, setShowOverflowMenu] = React.useState<boolean>(false)
+  const {
+    menuOverlay,
+    handleOverflowClick,
+    showOverflowMenu,
+    setShowOverflowMenu,
+  } = useMenuHandleClickOutside()
   const { isDeckCalibrated } = useDeckCalibrationData(robotName)
 
   const calsOverflowWrapperRef = useOnClickOutside({
@@ -177,12 +183,6 @@ export function OverflowMenu({
     setShowOverflowMenu(!showOverflowMenu)
   }
 
-  const handleOverflowClick: React.MouseEventHandler<HTMLButtonElement> = e => {
-    e.preventDefault()
-    e.stopPropagation()
-    setShowOverflowMenu(!showOverflowMenu)
-  }
-
   // TODO 5/6/2021 kj: This is scoped out from 6.0
   // const handleDeleteCalibrationData = (
   //   calType: 'pipetteOffset' | 'tipLength'
@@ -214,13 +214,13 @@ export function OverflowMenu({
       {showOverflowMenu ? (
         <Flex
           ref={calsOverflowWrapperRef}
-          width={calType === 'pipetteOffset' ? '11.25rem' : '17.25rem'}
+          width={calType === 'pipetteOffset' ? '11.5rem' : '17.25rem'}
           zIndex={10}
           borderRadius={'4px 4px 0px 0px'}
           boxShadow={'0px 1px 3px rgba(0, 0, 0, 0.2)'}
           position={POSITION_ABSOLUTE}
           backgroundColor={COLORS.white}
-          top="3rem"
+          top="2.3rem"
           right={0}
           flexDirection={DIRECTION_COLUMN}
         >
@@ -257,6 +257,7 @@ export function OverflowMenu({
           />
         </Portal>
       ) : null}
+      {menuOverlay}
     </Flex>
   )
 }
diff --git a/app/src/organisms/Devices/RobotSettings/CalibrationDetails/PipetteOffsetCalibrationItems.tsx b/app/src/organisms/Devices/RobotSettings/CalibrationDetails/PipetteOffsetCalibrationItems.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import {
   Flex,
@@ -11,6 +11,7 @@ import {
   COLORS,
   TEXT_TRANSFORM_CAPITALIZE,
   TYPOGRAPHY,
+  BORDERS,
 } from '@opentrons/components'
 
 import { StyledText } from '../../../../atoms/text'
@@ -33,13 +34,18 @@ const StyledTableHeader = styled.th`
   padding: ${SPACING.spacing3};
 `
 const StyledTableRow = styled.tr`
-  padding: ${SPACING.spacing3}; ;
+  padding: ${SPACING.spacing3};
+  border-bottom: ${BORDERS.lineBorder};
 `
 const StyledTableCell = styled.td`
   padding: ${SPACING.spacing3};
   text-overflow: wrap;
 `
 
+const BODY_STYLE = css`
+  box-shadow: 0 0 0 1px ${COLORS.medGrey};
+  border-radius: 3px;
+`
 interface PipetteOffsetCalibrationItemsProps {
   robotName: string
   formattedPipetteOffsetCalibrations: FormattedPipetteOffsetCalibration[]
@@ -72,7 +78,7 @@ export function PipetteOffsetCalibrationItems({
           </StyledTableHeader>
         </tr>
       </thead>
-      <tbody>
+      <tbody css={BODY_STYLE}>
         {formattedPipetteOffsetCalibrations.map(
           (calibration, index) =>
             attachedPipettes?.[calibration.mount] != null && (
diff --git a/app/src/organisms/Devices/RobotSettings/CalibrationDetails/TipLengthCalibrationItems.tsx b/app/src/organisms/Devices/RobotSettings/CalibrationDetails/TipLengthCalibrationItems.tsx
diff --git a/app/src/organisms/Devices/RobotSettings/RobotSettingsAdvanced.tsx b/app/src/organisms/Devices/RobotSettings/RobotSettingsAdvanced.tsx
diff --git a/app/src/organisms/Devices/RobotSettings/RobotSettingsCalibration.tsx b/app/src/organisms/Devices/RobotSettings/RobotSettingsCalibration.tsx
diff --git a/app/src/organisms/Devices/RobotSettings/RobotSettingsNetworking.tsx b/app/src/organisms/Devices/RobotSettings/RobotSettingsNetworking.tsx
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/ModuleInfo.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/ModuleSetup/ModuleInfo.tsx
diff --git a/components/src/__tests__/__snapshots__/icons.test.tsx.snap b/components/src/__tests__/__snapshots__/icons.test.tsx.snap
diff --git a/components/src/icons/icon-data.ts b/components/src/icons/icon-data.ts

Original file line number	Diff line number	Diff line change
`@@ -113,9 +113,7 @@ export function SetupStep({`
`113`	`113`	`}`
`114`	`114`	`marginRight={SPACING.spacing3}`
`115`	`115`	`name={`
`116`		`- calibrationStatusComplete`
`117`		`- ? 'check-circle'`
`118`		`- : 'alert-circle'`
	`116`	`+ calibrationStatusComplete ? 'ot-check' : 'alert-circle'`
`119`	`117`	`}`
`120`	`118`	`id={'RunSetupCard_calibrationIcon'}`
`121`	`119`	`/>`