ui: error pages, help text

ui/index.html

@@ -19,11 +19,14 @@
     {{outlet}}
   </script>
 
-  <script type="text/x-handlebars" data-template-name="errora">
+  <script type="text/x-handlebars" data-template-name="error">
     <div class="row">
-      <div class="col-md-12 col-sm-12 col-xs-12">
-        <div class="text-center">
-          uh oh! This is an error page.
+      <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
+        <div class="text-center error">
+          <p>This is an error page for the Consul web UI. You may have visited a URL that is loading an
+          unknown resource, so you can try going back to thes <a href="#">root</a>.</p>
+          <p>Otherwise, please report any unexpected
+          issues to the <a href="https://github.com/hashicorp/consul">GitHub page</a>.</p>
         </div>
       </div>
     </div>
@@ -119,6 +122,7 @@
                     <span class="input-group-addon">{{parentKey}}</span>
                     {{ input value=newKey.Key class="form-control" required=true }}
                   </div>
+                  <span class="help-block">To create a folder, end the key with <code>/</code></span>
                 </div>
 
                 {{#if newKey.isFolder }}
@@ -126,6 +130,7 @@
                 {{else}}
                 <div class="form-group">
                   {{ textarea value=newKey.Value class="form-control"}}
+                  <span class="help-block">Value can be any format and length</span>
                 </div>
                 {{/if}}
 

ui/styles/_forms.scss

@@ -1,5 +1,4 @@
 .form-group {
-
     .form-control {
         @include transition(border-color .2s ease-in-out);
         @include transition(box-shadow .2s ease-in-out);

ui/styles/_panels.scss

@@ -63,11 +63,11 @@
             border-color: $purple;
         }
 
-        @include transition(background-color .1s linear);
-
+        @include transition(border-color .1s linear);
         border-color: $purple;
 
         .panel-bar {
+        @include transition(background-color .1s linear);
             background-color: $purple;
         }
     }

ui/styles/_type.scss

@@ -23,6 +23,15 @@ a {
     }
 }
 
+code {
+    color: $purple-dark;
+    background-color: $gray-background;
+}
+
+.help-block {
+    font-size: 14px;
+    color: $gray-light;
+}
 
 small {
     color: $gray;

ui/styles/base.scss

@@ -29,6 +29,10 @@ a {
     }
 }
 
+.error {
+  margin-top: 400px;
+}
+
 .border-left {
   display: block;
   height: 700px;