Somewhat stylish

packages/frontend/src/App.css

@@ -1,6 +1,11 @@
 .App {
   text-align: left;
-  font-family: monospace, sans-serif;
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+}
+
+.App-header {
+  width: 100%;
+  background: #fff;
 }
 
 .App-logo {
@@ -8,19 +13,19 @@
   height: 80px;
 }
 
-.App-header {
-  font-size: 3em;
-  padding: 20px;
-  text-align: left;
+.App-list {
+  width: 100%;
+  border-collapse: collapse;
 }
 
-.App-list {
-  padding: 20px;
+.App-list thead {
+  background: #3c3c3b;
+  color: #fff;
 }
 
 .App-list th, .App-list td {
   text-align: left;
-  padding: 0.2em 0.5em;
+  padding: 0.4em 0.6em;
 }
 
 @keyframes App-logo-spin {

packages/frontend/src/App.tsx

@@ -36,8 +36,10 @@ export default class App extends React.Component<{}, State> {
 
         return (
             <div className="App">
-                <Tile icon={blockIcon} title="Best Block">#{formatNumber(best)}</Tile>
-                <Tile icon={lastTimeIcon} title="Last Block"><Ago when={blockTimestamp} /></Tile>
+                <div className="App-header">
+                    <Tile icon={blockIcon} title="Best Block">#{formatNumber(best)}</Tile>
+                    <Tile icon={lastTimeIcon} title="Last Block"><Ago when={blockTimestamp} /></Tile>
+                </div>
                 <table className="App-list">
                     <thead>
                         <tr>

packages/frontend/src/components/Icon.css

@@ -3,6 +3,7 @@
     height: 1em;
     width: 1em;
     text-align: center;
+    line-height: 1em;
     vertical-align: middle;
     display: inline-block;
 }

packages/frontend/src/components/Tile.css

@@ -2,7 +2,7 @@
   font-size: 2.5em;
   padding: 20px;
   text-align: left;
-  width: 230px;
+  width: 200px;
   display: inline-block;
   position: relative;
 }
@@ -22,6 +22,7 @@
   bottom: 20px;
   left: 90px;
   right: 0;
+  font-weight: 300;
   font-size: 0.75em;
 }