diff --git a/packages/frontend/src/components/Ago.tsx b/packages/frontend/src/components/Ago.tsx index b609f8e..acb6e0a 100644 --- a/packages/frontend/src/components/Ago.tsx +++ b/packages/frontend/src/components/Ago.tsx @@ -41,14 +41,14 @@ export class Ago extends React.Component { 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 }); }) } diff --git a/packages/frontend/src/components/Chain.css b/packages/frontend/src/components/Chain.css index fc42992..3886cb8 100644 --- a/packages/frontend/src/components/Chain.css +++ b/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; diff --git a/packages/frontend/src/components/Chains.css b/packages/frontend/src/components/Chains.css index 43309d5..3022eb4 100644 --- a/packages/frontend/src/components/Chains.css +++ b/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; } diff --git a/packages/frontend/src/components/Chains.tsx b/packages/frontend/src/components/Chains.tsx index 53498ad..ee2de9e 100644 --- a/packages/frontend/src/components/Chains.tsx +++ b/packages/frontend/src/components/Chains.tsx @@ -41,7 +41,7 @@ export class Chains extends React.Component { return ( - {label} ({nodeCount}) + {label} {nodeCount} ) } diff --git a/packages/frontend/src/components/Tile.css b/packages/frontend/src/components/Tile.css index 2e5c9eb..448996f 100644 --- a/packages/frontend/src/components/Tile.css +++ b/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;