Refactor and implement order buttons on supplier list view

app/assets/javascripts/supplier/app/templates/active_list.emblem

@@ -12,7 +12,7 @@ td.section_title: link-to 'section' view.content.table.section.id: span=view.con
 td.currency.total_list_amount=currency view.content.total
 td.actions
   / if view.content.needs_help
-    button.mark_list_as_helped{ action "markListAsHelped" view.content.id}
+    button.mark-list-as-helped-button{ action "markListAsHelped" view.content.id}
       span.fa-stack.fa-2x.fa-stack-sized
         i.fa.fa-bell.fa-stack-small
         i.fa.fa-ban.revoke

app/assets/javascripts/supplier/app/views/mark-order-active.js.coffee

@@ -1,6 +1,6 @@
 App.MarkOrderActiveView = Ember.View.extend
   tagName: 'button'
   templateName: 'buttons/mark-order-active'
-  classNames: ['mark_order_active']
+  classNames: ['mark-order-active-button']
   classNameBindings: ['order.placed:active:hide']
   click: -> @get('order').mark_active()

app/assets/javascripts/supplier/app/views/mark-order-cancelled.js.coffee

@@ -1,7 +1,7 @@
 App.MarkOrderCancelledView = Ember.View.extend
   tagName: 'button'
   templateName: 'buttons/mark-order-cancelled'
-  classNames: ['remove-order']
+  classNames: ['mark-order-cancelled-button']
   classNameBindings: ['showButton:active:hide']
   showButton: Ember.computed 'order.state', ->
     state = @get('order.state')

app/assets/javascripts/supplier/app/views/mark-order-delivered.js.coffee

@@ -1,7 +1,7 @@
 App.MarkOrderDeliveredView = Ember.View.extend
   tagName: 'button'
   templateName: 'buttons/mark-order-delivered'
-  classNames: ['mark_order_delivered']
+  classNames: ['mark-order-delivered-button']
   classNameBindings: ['showButton:active:hide']
   showButton: Ember.computed 'order.state', ->
     state = @get('order.state')

app/assets/stylesheets/supplier/foundation1/_foundation_and_overrides.css.sass

@@ -1,10 +1,3 @@
-@mixin button-icon-only
-  padding: 2px 5px
-  margin: 0
-
-@mixin table-fit
-  width: 1px
-  white-space: nowrap
 // Foundation by ZURB
 // foundation.zurb.com
 // Licensed under MIT Open Source

app/assets/stylesheets/supplier/foundation1/_mixins.css.sass

@@ -0,0 +1,7 @@
+@mixin button-icon-only
+  padding: 2px 5px
+  margin: 0
+
+@mixin table-fit
+  width: 1px
+  white-space: nowrap

app/assets/stylesheets/supplier/foundation1/application.css.sass

@@ -5,6 +5,7 @@
 @import bourbon
 @import ./qconstants
 @import ./foundation_and_overrides
+@import ./mixins
 @import ./qstructure
 @import ./qicons
 @import ./qdisplays

app/assets/stylesheets/supplier/foundation1/components/_dashboard.css.sass

@@ -22,14 +22,6 @@ $button-spacing: 8px
       @extend .fa
       @extend .fa-2x
       @extend .fa-list
-.mark_list_as_helped
-  +button-icon-only
-  vertical-align: top
-  padding-left: 8px //do not ask me why, just looks
-  padding-right: 2px //do not ask me why, just looks
-  margin-right: $button-spacing
-  span
-    @extend .fa, .fa-2x, .fa-bell-slash-o
 .remove_list_needs_payment
   +button-icon-only
   vertical-align: top
@@ -40,19 +32,6 @@ $button-spacing: 8px
   +button-icon-only
 .active-orders-table
   width: 100%
-  .mark_order_active
-    +button-icon-only
-    margin-right: 0.6em
-  .mark_order_delivered
-    +button-icon-only
-  .remove-order
-    +button-icon-only
-    background-color: $alert-color
-    margin-left: $button-spacing
-    span
-      @extend .fa
-      @extend .fa-2x
-      @extend .fa-times
 .go-to-orders-list
   span
     @extend .fa

app/assets/stylesheets/supplier/foundation1/components/_order-buttons.css.sass

@@ -0,0 +1,21 @@
+.mark-list-as-helped-button
+  +button-icon-only
+  vertical-align: top
+  padding-left: 8px //do not ask me why, just looks
+  padding-right: 2px //do not ask me why, just looks
+  margin-right: $button-spacing
+  span
+    @extend .fa, .fa-2x, .fa-bell-slash-o
+.mark-order-active-button
+  +button-icon-only
+  margin-right: 0.6em
+.mark-order-delivered-button
+  +button-icon-only
+.mark-order-cancelled-button
+  +button($bg: $alert-color)
+  +button-icon-only
+  margin-left: $button-spacing
+  span
+    @extend .fa
+    @extend .fa-2x
+    @extend .fa-times