Replace implementation label with an icon (#56)

packages/frontend/src/components/Chain/Chain.css

@@ -74,7 +74,7 @@
 
 .Chain-node-list {
   width: 100%;
-  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 .Chain-node-list thead {

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

@@ -13,10 +13,15 @@
 }
 
 .Node-Row-pinned td:first-child {
-  border-left: 6px solid #d64ca8;
+  border-left: 3px solid #d64ca8;
   padding-left: 10px;
 }
 
+.Node-Row-pinned td:last-child {
+  border-right: 3px solid #d64ca8;
+  padding-right: 10px;
+}
+
 .Node-Row-pinned.Node-Row-synced {
   color: #d64ca8;
 }

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

@@ -20,6 +20,9 @@ import lastTimeIcon from '../../icons/watch.svg';
 import cpuIcon from '../../icons/microchip-solid.svg';
 import memoryIcon from '../../icons/memory-solid.svg';
 
+import parityPolkadotIcon from '../../icons/dot.svg';
+import unknownImplementationIcon from '../../icons/question-solid.svg';
+
 import './Row.css';
 
 interface RowProps {
@@ -61,13 +64,14 @@ export default class Row extends React.Component<RowProps, {}> {
     {
       label: 'Implementation',
       icon: nodeTypeIcon,
-      width: 240,
+      width: 100,
       setting: 'implementation',
       render: ({ nodeDetails }) => {
         const [, implementation, version] = nodeDetails;
         const [semver] = version.match(SEMVER_PATTERN) || [version];
+        const implIcon = implementation === 'parity-polkadot' ? parityPolkadotIcon : unknownImplementationIcon;
 
-        return <span title={`${implementation} v${version}`}>{implementation} v{semver}</span>;
+        return <span title={`${implementation} v${version}`}><Icon src={implIcon} /> v{semver}</span>;
       }
     },
     {

packages/frontend/src/icons/dot.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 3 18.4 19.4"><path class="cls-1" d="M4.5,13.85A1.11,1.11,0,1,1,3.39,15,1.11,1.11,0,0,1,4.5,13.85ZM3.39,11.21A1.11,1.11,0,1,0,4.5,10.1,1.11,1.11,0,0,0,3.39,11.21Zm0-3.75A1.11,1.11,0,1,0,4.5,6.35,1.11,1.11,0,0,0,3.39,7.47Zm3.42,9.33a1.11,1.11,0,1,0,1.11-1.11A1.11,1.11,0,0,0,6.81,16.79Zm0-3.75a1.11,1.11,0,1,0,1.11-1.11A1.11,1.11,0,0,0,6.81,13Zm0-3.75A1.11,1.11,0,1,0,7.92,8.19,1.11,1.11,0,0,0,6.81,9.3Zm0-3.75A1.11,1.11,0,1,0,7.92,4.44,1.11,1.11,0,0,0,6.81,5.55ZM10.1,18.71a1.11,1.11,0,1,0,1.11-1.11A1.11,1.11,0,0,0,10.1,18.71Zm0-3.75a1.11,1.11,0,1,0,1.11-1.11A1.11,1.11,0,0,0,10.1,15Zm0-3.75a1.11,1.11,0,1,0,1.11-1.11A1.11,1.11,0,0,0,10.1,11.21Zm0-3.75a1.11,1.11,0,1,0,1.11-1.11A1.11,1.11,0,0,0,10.1,7.47Zm0-3.75A1.11,1.11,0,1,0,11.21,2.6,1.11,1.11,0,0,0,10.1,3.72Zm3.42,13.08a1.11,1.11,0,1,0,1.11-1.11A1.11,1.11,0,0,0,13.52,16.79Zm0-3.75a1.11,1.11,0,1,0,1.11-1.11A1.11,1.11,0,0,0,13.52,13Zm0-3.75a1.11,1.11,0,1,0,1.11-1.11A1.11,1.11,0,0,0,13.52,9.3Zm0-3.75a1.11,1.11,0,1,0,1.11-1.11A1.11,1.11,0,0,0,13.52,5.55ZM16.81,15a1.11,1.11,0,1,0,1.11-1.11A1.11,1.11,0,0,0,16.81,15Zm0-3.75a1.11,1.11,0,1,0,1.11-1.11A1.11,1.11,0,0,0,16.81,11.21Zm0-3.75a1.11,1.11,0,1,0,1.11-1.11A1.11,1.11,0,0,0,16.81,7.47Z"/></svg>

packages/frontend/src/icons/question-solid.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" data-prefix="fas" data-icon="question" class="svg-inline--fa fa-question fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z"></path></svg>