modified signup, uniformed message if no scene, device or hosts

smart-hut/src/components/dashboard/DevicePanel.js

@@ -1,7 +1,7 @@
 // vim: set ts=2 sw=2 et tw=80:
 
 import React, { Component } from "react";
-import { Segment, Card } from "semantic-ui-react";
+import { Segment, Card, Header, Icon } from "semantic-ui-react";
 import Device from "./devices/Device";
 import NewDevice from "./devices/NewDevice";
 import { connect } from "react-redux";
@@ -25,16 +25,31 @@ class DevicePanel extends Component {
   render() {
     return (
       <Card.Group centered style={{ paddingTop: "3rem" }}>
-        {this.props.devices.map((e, i) => {
+        {this.props.devices.length !== 0 ? (
-          return <Device key={i} tab={this.props.tab} id={e.id} />;
+          <React.Fragment>
-        })}
+            {this.props.devices.map((e, i) => {
-        {!this.props.isActiveRoomHome ? (
+              return <Device key={i} tab={this.props.tab} id={e.id} />;
-          <Card style={{ height: "27em" }}>
+            })}
-            <Segment basic style={{ width: "100%", height: "100%" }}>
+            {!this.props.isActiveRoomHome ? (
-              <NewDevice />
+              <Card style={{ height: "27em" }}>
-            </Segment>
+                <Segment basic style={{ width: "100%", height: "100%" }}>
-          </Card>
+                  <NewDevice />
-        ) : null}
+                </Segment>
+              </Card>
+            ) : null}
+          </React.Fragment>
+        ) : (
+          <Segment placeholder>
+            <Header icon>
+              <Icon
+                name="exclamation triangle"
+                style={{ paddingBottom: "1rem" }}
+              />
+              Please create a room on the left, and then add devices to the
+              same.
+            </Header>
+          </Segment>
+        )}
       </Card.Group>
     );
   }

smart-hut/src/components/dashboard/HostsPanel.js

@@ -19,12 +19,17 @@ class HostsPanel extends Component {
   render() {
     if (this.props.isActiveDefaultHost) {
       return (
-        <Segment placeholder style={{ paddingTop: "3rem" }}>
+        <Card.Group centered style={{ paddingTop: "3rem" }}>
-          <Header icon>
+          <Segment placeholder>
-            <Icon name="folder open" />
+            <Header icon>
-            Please select a host to visit on the left.
+              <Icon
-          </Header>
+                name="exclamation triangle"
-        </Segment>
+                style={{ paddingBottom: "1rem" }}
+              />
+              Please select a host to visit on the left.
+            </Header>
+          </Segment>
+        </Card.Group>
       );
     }
 

smart-hut/src/components/dashboard/ScenesPanel.js

@@ -44,7 +44,10 @@ class ScenesPanel extends Component {
         ) : (
           <Segment placeholder>
             <Header icon>
-              <Icon name="folder open" />
+              <Icon
+                name="exclamation triangle"
+                style={{ paddingBottom: "1rem" }}
+              />
               Please select a scene on the left or add a new one.
             </Header>
           </Segment>

smart-hut/src/views/Signup.js

@@ -116,7 +116,7 @@ export default class Signup extends Component {
               <Form.Input
                 icon="lock"
                 iconPosition="left"
-                placeholder="Password (at least 8 characters)"
+                placeholder="Password (at least 6 characters)"
                 name="password"
                 type="password"
                 onChange={this.onChangeHandler}