IOCListView now shows IOCTable on larger screens

src/components/IOC/IOCTable.js

 import React, { useEffect } from 'react';
 import { CustomTable } from "../common/table/CustomTable";
-import { CheckCircleOutline, ErrorOutline, RotateRightOutlined, ScheduleOutlined } from "@material-ui/icons";
+import { Brightness1, CheckCircleOutline, ErrorOutline, RadioButtonUnchecked, RotateRightOutlined, ScheduleOutlined } from "@material-ui/icons";
 import { theme } from "../../Theme";
 import { useGetIOCs } from '../../api/Hooks';
 import { Container } from '@material-ui/core';
@@ -17,23 +17,23 @@ const columns = [
 
 ]
 
-export const deploymentStatusIcons = {
-  "ok": <CheckCircleOutline />,
-  "down": <ErrorOutline />,
-  "undeployed": <RotateRightOutlined />,
-  "unreachable": <ScheduleOutlined />,
-}
+const statusBulbColors = {
+  "ok": theme.palette.success.light,
+  "down": theme.palette.text.disabled,
+  "unreachable": theme.palette.secondary.light,
+  "undeployed": theme.palette.text.disabled,
+};
 
-export const deploymentStatusColors = {
-  "ok": theme.palette.status.ok,
-  "down": theme.palette.status.fail,
-  "undeployed": theme.palette.status.progress,
-  "unreachable": theme.palette.status.neutral,
+const statusBulbIcons = {
+  "ok": <Brightness1 />,
+  "down": <Brightness1 />,
+  "unreachable": <ErrorOutline />,
+  "undeployed": <RadioButtonUnchecked />,
 }
 
 function createTableRow({ id, name, git, version, host, status }) {
-  const iconStyle = { fill: deploymentStatusColors[status] };
-  const statusIcon = React.cloneElement(deploymentStatusIcons[status], { style: iconStyle });
+  const iconStyle = { fill: statusBulbColors[status] };
+  const statusIcon = React.cloneElement(statusBulbIcons[status], { style: iconStyle });
 
   return {
     id: id,

src/views/IOC/IOCListView.js

-import { IconButton, useTheme } from "@material-ui/core";
+import { Hidden, IconButton, useTheme } from "@material-ui/core";
 import { AddBox } from "@material-ui/icons";
 import React, { useEffect, useState } from "react"
 import { useGetIOCs } from "../../api/Hooks";
@@ -7,6 +7,7 @@ import { SearchableIOCList } from "../../components/IOC/IOCList";
 import { CreateIOC } from "../../components/IOC/CreateIOC";
 import { SimpleModal } from "../../components/common/SimpleModal/SimpleModal";
 import { useCreateIOC } from "../../api/Hooks";
+import { SearchableIOCTable } from "../../components/IOC/IOCTable";
 
 
 export function IOCListView() {
@@ -30,14 +31,23 @@ export function IOCListView() {
   let content = <h1>Loading IOCs...</h1>
   if (iocs && !iocs.isPromise) {
     const abcIOCs = iocs.sort((a, b) => a.name.localeCompare(b.name));
-    content = <SearchableIOCList iocs={abcIOCs} />;
+    content = (
+      <>
+        <Hidden smUp>
+          <SearchableIOCList iocs={abcIOCs} />
+        </Hidden>
+        <Hidden xsDown>
+          <SearchableIOCTable iocs={abcIOCs} />
+        </Hidden>
+      </>
+    );
   }
 
   return (
     <div>
       {content}
       <SimpleModal open={iocFormOpen} setOpen={setIOCFormOpen}>
-          <CreateIOC submitCallback={closeModal} hook={useCreateIOC}/>
+        <CreateIOC submitCallback={closeModal} hook={useCreateIOC} />
       </SimpleModal>
     </div>
   );