From 7ea9c8f7fc0cede090ec03833653b184e63974b6 Mon Sep 17 00:00:00 2001
From: maciejhirsz <maciej.hirsz@gmail.com>
Date: Mon, 2 Jul 2018 16:55:55 +0200
Subject: [PATCH] Some styling

---
 packages/frontend/public/index.html |  6 ++++++
 packages/frontend/src/App.css       |  2 --
 packages/frontend/src/App.tsx       | 12 +++++++-----
 packages/frontend/src/Node.tsx      |  3 ++-
 4 files changed, 15 insertions(+), 8 deletions(-)
diff --git a/packages/frontend/public/index.html b/packages/frontend/public/index.html
index d71ca30..a982bc3 100644
--- a/packages/frontend/public/index.html
+++ b/packages/frontend/public/index.html
@@ -6,6 +6,12 @@
     <meta name="theme-color" content="#000000">
     <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> -->
     <title>Polkadot Telemetry</title>
+    <style>
+      body, html {
+        background: #fefefe;
+        color: #111;
+      }
+    </style>
   </head>
   <body>
     <noscript>
diff --git a/packages/frontend/src/App.css b/packages/frontend/src/App.css
index 2ca0359..6420e78 100644
--- a/packages/frontend/src/App.css
+++ b/packages/frontend/src/App.css
@@ -1,7 +1,5 @@
 .App {
   text-align: center;
-  background: #fff;
-  color: #000;
   font-family: monospace, sans-serif;
 }
 
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index d087390..3c70d04 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -7,11 +7,12 @@ import { State } from './state';
 import { formatNumber } from './utils';
 
 import './App.css';
-import nodeIcon from './icons/broadcast.svg';
+import nodeIcon from './icons/server.svg';
 import nodeTypeIcon from './icons/terminal.svg';
-import peersIcon from './icons/organization.svg';
+import peersIcon from './icons/broadcast.svg';
 import transactionsIcon from './icons/inbox.svg';
 import blockIcon from './icons/package.svg';
+import blockHashIcon from './icons/file-binary.svg';
 import blockTimeIcon from './icons/history.svg';
 
 export default class App extends React.Component<{}, State> {
@@ -35,11 +36,12 @@ export default class App extends React.Component<{}, State> {
                 <table className="App-list">
                     <thead>
                         <tr>
-                            <th><Icon src={nodeIcon} alt="Node Name" /></th>
-                            <th><Icon src={nodeTypeIcon} alt="Node Type" /></th>
+                            <th><Icon src={nodeIcon} alt="Node" /></th>
+                            <th><Icon src={nodeTypeIcon} alt="Implementation" /></th>
                             <th><Icon src={peersIcon} alt="Peer Count" /></th>
                             <th><Icon src={transactionsIcon} alt="Transactions in Queue" /></th>
-                            <th><Icon src={blockIcon} alt="Best Block" /></th>
+                            <th><Icon src={blockIcon} alt="Block" /></th>
+                            <th><Icon src={blockHashIcon} alt="Block Hash" /></th>
                             <th><Icon src={blockTimeIcon} alt="Block Time" /></th>
                         </tr>
                     </thead>
diff --git a/packages/frontend/src/Node.tsx b/packages/frontend/src/Node.tsx
index f14801e..99f510d 100644
--- a/packages/frontend/src/Node.tsx
+++ b/packages/frontend/src/Node.tsx
@@ -22,7 +22,8 @@ export function Node(props: Node.Props) {
             <td>{implementation} v{version}</td>
             <td>{peers}</td>
             <td>{txcount}</td>
-            <td>#{formatNumber(height)} / <span title={hash}>{trimHash(hash, 16)}</span></td>
+            <td>#{formatNumber(height)}</td>
+            <td><span title={hash}>{trimHash(hash, 16)}</span></td>
             <td>{blockTime / 1000}s</td>
         </tr>
     );
