From 59f24170ee426f511e8df065fec381d11613b9b5 Mon Sep 17 00:00:00 2001
From: Alex Mikhalev <alexmikhalevalex@gmail.com>
Date: Sun, 10 Sep 2017 20:28:23 -0600
Subject: [PATCH] Changed DeviceView structure

---
 app/components/App.tsx               | 5 ++---
 app/components/DevicesView.tsx       | 7 ++++++-
 app/components/MessagesView.tsx      | 8 +++-----
 app/components/SectionRunnerView.tsx | 1 +
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/components/App.tsx b/app/components/App.tsx
index a49d062..7dab7c3 100644
--- a/app/components/App.tsx
+++ b/app/components/App.tsx
@@ -1,7 +1,6 @@
 import { observer } from "mobx-react";
 import DevTools from "mobx-react-devtools";
 import * as React from "react";
-import { Item } from "semantic-ui-react";
 
 import { DevicesView, MessagesView } from "@app/components";
 
@@ -12,11 +11,11 @@ import "semantic-ui-css/semantic.css";
 class App extends React.Component {
     render() {
         return (
-            <Item.Group divided>
+            <div>
                 <MessagesView />
                 <DevicesView />
                 <DevTools />
-            </Item.Group>
+            </div>
         );
     }
 }
diff --git a/app/components/DevicesView.tsx b/app/components/DevicesView.tsx
index 0b4538d..2960172 100644
--- a/app/components/DevicesView.tsx
+++ b/app/components/DevicesView.tsx
@@ -1,11 +1,16 @@
 import { observer } from "mobx-react";
 import * as React from "react";
+import { Item } from "semantic-ui-react";
 
 import DeviceView from "@app/components/DeviceView";
 
 class DevicesView extends React.Component {
     render() {
-        return <DeviceView deviceId="grinklers" />;
+        return (
+            <Item.Group divided>
+                <DeviceView deviceId="grinklers" />
+            </Item.Group>
+        );
     }
 }
 
diff --git a/app/components/MessagesView.tsx b/app/components/MessagesView.tsx
index 85beea6..ee2027a 100644
--- a/app/components/MessagesView.tsx
+++ b/app/components/MessagesView.tsx
@@ -37,11 +37,9 @@ class MessagesView extends React.Component<{ state: State }> {
             <MessageView key={message.id} uiStore={uiStore} message={message} index={index} />
         ));
         return (
-            <div className="messages" >
-                <TransitionGroup animation="scale" duration={200}>
-                    {messages}
-                </TransitionGroup>
-            </div>
+            <TransitionGroup className="messages" animation="scale" duration={200}>
+                {messages}
+            </TransitionGroup>
         );
     }
 }
diff --git a/app/components/SectionRunnerView.tsx b/app/components/SectionRunnerView.tsx
index 937e377..669b1c1 100644
--- a/app/components/SectionRunnerView.tsx
+++ b/app/components/SectionRunnerView.tsx
@@ -10,6 +10,7 @@ export default class SectionRunnerView extends React.Component<{ sectionRunner:
         return (
             <Segment>
                 <h4>Section Runner Queue</h4>
+                {this.props.sectionRunner.toString()}
             </Segment>
         );
     }