Add descriptions to icons

packages/frontend/src/App.tsx

@@ -8,7 +8,7 @@ import { formatNumber } from './utils';
 
 import './App.css';
 import nodeIcon from './icons/broadcast.svg';
-import nodeTypeIcon from './icons/device-desktop.svg';
+import nodeTypeIcon from './icons/terminal.svg';
 import peersIcon from './icons/organization.svg';
 import transactionsIcon from './icons/inbox.svg';
 import blockIcon from './icons/package.svg';
@@ -30,17 +30,17 @@ export default class App extends React.Component<{}, State> {
         return (
             <div className="App">
                 <div className="App-header">
-                    <Icon src={blockIcon} /> #{formatNumber(this.state.best)}
+                    <Icon src={blockIcon} alt="Best Block" /> #{formatNumber(this.state.best)}
                 </div>
                 <table className="App-list">
                     <thead>
                         <tr>
-                            <th><Icon src={nodeIcon} /> Node</th>
-                            <th><Icon src={nodeTypeIcon} /> Type</th>
-                            <th><Icon src={peersIcon} /></th>
-                            <th><Icon src={transactionsIcon} /></th>
-                            <th><Icon src={blockIcon} /> Last Block</th>
-                            <th><Icon src={blockTimeIcon} /></th>
+                            <th><Icon src={nodeIcon} alt="Node Name" /></th>
+                            <th><Icon src={nodeTypeIcon} alt="Node Type" /></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={blockTimeIcon} alt="Block Time" /></th>
                         </tr>
                     </thead>
                     <tbody>

packages/frontend/src/Icon.tsx

@@ -4,9 +4,10 @@ import './Icon.css';
 
 export interface Props {
     src: string,
+    alt: string,
     className?: string,
 };
 
 export function Icon(props: Props) {
-    return <ReactSVG className={`Icon ${ props.className || '' }`} path={props.src} />;
+    return <ReactSVG title={props.alt} className={`Icon ${ props.className || '' }`} path={props.src} />;
 }

packages/frontend/src/Node.tsx

@@ -22,7 +22,7 @@ export function Node(props: Node.Props) {
             <td>{implementation} v{version}</td>
             <td>{peers}</td>
             <td>{txcount}</td>
-            <td>#{formatNumber(height)} / {trimHash(hash, 16)}</td>
+            <td>#{formatNumber(height)} / <span title={hash}>{trimHash(hash, 16)}</span></td>
             <td>{blockTime / 1000}s</td>
         </tr>
     );