diff --git a/app/src/assets/localization/en/devices_landing.json b/app/src/assets/localization/en/devices_landing.json index 58c2d5dbcf0..27651cf4dd3 100644 --- a/app/src/assets/localization/en/devices_landing.json +++ b/app/src/assets/localization/en/devices_landing.json @@ -36,5 +36,6 @@ "update_robot_software": "Update robot software", "disconnect_from_network": "Disconnect from network", "connect_to_network": "Connect to network", - "home_gantry": "Home gantry" + "home_gantry": "Home gantry", + "this_robot_has_connected_and_power_on_module": "This robot has a connected and powered on {{moduleName}}" } diff --git a/app/src/atoms/Tooltip/index.tsx b/app/src/atoms/Tooltip/index.tsx index f70c8e81e19..d604632dfbc 100644 --- a/app/src/atoms/Tooltip/index.tsx +++ b/app/src/atoms/Tooltip/index.tsx @@ -2,9 +2,9 @@ import * as React from 'react' import { COLORS, TYPOGRAPHY, - UseTooltipResultTooltipProps, + Tooltip as SharedTooltip, } from '@opentrons/components' -import { Tooltip as SharedTooltip } from '@opentrons/components/src/tooltips/Tooltip' +import type { UseTooltipResultTooltipProps } from '@opentrons/components' export interface TooltipProps { key: string diff --git a/app/src/molecules/ModuleIcon/index.tsx b/app/src/molecules/ModuleIcon/index.tsx new file mode 100644 index 00000000000..a7572ce736d --- /dev/null +++ b/app/src/molecules/ModuleIcon/index.tsx @@ -0,0 +1,42 @@ +import * as React from 'react' +import { + Flex, + ModuleIcon as SharedModuleIcon, + POSITION_RELATIVE, + SPACING, + useHoverTooltip, +} from '@opentrons/components' +import { Tooltip } from '../../atoms/Tooltip' + +import type { AttachedModule } from '../../redux/modules/types' + +interface ModuleIconProps { + module: AttachedModule + index: number + tooltipText: string +} + +export function ModuleIcon(props: ModuleIconProps): JSX.Element { + const { module, index, tooltipText } = props + const [targetProps, tooltipProps] = useHoverTooltip() + + return ( + <> + + + + + + + {tooltipText} + + + + ) +} diff --git a/app/src/organisms/Devices/RobotCard.tsx b/app/src/organisms/Devices/RobotCard.tsx index 354a1f87d76..33013aa16a1 100644 --- a/app/src/organisms/Devices/RobotCard.tsx +++ b/app/src/organisms/Devices/RobotCard.tsx @@ -13,17 +13,19 @@ import { DIRECTION_ROW, SPACING, TEXT_TRANSFORM_UPPERCASE, - ModuleIcon, + BORDERS, } from '@opentrons/components' +import { getModuleDisplayName } from '@opentrons/shared-data' import OT2_PNG from '../../assets/images/OT2-R_HERO.png' import { StyledText } from '../../atoms/text' +import { UNREACHABLE } from '../../redux/discovery' +import { ModuleIcon } from '../../molecules/ModuleIcon' import { useAttachedModules, useAttachedPipettes } from './hooks' import { RobotStatusBanner } from './RobotStatusBanner' import { RobotOverflowMenu } from './RobotOverflowMenu' import type { DiscoveredRobot } from '../../redux/discovery/types' -import { UNREACHABLE } from '../../redux/discovery' // import { UpdateRobotBanner } from '../UpdateRobotBanner' interface RobotCardProps { @@ -34,7 +36,6 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null { const { robot } = props const { name = null, local } = robot const { t } = useTranslation('devices_landing') - const attachedModules = useAttachedModules(name) const attachedPipettes = useAttachedPipettes(name) @@ -44,7 +45,7 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null { alignItems={ALIGN_CENTER} backgroundColor={C_WHITE} border={`1px solid ${C_MED_LIGHT_GRAY}`} - borderRadius="4px" + borderRadius={BORDERS.radiusSoftCorners} flexDirection={DIRECTION_ROW} marginBottom={SPACING.spacing3} padding={SPACING.spacing3} @@ -93,9 +94,15 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null { {attachedModules.map((module, i) => ( ))}