From 18781530b960ff8babce72804cf190f307571d49 Mon Sep 17 00:00:00 2001
From: Georgi Georgiev <georgi.h.georgieff@gmail.com>
Date: Mon, 20 Nov 2017 15:35:01 +0100
Subject: [PATCH] Apply indicator to distinguish user's trades in order books.
 The indicator is the cancel  button. You can cancel offer from there as well
 not only from my orders widget.

---
 frontend/client/style/style.scss              | 52 ++++++++-----------
 .../imports/ui/client/widgets/maintrades.html |  4 +-
 .../imports/ui/client/widgets/orderbook.html  |  2 +-
 .../imports/ui/client/widgets/orderrow.html   |  5 +-
 frontend/public/cancel_button_hover.svg       |  1 +
 frontend/public/cancel_button_idle.svg        |  1 +
 6 files changed, 30 insertions(+), 35 deletions(-)
 create mode 100644 frontend/public/cancel_button_hover.svg
 create mode 100644 frontend/public/cancel_button_idle.svg

diff --git a/frontend/client/style/style.scss b/frontend/client/style/style.scss
index 82040da4..95d0c4ef 100644
--- a/frontend/client/style/style.scss
+++ b/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;
     }
diff --git a/frontend/imports/ui/client/widgets/maintrades.html b/frontend/imports/ui/client/widgets/maintrades.html
index 62b63cc4..64092be9 100644
--- a/frontend/imports/ui/client/widgets/maintrades.html
+++ b/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>
diff --git a/frontend/imports/ui/client/widgets/orderbook.html b/frontend/imports/ui/client/widgets/orderbook.html
index fbee456e..3c54b84a 100644
--- a/frontend/imports/ui/client/widgets/orderbook.html
+++ b/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>
diff --git a/frontend/imports/ui/client/widgets/orderrow.html b/frontend/imports/ui/client/widgets/orderrow.html
index 203be896..6898035e 100644
--- a/frontend/imports/ui/client/widgets/orderrow.html
+++ b/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}}
diff --git a/frontend/public/cancel_button_hover.svg b/frontend/public/cancel_button_hover.svg
new file mode 100644
index 00000000..7dc4b2c1
--- /dev/null
+++ b/frontend/public/cancel_button_hover.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 16"><defs><style>.cls-1,.cls-2{fill:none;}.cls-1{stroke:#abadb3;}.cls-2{stroke:#6f7278;stroke-linecap:square;}</style></defs><title>cancel_button_hover</title><path class="cls-1" d="M8,1H21a7.5,7.5,0,0,1,7.5,7.5h0A7.5,7.5,0,0,1,21,16H8A7.5,7.5,0,0,1,.5,8.5h0A7.5,7.5,0,0,1,8,1Z" transform="translate(0 -0.5)"/><path class="cls-2" d="M11.79,5.5l5.66,5.66" transform="translate(0 -0.5)"/><path class="cls-2" d="M17.45,5.5l-5.66,5.66" transform="translate(0 -0.5)"/></svg>
\ No newline at end of file
diff --git a/frontend/public/cancel_button_idle.svg b/frontend/public/cancel_button_idle.svg
new file mode 100644
index 00000000..0ea4ebbd
--- /dev/null
+++ b/frontend/public/cancel_button_idle.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 16"><defs><style>.cls-1,.cls-2,.cls-3{fill:none;}.cls-1{stroke:#d3d5dc;}.cls-2{stroke:#4f5362;opacity:0.6;isolation:isolate;}.cls-2,.cls-3{stroke-linecap:square;}.cls-3{stroke:#9497a0;}</style></defs><title>cancel_button_idle</title><path class="cls-1" d="M8,1H21a7.5,7.5,0,0,1,7.5,7.5h0A7.5,7.5,0,0,1,21,16H8A7.5,7.5,0,0,1,.5,8.5h0A7.5,7.5,0,0,1,8,1Z" transform="translate(0 -0.5)"/><path class="cls-2" d="M11.79,5.5l5.66,5.66" transform="translate(0 -0.5)"/><path class="cls-3" d="M17.45,5.5l-5.66,5.66" transform="translate(0 -0.5)"/></svg>
\ No newline at end of file