Devices Landing: Robot Card

[mikecardarelli]

Design

On the devices landing page each currently or previously connected robot should appear on its own "robot card".
On this artboard, you can see how how the devices landing page should look with 1, 3, or 6 robot cards:
https://www.figma.com/file/bVtCogdwiXj3ndpk4AWXCx/%5Bworking%5D-Milestone-1%3A-Read-and-Execute?node-id=1297%3A88551

Note: This Zenhub ticket will cover the UI implementation of the robot cards. Related functionality will be covered in other tickets (module tooltips, three-dot menus, robot sections for available/not available/hidden). See below for links to each.

Acceptance Criteria

• The type of Opentrons robot is displayed in the eyebrow about the robot name

• An image of the robot is displayed on the right side of the card

• If connected/available, we should show an icon for the type of connection (USB or Wifi)

• The robot status should be shown with corresponding colors (Idle = 9ff0ff, Not Available = b7b7b7, Busy = a864ff)

• If the robot status is busy, a purple banner should be shown with the name of the protocol and a link to go directly to the protocol run record. See the 5th robot in the list here.

• The type of pipette attached on the left and right pipette mounts should be shown (or show "Empty" if none is attached)

• Icons for each connected hardware module should be shown. Note: The module tooltips are covered in a separate ticket

• Each robot card should have a three-dot menu with different actions depending on the state of the robot. Note: These menu actions are covered in a separate ticket

• Each robot card should be shown in a section based on whether it's available, not available, or hidden. Note: These robot landing sections are covered in a separate ticket