Some visual tweaks (#133)

packages/frontend/src/components/List/Row.css

@@ -3,6 +3,15 @@
   cursor: pointer;
 }
 
+.Row a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.Row a:hover {
+  text-decoration: underline;
+}
+
 .Row-Header th, .Row td {
   text-align: left;
   padding: 6px 13px;

packages/frontend/src/components/List/Row.tsx

@@ -24,6 +24,8 @@ import cpuIcon from '../../icons/microchip-solid.svg';
 import memoryIcon from '../../icons/memory-solid.svg';
 import uploadIcon from '../../icons/cloud-upload.svg';
 import downloadIcon from '../../icons/cloud-download.svg';
+import networkIcon from '../../icons/network.svg';
+import externalLinkIcon from '../../icons/link-external.svg';
 
 import parityPolkadotIcon from '../../icons/dot.svg';
 import paritySubstrateIcon from '../../icons/substrate.svg';
@@ -112,6 +114,10 @@ function formatCPU(cpu: number, stamp: Maybe<Types.Timestamp>): string {
   return `${cpu.toFixed(fractionDigits)}%${ago}`;
 }
 
+const URI_BASE = window.location.protocol === 'https:'
+                                    ? `/network_state/`
+                                    : `http://${window.location.hostname}:8081/network_state/`;
+
 export class Row extends React.Component<Row.Props, Row.State> {
   public static readonly columns: Column[] = [
     {
@@ -283,13 +289,18 @@ export class Row extends React.Component<Row.Props, Row.State> {
     },
     {
       label: 'NetworkState',
-      icon: networkIdIcon,
-      width: 100,
+      icon: networkIcon,
+      width: 16,
       setting: 'networkstate',
       render: ({ id }) => {
         const chainLabel = getHashData().chain;
-        const uri = encodeURI(`/network_state/${chainLabel}/${id}/`);
-        return React.createElement('a', {href: uri, target: "_blank"}, "Network state");
+
+        if (!chainLabel) {
+          return '-';
+        }
+
+        const uri = `${URI_BASE}${encodeURIComponent(chainLabel)}/${id}/`;
+        return <a href={uri} target="_blank"><Icon src={externalLinkIcon} /></a>;
       },
     },
   ];

packages/frontend/src/icons/network.svg

@@ -0,0 +1 @@
+<svg height='300px' width='300px' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><polygon points="22,16 19,16 19,11 13,11 13,8 13.5,8 12.5,7 16,7 16,2 8,2 8,7 11.5,7 10.5,8 11,8 11,11 5,11 5,16 2,16 2,21   5.5,21 4.5,22 7.5,22 6.5,21 10,21 10,16 7,16 7,13 17,13 17,16 14,16 14,21 17.5,21 16.5,22 19.5,22 18.5,21 22,21 "></polygon></svg>