Add border radius to resource view rectangles and grid view color icons.

client/app/scripts/charts/nodes-grid.js

@@ -1,5 +1,6 @@
 /* eslint react/jsx-no-bind: "off", no-multi-comp: "off" */
 import React from 'react';
+import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { List as makeList, Map as makeMap } from 'immutable';
 import capitalize from 'lodash/capitalize';
@@ -20,6 +21,15 @@ const IGNORED_COLUMNS = ['docker_container_ports', 'docker_container_id', 'docke
   'docker_container_command', 'docker_container_networks'];
 
 
+const Icon = styled.span`
+  border-radius: ${props => props.theme.borderRadius.soft};
+  background-color: ${props => props.color};
+  margin-top: 3px;
+  display: block;
+  height: 12px;
+  width: 12px;
+`;
+
 function topologyLabel(topologies, id) {
   const topology = findTopologyById(topologies, id);
   if (!topology) {
@@ -74,23 +84,18 @@ function renderIdCell({
 }) {
   const showSubLabel = Boolean(pseudo) && labelMinor;
   const title = showSubLabel ? `${label} (${labelMinor})` : label;
-  const iconStyle = {
-    width: 16,
-    flex: 'none',
-    color: getNodeColor(rank, label)
-  };
 
   return (
     <div title={title} className="nodes-grid-id-column">
-      <div style={iconStyle}><i className="fa fa-square" /></div>
+      <div style={{ width: 16, flex: 'none' }}>
+        <Icon color={getNodeColor(rank, label)} />
+      </div>
       <div className="truncate">
         {label} {showSubLabel && <span className="nodes-grid-label-minor">{labelMinor}</span>}
       </div>
     </div>
   );
 }
-
-
 class NodesGrid extends React.Component {
   constructor(props, context) {
     super(props, context);

client/app/scripts/components/nodes-resources/node-resources-metric-box.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import theme from 'weaveworks-ui-components/lib/theme';
 
 import NodeResourcesMetricBoxInfo from './node-resources-metric-box-info';
 import { clickNode } from '../../actions/app-actions';
@@ -120,10 +121,22 @@ class NodeResourcesMetricBox extends React.Component {
         className="node-resources-metric-box"
         style={{ opacity }}
         onClick={this.handleClick}
-        ref={this.saveNodeRef}>
+        ref={this.saveNodeRef}
+      >
         <title>{label} - {type} usage at {resourceUsageTooltipInfo}</title>
-        {showCapacity && <rect className="frame" {...this.defaultRectProps()} />}
-        <rect className="bar" fill={color} {...this.defaultRectProps(relativeConsumption)} />
+        {showCapacity && <rect
+          className="frame"
+          rx={theme.borderRadius.soft}
+          ry={theme.borderRadius.soft}
+          {...this.defaultRectProps()}
+        />}
+        <rect
+          className="bar"
+          fill={color}
+          rx={theme.borderRadius.soft}
+          ry={theme.borderRadius.soft}
+          {...this.defaultRectProps(relativeConsumption)}
+        />
         {showInfo && <NodeResourcesMetricBoxInfo
           label={label}
           metricSummary={metricSummary}

client/app/styles/_base.scss

@@ -1138,6 +1138,7 @@ a {
 
   &-layer-topology {
     background-color: transparentize($color-gray-50, 0.05);
+    border-radius: $border-radius-soft;
     border: 1px solid $color-gray-200;
     color: $text-tertiary-color;
     font-size: $font-size-normal;