add black header bar

ROADMAP.md

@@ -5,6 +5,9 @@ This is a general draft document for thoughts and todo's. This has no structure.
 
 ### What's cooking?
 
+- Async tracking snippet.
+- Add license file.
+- Get DB creds from env.
 - JS client for consuming API endpoints.
 - Envelope API responses.
 - Error handling.

assets/js/pages/dashboard.js

@@ -18,13 +18,17 @@ class Dashboard extends Component {
   }
 
   render() {
-    return (<div class="container">
+    return (
-        <header class="header cf">
+    <div>
-          <h1 class="pull-left">Ana <small>&middot; open web analytics</small></h1>
+      <header class="header-bar cf">
+        <div class="container">
+          <h1 class="pull-left title">Ana <small class="subtitle">open web analytics</small></h1>
           <div class="pull-right">
             <LogoutButton onSuccess={this.props.onLogout} />
           </div>
-        </header>
+        </div>
+      </header>
+      <div class="container">
         <Realtime />
         <div class="clear">
           <DatePicker period={this.state.period} onChoose={(p) => { this.setState({ period: p })}} />
@@ -48,10 +52,10 @@ class Dashboard extends Component {
           <div class="col-2">
             <Table period={this.state.period} endpoint="browsers" title="Browsers" headers={["#", "Browser", "Count", "%"]} />
           </div>
-
         </div>
-    </div>)
+      </div>
-  }
+  </div>
+  )}
 }
 
 export default Dashboard

assets/sass/styles.scss

@@ -3,7 +3,7 @@
 @import "grid";
 
 body {
-  font-family: Arial, Verdana, sans-serif;
+  font-family: Raleway, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 15px;
   color: #444;
   background: #f5f5f5;
@@ -35,6 +35,12 @@ table {
 
 a {
   color: #09f;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
 }
 
 label {
@@ -66,6 +72,23 @@ input[type="submit"] {
   margin: 20px 0;
 }
 
+.header-bar {
+  background: black;
+  color: white;
+  margin-bottom: 40px;
+  padding: 12px 0;
+  line-height: 32px;
+  font-weight: bold;
+
+  h1, h2, h3, a { color: white; }
+
+  .subtitle{
+    color: #BBB;
+    margin-left: 10px;
+    font-size: 20px;
+  }
+}
+
 .block {
   width: auto;
   background: white;