better icons

client/assets/styles/vbox.less

@@ -67,7 +67,7 @@
         height: 4em;
         margin: 0;
 
-        text-transform: none;
+        // text-transform: none;
 
         &.empty {
             border-style: dashed;
@@ -77,6 +77,10 @@
             color: black;
             background: @white;
             border: 1px solid @white;
+
+            ellipse.white {
+                stroke: black;
+            }
         }
     }
 
@@ -88,6 +92,7 @@
     figure {
         svg {
             height: 2em;
+            stroke-width: 8px;
         }
 
         figcaption {

client/src/components/shapes.jsx

@@ -58,20 +58,79 @@ module.exports = {
 
 
     // Lifes Upgrades
-    LifeGG: () => square(['green']),
-    LifeRR: () => square(['red']),
-    LifeBB: () => square(['blue']),
-    LifeRG: () => square(['red', 'green']),
-    LifeGB: () => square(['green', 'blue']),
-    LifeRB: () => square(['red', 'blue']),
+    LifeGG: () =>
+    <figure>
+        {square(['green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeRR: () =>
+    <figure>
+        {square(['green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeBB:() =>
+    <figure>
+        {square(['green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeRG: () =>
+    <figure>
+        {square(['red', 'green'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeGB: () =>
+    <figure>
+        {square(['green', 'blue'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
+    LifeRB:() =>
+    <figure>
+        {square(['red', 'blue'])}
+        <figcaption>Life</figcaption>
+    </figure>,
+
 
     // Power Upgrades
-    PowerGG: () => circle(['green']),
-    PowerRR: () => circle(['red']),
-    PowerBB: () => circle(['blue']),
-    PowerRG: () => circle(['red', 'green']),
-    PowerGB: () => circle(['green', 'blue']),
-    PowerRB: () => circle(['red', 'blue']),
+    PowerGG: () =>
+    <figure>
+        {circle(['green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerRR: () =>
+    <figure>
+        {circle(['green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerBB:() =>
+    <figure>
+        {circle(['green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerRG: () =>
+    <figure>
+        {circle(['red', 'green'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerGB: () =>
+    <figure>
+        {circle(['green', 'blue'])}
+        <figcaption>Power</figcaption>
+    </figure>,
+
+    PowerRB:() =>
+    <figure>
+        {circle(['red', 'blue'])}
+        <figcaption>Power</figcaption>
+    </figure>,
 
     // Speed Upgrades
     SpeedGG: () =>
@@ -80,9 +139,33 @@ module.exports = {
         <figcaption>Speed</figcaption>
     </figure>,
 
-    SpeedRR: () => triangle(['red']),
-    SpeedBB: () => triangle(['blue']),
-    SpeedRG: () => triangle(['red', 'green']),
-    SpeedGB: () => triangle(['green', 'blue']),
-    SpeedRB: () => triangle(['red', 'blue']),
+    SpeedRR: () =>
+    <figure>
+        {triangle(['green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedBB:() =>
+    <figure>
+        {triangle(['green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedRG: () =>
+    <figure>
+        {triangle(['red', 'green'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedGB: () =>
+    <figure>
+        {triangle(['green', 'blue'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
+
+    SpeedRB:() =>
+    <figure>
+        {triangle(['red', 'blue'])}
+        <figcaption>Speed</figcaption>
+    </figure>,
 };