fix(app): 6.0 overall design QA (#11081)

Author: vabruzzo

app/src/App/Navbar.tsx

@@ -33,7 +33,7 @@ const NavbarLink = styled(NavLink)`
   background-color: ${COLORS.darkBlack};
 
   &:hover {
-    background-color: ${COLORS.darkGreyHover};
+    background-color: ${COLORS.darkBlackHover};
   }
 
   &:focus-visible {
@@ -80,7 +80,7 @@ const NavbarIcon = styled(Icon)`
   background-color: ${COLORS.transparent};
 
   &:hover {
-    background-color: ${COLORS.darkGreyHover};
+    background-color: ${COLORS.darkBlackHover};
   }
 
   &:focus-visible {

app/src/organisms/Devices/PipettesAndModules.tsx

@@ -25,7 +25,7 @@ import { ModuleCard } from '../ModuleCard'
 import { useIsRobotViewable, useRunStatuses } from './hooks'
 import { PipetteCard } from './PipetteCard'
 
-const MIN_HEIGHT_OVER_3_STYLING = css`
+export const MIN_HEIGHT_OVER_3_STYLING = css`
   max-height: 37rem;
 
   @media (min-width: 700px) {
@@ -41,7 +41,7 @@ const MIN_HEIGHT_OVER_3_STYLING = css`
   }
 `
 
-const MIN_HEIGHT_UNDER_3_STYLING = css`
+export const MIN_HEIGHT_UNDER_3_STYLING = css`
   max-height: 29rem;
 
   @media (min-width: 700px) {

app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx

@@ -439,7 +439,7 @@ export function ProtocolRunHeader({
           </StyledText>
         </Box>
         <Box marginLeft={SPACING_AUTO}>
-          {showCancelButton != null && (
+          {showCancelButton && (
             <SecondaryButton
               style={{
                 color: `${COLORS.errorText}`,

app/src/organisms/Devices/ProtocolRun/ProtocolRunModuleControls.tsx

@@ -15,6 +15,10 @@ import { useCreateCommandMutation } from '@opentrons/react-api-client'
 
 import type { LoadModuleRunTimeCommand } from '@opentrons/shared-data/protocol/types/schemaV6/command/setup'
 import type { RunTimeCommand } from '@opentrons/shared-data'
+import {
+  MIN_HEIGHT_OVER_3_STYLING,
+  MIN_HEIGHT_UNDER_3_STYLING,
+} from '../PipettesAndModules'
 
 interface ProtocolRunModuleControlsProps {
   robotName: string
@@ -70,15 +74,19 @@ export const ProtocolRunModuleControls = ({
 
   return (
     <Flex
-      width={attachedModules.length === 1 ? '100%' : '50%'}
       justifyContent={JUSTIFY_START}
       flexWrap={WRAP}
       flexDirection={DIRECTION_COLUMN}
-      maxHeight="25rem"
+      css={
+        attachedModules.length > 3
+          ? MIN_HEIGHT_OVER_3_STYLING
+          : MIN_HEIGHT_UNDER_3_STYLING
+      }
     >
       {attachedModules.map((module, index) => {
         return (
           <Flex
+            width={`calc(50% - ${SPACING.spacing3})`}
             marginTop={SPACING.spacing3}
             marginX={SPACING.spacing2}
             key={`moduleCard_${module.moduleDef.moduleType}_${index}`}

app/src/organisms/LabwareCard/__tests__/LabwareCard.test.tsx

@@ -38,13 +38,12 @@ describe('LabwareCard', () => {
 
   it('renders correct info for opentrons labware card', () => {
     props.labware.definition.namespace = 'opentrons'
-    const [{ getByText, getByRole }] = render(props)
+    const [{ getByText }] = render(props)
     getByText('mock RobotWorkSpace')
     getByText('Well Plate')
     getByText('Mock Definition')
     getByText(`Opentrons Definition`)
     getByText('API Name')
-    getByRole('button', { name: 'mock_definition' })
   })
 
   it('renders additional info for custom labware card', () => {

app/src/organisms/LabwareCard/index.tsx

@@ -2,13 +2,11 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import startCase from 'lodash/startCase'
 import { format } from 'date-fns'
-import { css } from 'styled-components'
 
 import {
   Box,
   Flex,
   Icon,
-  Link,
   LabwareRender,
   RobotWorkSpace,
   SPACING,
@@ -19,27 +17,13 @@ import {
   DIRECTION_COLUMN,
   ALIGN_FLEX_END,
   ALIGN_CENTER,
-  SIZE_1,
-  POSITION_RELATIVE,
 } from '@opentrons/components'
 
 import { StyledText } from '../../atoms/text'
 import { CustomLabwareOverflowMenu } from './CustomLabwareOverflowMenu'
 
 import type { LabwareDefAndDate } from '../../pages/Labware/hooks'
 
-const COPY_ICON_STYLE = css`
-  color: ${COLORS.darkGreyEnabled};
-
-  position: ${POSITION_RELATIVE};
-  top: ${SPACING.spacing1};
-  left: ${SPACING.spacing2};
-
-  &:hover {
-    color: ${COLORS.black};
-  }
-`
-
 export interface LabwareCardProps {
   labware: LabwareDefAndDate
   onClick: () => void
@@ -53,11 +37,6 @@ export function LabwareCard(props: LabwareCardProps): JSX.Element {
   const displayCategory = startCase(definition.metadata.displayCategory)
   const isCustomDefinition = definition.namespace !== 'opentrons'
 
-  const handleCopyClick = async (e: React.MouseEvent): Promise<void> => {
-    e.stopPropagation()
-    await navigator.clipboard.writeText(apiName)
-  }
-
   return (
     <Box
       role="link"
@@ -132,21 +111,9 @@ export function LabwareCard(props: LabwareCardProps): JSX.Element {
             >
               {t('api_name')}
             </StyledText>
-            <Link
-              css={TYPOGRAPHY.pRegular}
-              onClick={handleCopyClick}
-              role="button"
-            >
-              <Box overflowWrap="anywhere">
-                {apiName}
-                <Icon
-                  height={SIZE_1}
-                  name="copy-text"
-                  aria-label="copy-text"
-                  css={COPY_ICON_STYLE}
-                />
-              </Box>
-            </Link>
+            <StyledText as="p">
+              <Box overflowWrap="anywhere">{apiName}</Box>
+            </StyledText>
           </Box>
         </Flex>
       </Box>

app/src/pages/Labware/index.tsx

@@ -179,7 +179,7 @@ export function Labware(): JSX.Element {
               position={POSITION_ABSOLUTE}
               backgroundColor={COLORS.white}
               top="8.5rem"
-              right={0}
+              right={SPACING.spacing1}
               flexDirection={DIRECTION_COLUMN}
               ref={sortOverflowWrapperRef}
             >

components/src/__tests__/__snapshots__/icons.test.tsx.snap

@@ -1795,11 +1795,11 @@ exports[`icons ot-toggle-input-on renders correctly 1`] = `
   className="sc-fznyAO c0 foo"
   fill="currentColor"
   version="1.1"
-  viewBox="0 0 22 14"
+  viewBox="0 0 22 13"
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M15.5.5h-9C2.9.5 0 3.4 0 7s2.9 6.5 6.5 6.5h9c3.6 0 6.5-2.9 6.5-6.5S19.1.5 15.5.5zm0 11C13 11.5 11 9.5 11 7s2-4.5 4.5-4.5S20 4.5 20 7s-2 4.5-4.5 4.5z"
+    d="M 20,6.5 A 4.5,4.5 0 0 1 15.5,11 4.5,4.5 0 0 1 11,6.5 4.5,4.5 0 0 1 15.5,2 4.5,4.5 0 0 1 20,6.5 Z M 6.5,0 h 9 C 19.101,0 22,2.899 22,6.5 22,10.101 19.101,13 15.5,13 h -9 C 2.899,13 0,10.101 0,6.5 0,2.899 2.899,0 6.5,0 Z"
     fillRule="evenodd"
   />
 </svg>

components/src/icons/icon-data.ts

@@ -440,9 +440,9 @@ export const ICON_DATA_BY_NAME = {
       'M15.5 0h-9C2.9 0 0 2.9 0 6.5S2.9 13 6.5 13h9c3.6 0 6.5-2.9 6.5-6.5S19.1 0 15.5 0zm-9 11C4 11 2 9 2 6.5S4 2 6.5 2 11 4 11 6.5 9 11 6.5 11z',
   },
   'ot-toggle-input-on': {
-    viewBox: '0 0 22 14',
+    viewBox: '0 0 22 13',
     path:
-      'M15.5.5h-9C2.9.5 0 3.4 0 7s2.9 6.5 6.5 6.5h9c3.6 0 6.5-2.9 6.5-6.5S19.1.5 15.5.5zm0 11C13 11.5 11 9.5 11 7s2-4.5 4.5-4.5S20 4.5 20 7s-2 4.5-4.5 4.5z',
+      'M 20,6.5 A 4.5,4.5 0 0 1 15.5,11 4.5,4.5 0 0 1 11,6.5 4.5,4.5 0 0 1 15.5,2 4.5,4.5 0 0 1 20,6.5 Z M 6.5,0 h 9 C 19.101,0 22,2.899 22,6.5 22,10.101 19.101,13 15.5,13 h -9 C 2.899,13 0,10.101 0,6.5 0,2.899 2.899,0 6.5,0 Z',
   },
   gear: {
     viewBox: '0 0 20 20',

components/src/ui-style-constants/colors.ts

@@ -17,7 +17,7 @@ export const medBlue = '#d9e9fe'
 export const disabled = '#a0a0a0'
 export const medGreyHover = '#b8b8b8'
 export const darkBlack = '#16212D'
-export const darkBlackHover = '#24313f'
+export const darkBlackHover = '#24313F'
 export const darkBlackPressed = '#16212D'
 export const darkBlackSelected = '#39495B'
 // note: darkBlackDisabled = greyDisabled