From b9656566bbaae51ec3d250f5ad12a07dd11ab91a Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Fri, 27 Jul 2018 10:28:10 +0200
Subject: [PATCH] Add border radius to resource view rectangles and grid view
 color icons.

---
 client/app/scripts/charts/nodes-grid.js       | 21 ++++++++++++-------
 .../node-resources-metric-box.js              | 19 ++++++++++++++---
 client/app/styles/_base.scss                  |  1 +
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/client/app/scripts/charts/nodes-grid.js b/client/app/scripts/charts/nodes-grid.js
index af81b37f6..7acc54586 100644
--- a/client/app/scripts/charts/nodes-grid.js
+++ b/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);
diff --git a/client/app/scripts/components/nodes-resources/node-resources-metric-box.js b/client/app/scripts/components/nodes-resources/node-resources-metric-box.js
index 533ba3e54..67304bfaa 100644
--- a/client/app/scripts/components/nodes-resources/node-resources-metric-box.js
+++ b/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}
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index a24d8d2f0..330c244b2 100644
--- a/client/app/styles/_base.scss
+++ b/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;