Simplify cloud selection

client/app/scripts/charts/node-shape-cloud.js

@@ -34,7 +34,7 @@ export default function NodeShapeCloud({highlighted, size, color}) {
   };
 
   return (
-    <g className="shape">
+    <g className="shape shape-cloud">
       {highlighted &&
           <path className="highlighted" {...pathProps(0.7)} />}
       <path className="border" stroke={color} {...pathProps(0.5)} />

client/app/scripts/charts/node.js

@@ -83,10 +83,6 @@ export default class Node extends React.Component {
     if (this.props.pseudo) {
       classNames.push('pseudo');
     }
-    if (this.props.shape === 'cloud') {
-      // need to identify cloud in CSS because it's stroke is not set via CSS
-      classNames.push('cloud');
-    }
 
     const classes = classNames.join(' ');
 

client/app/styles/main.less

@@ -313,20 +313,10 @@ h2 {
     }
   }
 
-  g.node {
+  .nodes > .node {
     cursor: pointer;
     transition: opacity .5s ease-in-out;
 
-    /* cloud paths have stroke-width set dynamically */
-    &:not(.cloud) .shape .border {
-      stroke-width: @node-border-stroke-width;
-      fill: @background-color;
-    }
-
-    &:not(.cloud) .stack .shape .border {
-      stroke-width: @node-border-stroke-width - 0.5;
-    }
-
     &.pseudo {
       cursor: default;
 
@@ -379,9 +369,14 @@ h2 {
     }
   }
 
-
   .shape {
 
+    /* cloud paths have stroke-width set dynamically */
+    &:not(.shape-cloud) .border {
+      stroke-width: @node-border-stroke-width;
+      fill: @background-color;
+    }
+
     .shadow {
       stroke: none;
       fill: @background-lighter-color;
@@ -399,6 +394,11 @@ h2 {
       stroke-opacity: @node-highlight-stroke-opacity;
     }
   }
+
+  .stack .shape .border {
+    stroke-width: @node-border-stroke-width - 0.5;
+  }
+
 }
 
 .details {