added node style hexagon to legend

src/app/components/network-legend/network-legend.component.html

@@ -22,11 +22,9 @@
               </span>
             </td>
             <td *ngSwitchCase="'hexagon'">
-              <div class="node hexagon">
-                <div class="hexagon-in1">
-                  <div class="hexagon-in2" [style.background-color]=nodeGroup.value.color></div>
-                </div>
-              </div>
+              <span class="node hexagon" [style.color]=nodeGroup.value.color>
+                &#x2B23;
+              </span>
             </td>
             <td *ngSwitchCase="'triangle'">
               <span class="node triangle" [style.border-bottom-color]=nodeGroup.value.color>

src/app/components/network-legend/network-legend.component.scss

@@ -11,9 +11,9 @@ div.legend {
     max-width: 20vw;
   }
   tr.list-item{
-    padding: 0;
+    line-height: calc(#{$legend-row-height} / 2);
     td{
-      height: $legend-circle-size;
+      height: $legend-row-height;
       vertical-align: middle !important;
       padding: 0 !important;
       .text{
@@ -108,47 +108,9 @@ div.legend {
         display: inline-block;
       }
       .hexagon {
-        overflow: hidden;
-        visibility: hidden;
-        -webkit-transform: rotate(120deg);
-           -moz-transform: rotate(120deg);
-            -ms-transform: rotate(120deg);
-             -o-transform: rotate(120deg);
-                transform: rotate(120deg);
-        cursor: pointer;
-        .hexagon {
-          overflow: hidden;
-          visibility: hidden;
-          -webkit-transform: rotate(120deg);
-             -moz-transform: rotate(120deg);
-              -ms-transform: rotate(120deg);
-               -o-transform: rotate(120deg);
-                  transform: rotate(120deg);
-          cursor: pointer;
-          }
-      .hexagon-in1 {
-          overflow: hidden;
-          width: 100%;
-          height: 100%;
-          -webkit-transform: rotate(-60deg);
-             -moz-transform: rotate(-60deg);
-              -ms-transform: rotate(-60deg);
-               -o-transform: rotate(-60deg);
-                  transform: rotate(-60deg);
-          }
-      .hexagon-in2 {
-          width: 100%;
-          height: 100%;
-          background-repeat: no-repeat;
-          background-position: 50%;
-          visibility: visible;
-          -webkit-transform: rotate(-60deg);
-             -moz-transform: rotate(-60deg);
-              -ms-transform: rotate(-60deg);
-               -o-transform: rotate(-60deg);
-                  transform: rotate(-60deg);
-          }
-        }
+        font-size: $legend-hexagon-font-size;
+        display: inline-block;
+      }
       .legend-icon {
         width: $legend-row-height;
         height: $legend-row-height;

src/variables.scss

@@ -12,6 +12,7 @@ $legend-edge-height: 3px;
 $legend-star-color: #FC0;
 $legend-triangle-size: $legend-row-height;
 $legend-triangle-height: 29px;
+$legend-hexagon-font-size: 38px;
 
 $height: 100%;