Better dashboard

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

@@ -57,3 +57,10 @@ button, .button
       &.fa-stack-small
         margin-left: -1.35rem
         vertical-align: 30%
+    .fa-stack-check:last-child
+      @extend .fa
+      @extend .fa-check
+      color: #ffd600
+      margin-left: -2rem
+      vertical-align: 0
+      text-shadow: 1px 4px 1px rgba(0, 0, 0, 0.45)

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

@@ -8,10 +8,13 @@ $button-spacing: 8px
   width: 100%
   .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
   .close_list
     +button-icon-only
-    span
+    //span
       @extend .fa
       @extend .fa-2x
       @extend .fa-times // This is not good!!!

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

@@ -22,7 +22,14 @@
   border-right: $section-border
   border-bottom: $section-border
   border: $section-border
+  position: relative
+  padding: 0
+  height: 400px
+  //background-image: image-url('textures/wood4.jpg')
+  //background-color: rgba(0,0,0,0.4)
   .section-table
+    position: absolute
+    cursor: pointer
     background-color: #ccc
     //TODO remove width and height for ember control
     height: 48px
@@ -31,8 +38,41 @@
     box-shadow: 5px 5px 5px #888888
     color: black
     border-radius: 3px
+    .status-icons
+      // float: right
+      // width: 16px
+      margin-top: -18px
+      .needs_help, .needs_payment, .occupied, .active_order
+        display: none
+        float: right
+        @extend .fa
+      .needs_help
+        @extend .fa-bell
+      .needs_payment
+        @extend .fa-money
+      .active_order
+        @extend .fa-coffee
+    &.occupied
+      background-color: #ffa
+    &.needs_help
+      background-color: #7f7
+      .status-icons .needs_help
+        display: inline-block
+    &.needs_payment
+      // background-image: image-url('icons/needs-payment.png')
+      // background-position: 40px 2px
+      .status-icons .needs_payment
+        display: inline-block
+    &.active_order
+      .active_order
+        display: block
+      .status-icons .active_order
+        display: inline-block
+      //background-color: #f77
     a
       color: black
+      &:hover
+        text-decoration: none
     //background-image: image-url('icons/section-table.png')
     .table-link
       margin-top: -45px
@@ -44,12 +84,7 @@
       width: 45px
       font-size: 42px
       text-align: center
-    .status-icons
-      float: right
-      width: 16px
-      span
-        display: none
-        float: right
+
     .action-button-container
       margin-right: -20px
     .table-actions
@@ -73,37 +108,12 @@
       top: -30px
       select
         width: 92px
-  &.section-tables-active
-    position: relative
-    padding: 0
-    height: 400px
-    //background-image: image-url('textures/wood4.jpg')
-    //background-color: rgba(0,0,0,0.4)
-    .section-table
-      position: absolute
-      cursor: pointer
-      &.occupied
-        background-color: #ffa
-      &.needs_help
-        background-color: #7f7
-        .needs_help
-          display: block
-      &.needs_payment
-        background-image: image-url('icons/needs-payment.png')
-        background-position: 40px 2px
-        .needs_payment
-          display: block
-      &.active_order
-        .active_order
-          display: block
-        //background-color: #f77
-      a
-        &:hover
-          text-decoration: none
-  &.section-tables-manage
+  //&.section-tables-active
+
+  //&.section-tables-manage
     .section-table
       cursor: move
-  &.section-tables-inactive
+  //&.section-tables-inactive
     .section-table
       position: relative
       margin-top: 10px