Apply indicator to distinguish user's trades in order books. The indi…

frontend/client/style/style.scss

@@ -22,7 +22,6 @@ $color-cancel-order: #A8ACB9;
 $color-border-warning: rgba(255, 0, 0, 0.5);
 $color-btn-default-text: #4F5362;
 
-
 /* FONTS */
 
 .montserrat-semibold {
@@ -186,6 +185,18 @@ table {
   }
 }
 
+.btn-cancel {
+  background: url("cancel_button_idle.svg") no-repeat center;
+  width: 28px;
+  height: 15px;
+  padding: 0;
+  border: none;
+
+  &:hover {
+    background: url("cancel_button_hover.svg") no-repeat center;
+  }
+}
+
 .account-section {
   font-family: 'Montserrat', sans-serif;
   font-weight: 500;
@@ -805,19 +816,6 @@ table {
         td:last-of-type {
           width: 22px;
         }
-        .cancel {
-          border: none;
-          padding: 0;
-          width: 29px;
-          height: 16px;
-          border-radius: 7px;
-          &:hover {
-
-          }
-          img {
-            transform: translate(0px, -3px);
-          }
-        }
       }
     }
   }
@@ -868,6 +866,11 @@ table {
         border-top: 1px #DCDDE0 solid;
         background: rgba(248, 247, 245, 0.15);
       }
+
+      td:first-child {
+        width: 50px;
+        text-align: center;
+      }
     }
     &.helper-row {
       td {
@@ -892,10 +895,12 @@ table {
   }
 
   td.bid {
+    width: 90px;
     color: $color-buy;
   }
 
   td.ask {
+    width: 90px;
     color: $color-sell;
   }
 
@@ -912,17 +917,6 @@ table {
     font-size: 12px;
     line-height: 20px;
   }
-
-  .cancel {
-    border: none;
-    padding: 0;
-    width: 29px;
-    height: 16px;
-    border-radius: 7px;
-    img {
-      transform: translate(0px, -3px);
-    }
-  }
 }
 
 .input-section {
@@ -1998,6 +1992,9 @@ button.dex-btn-default.sell, button.dex-btn-max.sell {
         padding: 5px 0;
         position: relative;
         float: left;
+        &:first-child {
+          padding: 4px 0;
+        }
         &:last-of-type {
           width: 30px;
         }
@@ -2604,7 +2601,6 @@ span.right {
   text-transform: uppercase;
 }
 
-
 .modal-body {
   .my-allowance-instructions {
     margin-top: 20px;
@@ -2624,12 +2620,11 @@ span.right {
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(-50%,-50%);
+        transform: translate(-50%, -50%);
       }
 
     }
 
-
     div.my-allowance.row {
       display: flex;
       flex-flow: row wrap;
@@ -2639,7 +2634,6 @@ span.right {
       }
     }
 
-
     div.my-allowance.row.grant {
       margin-bottom: 10px;
     }

frontend/imports/ui/client/widgets/maintrades.html

@@ -36,10 +36,10 @@
     <div class="row">
       <div class="order-center">
         <section class="order-section col-md-6">
-          {{> orderbook title='BUY ORDERS' subtitle=(concat '(click on an order listing to sell ' baseCurrency ')') priceClass='bid' priceLabel='BID PRICE' orders=(findOffers 'bid') showType=false}}
+          {{> orderbook title='BUY ORDERS' subtitle=(concat '(click on an order listing to sell ' baseCurrency ')') priceClass='bid' priceLabel='BID PRICE' orders=(findOffers 'bid') showCancel=true showType=false}}
         </section>
         <section class="order-section col-md-6">
-          {{> orderbook title='SELL ORDERS' subtitle=(concat '(click on an order listing to buy ' baseCurrency ')') priceClass='ask' priceLabel='ASK PRICE' orders=(findOffers 'ask')}}
+          {{> orderbook title='SELL ORDERS' subtitle=(concat '(click on an order listing to buy ' baseCurrency ')') priceClass='ask' priceLabel='ASK PRICE' orders=(findOffers 'ask') showCancel=true}}
         </section>
       </div>
     </div>

frontend/imports/ui/client/widgets/orderbook.html

@@ -17,7 +17,7 @@ <h2>
           <div class="loading-market-history">{{{loadingIcon}}} Loading sell orders...</div>
         {{/if}}
       {{/if}}
-      {{> orders orders=orders type=priceClass priceLabel=priceLabel priceClass=priceClass canAccept=(isMarketOpen) showCancel=(not isMarketOpen)}}
+      {{> orders orders=orders type=priceClass priceLabel=priceLabel priceClass=priceClass canAccept=(isMarketOpen) showCancel=showCancel}}
     </div>
   </div>
 </template>

frontend/imports/ui/client/widgets/orderrow.html

@@ -3,12 +3,11 @@
     <td>
       {{#if order.canCancel}}
         {{#if showCancel}}
-          <button type="button" class="btn btn-default cancel">
-            <img src="remove_button.svg" alt="Cancel order">
+          <button type="button" class="btn btn-default btn-cancel">
           </button>
         {{/if}}
       {{/if}}
-    </td>    
+    </td>
     {{#if showDate}}
       <td class="timestamp">{{timestampToString order.timestamp true true}}</td>
     {{/if}}