fix(app): Address Choose a robot to run slideout design feedback (#11065)

This PR will address choose a robot to run slideout design feedback
fix #11029 and fix #11057

Author: koji

app/src/molecules/MiniCard/index.tsx

@@ -20,7 +20,6 @@ const unselectedOptionStyles = css`
   cursor: pointer;
 
   &:hover {
-    background-color: ${COLORS.background};
     border: 1px solid ${COLORS.medGreyHover};
   }
 `

app/src/organisms/ChooseRobotSlideout/AvailableRobotOption.tsx

@@ -50,19 +50,23 @@ export function AvailableRobotOption(
         <img
           src={OT2_PNG}
           css={css`
-            width: 6rem;
+            width: 4rem;
+            height: 3.5625rem;
           `}
         />
         <Flex
           flexDirection={DIRECTION_COLUMN}
           marginLeft={SPACING.spacing4}
           marginTop={SPACING.spacing3}
+          marginBottom={SPACING.spacing4}
         >
           <StyledText as="h6">{robotModel}</StyledText>
           <Box maxWidth="9.5rem">
             <StyledText
               as="p"
-              css={{ 'overflow-wrap': 'break-word' }}
+              css={css`
+                overflow-wrap: break-word;
+              `}
               fontWeight={TYPOGRAPHY.fontWeightSemiBold}
             >
               {robotName}

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

@@ -181,7 +181,7 @@ describe('ChooseRobotSlideout', () => {
       onCloseClick: jest.fn(),
       showSlideout: true,
     })
-    const refreshButton = getByRole('button', { name: 'Refresh list' })
+    const refreshButton = getByRole('button', { name: 'refresh' })
     fireEvent.click(refreshButton)
     expect(mockStartDiscovery).toHaveBeenCalled()
     expect(dispatch).toHaveBeenCalledWith({ type: 'mockStartDiscovery' })
@@ -200,7 +200,7 @@ describe('ChooseRobotSlideout', () => {
     expect(proceedButton).not.toBeDisabled()
     const otherRobot = getByText('otherRobot')
     otherRobot.click() // unselect default robot
-    expect(proceedButton).toBeDisabled()
+    expect(proceedButton).not.toBeDisabled()
     const mockRobot = getByText('opentrons-robot-name')
     mockRobot.click()
     expect(proceedButton).not.toBeDisabled()

app/src/organisms/ChooseRobotSlideout/index.tsx

@@ -24,6 +24,7 @@ import {
   JUSTIFY_CENTER,
   SIZE_4,
   TEXT_ALIGN_CENTER,
+  DIRECTION_ROW,
 } from '@opentrons/components'
 
 import {
@@ -54,7 +55,7 @@ interface ChooseRobotSlideoutProps extends StyleProps {
 export function ChooseRobotSlideout(
   props: ChooseRobotSlideoutProps
 ): JSX.Element | null {
-  const { t } = useTranslation(['protocol_details', 'shared'])
+  const { t } = useTranslation(['protocol_details', 'shared', 'app_settings'])
   const { storedProtocolData, showSlideout, onCloseClick, ...restProps } = props
   const dispatch = useDispatch<Dispatch>()
   const history = useHistory()
@@ -177,20 +178,33 @@ export function ChooseRobotSlideout(
       <Flex flexDirection={DIRECTION_COLUMN}>
         <Flex
           alignSelf={ALIGN_FLEX_END}
-          marginY={SPACING.spacing3}
+          marginBottom={SPACING.spacing3}
           height={SIZE_2}
         >
           {isScanning ? (
-            <Icon name="ot-spinner" spin size={SIZE_1} />
+            <Flex flexDirection={DIRECTION_ROW} alignItems={ALIGN_CENTER}>
+              <StyledText
+                as="p"
+                color={COLORS.darkGreyEnabled}
+                marginRight={SPACING.spacingSM}
+              >
+                {t('app_settings:searching')}
+              </StyledText>
+              <Icon
+                name="ot-spinner"
+                spin
+                size="1.25rem"
+                color={COLORS.darkGreyEnabled}
+              />
+            </Flex>
           ) : (
             <Link
-              color={COLORS.blue}
               onClick={() => dispatch(startDiscovery())}
               textTransform={TEXT_TRANSFORM_CAPITALIZE}
               role="button"
-              css={TYPOGRAPHY.pSemiBold}
+              css={TYPOGRAPHY.linkPSemiBold}
             >
-              {t('shared:refresh_list')}
+              {t('shared:refresh')}
             </Link>
           )}
         </Flex>
@@ -221,7 +235,7 @@ export function ChooseRobotSlideout(
                   onClick={() => {
                     if (!isCreatingRun) {
                       resetCreateRun()
-                      setSelectedRobot(isSelected ? null : robot)
+                      setSelectedRobot(robot)
                     }
                   }}
                   isError={runCreationError != null}
@@ -279,7 +293,9 @@ export function ChooseRobotSlideout(
                 t={t}
                 i18nKey="view_unavailable_robots"
                 components={{
-                  devicesLink: <NavLink to="/devices" />,
+                  devicesLink: (
+                    <NavLink to="/devices" css={TYPOGRAPHY.linkPSemiBold} />
+                  ),
                 }}
               />
             </StyledText>