working on sidebar/sensors

client/js/components/sensors/SensorList.js

@@ -1,16 +1,20 @@
 import React from 'react';
 import 'whatwg-fetch';
 
+import './SensorList.scss';
+
 export default class SensorList extends React.Component {
 
   insertSensorData = (sensor, index) => {
     const date = new Date(sensor.updated);
 
     return (
-      <div key={index}>
-        <h3>{sensor.location}</h3>
-        <p>{sensor.temperature}</p>
-        <p>{date.toString()}</p>
+      <div key={index} class="row">
+        <div class="item"><h1>{sensor.temperature}</h1><p>Connected</p></div>
+        <div class="item">
+          <h3>{sensor.location}</h3>
+          <p>{date.toString()}</p>
+        </div>
       </div>
     );
   }
@@ -18,7 +22,9 @@ export default class SensorList extends React.Component {
     const list = this.props.list;
     
     return (
-      <div>
+      <div class="SensorList">
+        <h2>Sensors</h2>
+        <hr/>
         {list.map(this.insertSensorData)}
       </div>
     )

client/js/components/sensors/SensorList.scss

@@ -0,0 +1,11 @@
+.SensorList{
+    .row{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        
+        .item + .item{
+            margin-left: 1em;
+        }
+    }
+}