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) => (
))}