Style adjustments

packages/frontend/src/components/Ago.tsx

@@ -41,14 +41,14 @@ export class Ago extends React.Component<Ago.Props, Ago.State> {
     super(props);
 
     this.state = {
-      now: (timestamp() + Ago.timeDiff) as Types.Timestamp
+      now: (timestamp() - Ago.timeDiff) as Types.Timestamp
     };
   }
 
   public componentWillMount() {
     tickers.set(this, (now) => {
       this.setState({
-        now: (now + Ago.timeDiff) as Types.Timestamp
+        now: (now - Ago.timeDiff) as Types.Timestamp
       });
     })
   }

packages/frontend/src/components/Chain.css

@@ -1,5 +1,7 @@
 .Chain-header {
   width: 100%;
+  height: 108px;
+  overflow: hidden;
   background: #eee;
   color: #000;
 }
@@ -8,6 +10,8 @@
   position: absolute;
   left: 0; /*80px;*/
   right: 0;
+  bottom: 0;
+  top: 148px;
   min-height: 50vh;
   background: #222;
   color: #fff;

packages/frontend/src/components/Chains.css

@@ -1,30 +1,43 @@
 .Chains {
-    background: #3c3c3b;
-    color: #fff;
-    padding: 0.25em 1em;
+  background: #3c3c3b;
+  color: #fff;
+  padding: 0 1em;
+  height: 40px;
 }
 
 .Chains .Icon {
-    margin-right: 1em;
+  margin-right: 1em;
 }
 
 .Chains-chain {
-    padding: 0.25em 0.75em;
-    margin-left: 0.5em;
-    background: #222;
-    color: #999;
-    border-radius: 0.3em;
-    display: inline-block;
-    cursor: pointer;
-    font-family: monospace, sans-serif;
-    font-size: 0.8em;
-    font-weight: bold;
+  padding: 0 12px;
+  background: #222;
+  color: #999;
+  display: inline-block;
+  margin: 0 0 0 1px;
+  height: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  font-family: monospace, sans-serif;
+  font-size: 0.8em;
+  font-weight: bold;
+  position: relative;
+}
+
+.Chains-node-count {
+  padding: 0.2em 0.5em;
+  border-radius: 0.3em;
+  background: #888;
+  color: #fff;
+  text-shadow: rgba(0,0,0,0.5) 0 1px 0;
 }
 
 .Chains-chain-selected {
-    background: #eee;
-    color: #000;
-    border-radius: 0.3em 0.3em 0 0;
-    padding-bottom: 1em;
-    margin-bottom: -1em;
+  background: #eee;
+  color: #000;
+  z-index: 1;
+}
+
+.Chains-chain-selected .Chains-node-count {
+  background: #d64ca8;
 }

packages/frontend/src/components/Chains.tsx

@@ -41,7 +41,7 @@ export class Chains extends React.Component<Chains.Props, {}> {
 
     return (
       <a key={label} className={className} onClick={this.subscribe.bind(this, label)}>
-        {label} ({nodeCount})
+        {label} <span className="Chains-node-count">{nodeCount}</span>
       </a>
     )
   }

packages/frontend/src/components/Tile.css

@@ -1,15 +1,15 @@
 .Tile {
   font-size: 2.5em;
-  padding: 20px;
   text-align: left;
-  width: 220px;
+  width: 260px;
+  height: 100px;
   display: inline-block;
   position: relative;
 }
 
 .Tile-label {
   position: absolute;
-  top: 25px;
+  top: 24px;
   left: 100px;
   right: 0;
   font-size: 0.4em;
@@ -18,7 +18,7 @@
 
 .Tile-content {
   position: absolute;
-  bottom: 25px;
+  bottom: 16px;
   left: 100px;
   right: 0;
   font-weight: 300;
@@ -26,6 +26,9 @@
 }
 
 .Tile .Icon {
+  position: absolute;
+  left: 20px;
+  top: 20px;
   font-size: .8em;
   padding: 0.5em;
   border-radius: 1.25em;