Adding "Add" button for stacks

app/assets/app.css

@@ -419,6 +419,15 @@ button.remove > * {
   color: red !important;
 }
 
+button.add{
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border-style: none !important;
+}
+button.add > * {
+  color: green !important;
+}
+
 img.logo {
   height: 33px;
   padding-right: 20px;

app/src/components/StackItem.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from 'react-materialize';
 
-export function StackItem({ stack, onRemove }) {
+export function StackItem({ stack, onRemove, onAdd }) {
   return (
     <li className="cart-item">
       <span className="item-name">
@@ -18,6 +18,14 @@ export function StackItem({ stack, onRemove }) {
           onClick={() => onRemove(stack)}
           icon="clear"
           waves="light"
+        />
+		<Button
+          floating
+          large
+          className="right add waves-green"
+          onClick={() => onAdd(stack)}
+          icon="add"
+          waves="light"
         />
       </div>
     </li>

app/src/components/views/shop.jsx

@@ -29,6 +29,10 @@ class Stack {
   get qty() {
     return this._qty;
   }
+
+  set qty(qty) {
+	this._qty = qty;
+  }
 
   get cost() {
     return this.qty * this.item.price;
@@ -141,6 +145,11 @@ export class ShopView extends React.Component {
       exitTimer: t,
     }));
   }
+
+  addToStack(stack) {
+	  this.time = LOGOUT_TIMER;
+	  stack.qty++;
+  }
 
   clearCart(stack) {
     this.time = LOGOUT_TIMER;
@@ -252,7 +261,7 @@ export class ShopView extends React.Component {
     });
 
     const cartContents = this.shoppingCart.map(stack => (
-      <StackItem key={stack.item.id} stack={stack} onRemove={(...a) => this.clearCart(...a)} />
+      <StackItem key={stack.item.id} stack={stack} onRemove={(...a) => this.clearCart(...a)} onAdd={(...a) => this.addToStack(...a)} />
     ));
 
     return (