1 files changed, 2 insertions, 78 deletions
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js
index a59770b..7b8e453 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js
@@ -21,6 +21,7 @@ import React from "react";
 import styled from 'styled-components';
 
 import { Accordion, Button, Card } from "react-bootstrap";
+import AccordionHeader from "./AccordionHeader";
 
 const AccordionBody = styled.div`
   margin: 0;
@@ -34,89 +35,12 @@ const CardBody = styled(Card.Body)`
   margin: 0;
 `
 
-const UninitialisedHeader = styled.div`
-  margin: 0;
-  padding: 0 0 1px 0;
-  border-bottom: 1px solid #7f7f7f;
-  background: #cccccc;
-  font-weight: normal;
-  border-radius: 0;
-`
-
-const PassiveHeader = styled.div`
-  margin: 0;
-  padding: 0 0 1px 0;
-  border-bottom: 1px solid #7f7f7f;
-  background: #ffe87c;
-  font-weight: normal;
-  border-radius: 0;
-`
-
-const RunningHeader = styled.div`
-  margin: 0;
-  padding: 0 0 1px 0;
-  border-bottom: 1px solid #7f7f7f;
-  background: #7ec699;
-  font-weight: normal;
-  border-radius: 0;
-`
-
-const ToggleButton = styled(Button)`
-  color: #000000;
-  text-decoration: none;
-
-  :hover, :active {
-    color: #000000;
-    text-decoration: none !important;
-  }
-`
-
 const InstantiationItem = (props) => {
-  const toggleState = () => {
-    switch (props.orderedState) {
-      case 'UNINITIALISED':
-        return renderUninitialisedOrderedState()
-      case 'PASSIVE':
-        return renderPassiveOrderedState();
-      case 'RUNNING':
-        return renderRunningOrderedState();
-    }
-  }
-
-  const renderUninitialisedOrderedState = () => {
-    return (
-      <UninitialisedHeader className="panel-header">
-        <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
-          { props.title }
-        </Accordion.Toggle>
-      </UninitialisedHeader>
-    )
-  }
-
-  const renderPassiveOrderedState = () => {
-    return (
-      <PassiveHeader className="panel-header">
-        <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
-          { props.title }
-        </Accordion.Toggle>
-      </PassiveHeader>
-    )
-  }
-
-  const renderRunningOrderedState = () => {
-    return (
-      <RunningHeader className="panel-header">
-        <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
-          { props.title }
-        </Accordion.Toggle>
-      </RunningHeader>
-    )
-  }
 
   return (
     <Accordion>
       <AccordionBody>
-        { toggleState() }
+        <AccordionHeader title={ props.title } orderedState={ props.orderedState } index={ props.index } key={ props.index } />
         <Accordion.Collapse eventKey={ props.index.toString() }>
           <CardBody>{ props.children }</CardBody>
         </Accordion.Collapse>