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

…cator is the cancel button. You can cancel offer from there as well not only from my orders widget.

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}}