From 3bf8b68b3cb5f00e71216fcc4b4fa31de23e5b6d Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Fri, 13 Jan 2017 11:00:04 -0300
Subject: [PATCH] Fix UI

---
 src/sass/views/integrations/coinbase.scss | 118 ++++++++++++++++++++++
 www/views/buyCoinbase.html                |  69 ++++++-------
 www/views/coinbase.html                   |   2 +-
 www/views/sellCoinbase.html               |  80 +++++++--------
 4 files changed, 194 insertions(+), 75 deletions(-)

diff --git a/src/sass/views/integrations/coinbase.scss b/src/sass/views/integrations/coinbase.scss
index 5a5531a7f..ab1c33e73 100644
--- a/src/sass/views/integrations/coinbase.scss
+++ b/src/sass/views/integrations/coinbase.scss
@@ -1,7 +1,125 @@
 #coinbase {
+  $item-lateral-padding: 20px;
+  $item-vertical-padding: 10px;
+  $item-border-color: #EFEFEF;
+  $item-label-color: #6C6C6E;
   @extend .deflash-blue;
   
   .add-bottom-for-cta {
     bottom: 92px;
   }
+  .head {
+    padding: 30px $item-lateral-padding 4rem;
+    border-top: 0;
+
+    .sending-label {
+      display: flex;
+      font-size: 18px;
+      align-items: center;
+      margin-bottom: 1.5rem;
+
+      img {
+        margin-right: 1rem;
+        height: 35px;
+        width: 35px;
+      }
+
+      span {
+        text-transform: capitalize;
+      }
+    }
+    .amount-label{
+      line-height: 30px;
+      .amount{
+        font-size: 38px;
+        margin-bottom: .5rem;
+
+        > .unit {
+          font-family: "Roboto-Light";
+        }
+      }
+      .alternative {
+        font-size: 16px;
+        font-family: "Roboto-Light";
+        color: #9B9B9B;
+      }
+    }
+  }
+  .item {
+    border-color: $item-border-color;
+  }
+  .info {
+    .badge {
+      border-radius: 0;
+      padding: .5rem;
+    }
+    .item {
+      color: #4A4A4A;
+      padding-top: $item-vertical-padding;
+      padding-bottom: $item-vertical-padding;
+      padding-left: $item-lateral-padding;
+
+      &:not(.item-icon-right) {
+        padding-right: $item-lateral-padding;
+      }
+
+      .label {
+        font-size: 14px;
+        color: $item-label-color;
+        margin-bottom: 8px;
+      }
+      
+      .capitalized {
+        text-transform: capitalize;
+      }
+
+      .wallet .big-icon-svg > .bg {
+        height: 24px;
+        width: 24px;
+        padding: 2px;
+        box-shadow: none;
+        vertical-align: middle;
+      }
+
+      &.single-line {
+        display: flex;
+        align-items: center;
+        padding-top: 17px;
+        padding-bottom: 17px;
+
+        .label {
+          margin: 0;
+          flex-grow: 1;
+        }
+      }
+    }
+    .item-divider {
+      padding-top: 1.2rem;
+      color: $item-label-color;
+      font-size: 15px;
+    }
+    .wallet {
+      display: flex;
+      align-items: center;
+      padding: .2rem 0;
+      margin-bottom: 5px;
+
+      ~ .bp-arrow-right {
+        top: 14px;
+      }
+
+      > i {
+        padding: 0;
+        position: static;
+
+        > img {
+          height: 24px;
+          width: 24px;
+          padding: 2px;
+          margin-right: .7rem;
+          box-shadow: none;
+        }
+      }
+    }
+  }
 }
diff --git a/www/views/buyCoinbase.html b/www/views/buyCoinbase.html
index 39af86ac1..2b78e8a4d 100644
--- a/www/views/buyCoinbase.html
+++ b/www/views/buyCoinbase.html
@@ -7,51 +7,52 @@
 
   <ion-content class="add-bottom-for-cta">
     <!-- BUY -->
-    <div class="list">
-      <div class="item item-divider">
-        Purchase Info
-      </div>
-      <label class="item item-input item-select">
-        <div class="input-label">
-          Payment Method
-        </div>
-        <select ng-model="selectedPaymentMethodId.value"
-                ng-options="item.id as item.name for item in paymentMethods"
-                ng-change="buyRequest()">
-        </select>
-      </label>
+    <div class="list" ng-if="buyRequestInfo">
 
-      <div ng-if="buyRequestInfo">
-        <div class="item">
-          Amount
-          <span class="item-note">
-            {{buyRequestInfo.amount.amount}} {{buyRequestInfo.amount.currency}}
-          </span>
+      <div class="item head">
+        <div class="sending-label">
+          <img src="img/buy-bitcoin.svg" alt="buy bitcoin" width="35" class="item-img-buy">
+          <span>Buying</span>
         </div>
-        <div class="item" ng-click="showWalletSelector()">
-          <span>Receive in</span>
-          <span class="item-note">{{wallet ? wallet.name : '...'}}</span>
+        <div class="amount-label">
+          <div class="amount">{{buyRequestInfo.amount.amount}} {{buyRequestInfo.amount.currency}}</div>
+          <div class="alternative">{{buyRequestInfo.subtotal.amount}} {{buyRequestInfo.subtotal.currency}}</div>
+        </div>
+      </div>
+
+      <div class="info">
+        <label class="item item-input item-select">
+          <div class="input-label">
+            Payment Method
+          </div>
+          <select ng-model="selectedPaymentMethodId.value"
+                  ng-options="item.id as item.name for item in paymentMethods"
+                  ng-change="buyRequest()">
+          </select>
+        </label>
+
+        <div class="item item-icon-right" ng-click="showWalletSelector()">
+          <div class="label">Receive in</div>
+          <div class="wallet">
+            <i class="icon big-icon-svg">
+              <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg">
+            </i>
+            {{wallet ? wallet.name : '...'}}
+          </div>
+          <i class="icon bp-arrow-right"></i>
         </div>
 
         <div class="item item-divider">
-          Fees
+          Total to pay
         </div>
         <div class="item" ng-repeat="fee in buyRequestInfo.fees">
-          {{fee.type}}
+          <span class="capitalized">
+            {{fee.type}}
+          </span>
           <span class="item-note">
             {{fee.amount.amount}} {{fee.amount.currency}}
           </span>
         </div>
-
-        <div class="item item-divider">
-          Total
-        </div>
-        <div class="item">
-          Subtotal
-          <span class="item-note">
-            {{buyRequestInfo.subtotal.amount}} {{buyRequestInfo.subtotal.currency}}
-          </span>
-        </div>
         <div class="item">
           Total
           <span class="item-note">
diff --git a/www/views/coinbase.html b/www/views/coinbase.html
index b2a687880..b12cdf1ce 100644
--- a/www/views/coinbase.html
+++ b/www/views/coinbase.html
@@ -77,7 +77,7 @@
       </a>
       <a class="item item-icon-right"
          href ui-sref="tabs.buyandsell.coinbase.amount({nextStep: 'tabs.buyandsell.coinbase.sell', currency: currency})">
-        <img src="img/sell-bitcoin.svg" alt="buy bitcoin" width="35" class="item-img-sell">
+        <img src="img/sell-bitcoin.svg" alt="sell bitcoin" width="35" class="item-img-sell">
         Sell Bitcoin
         <i class="icon bp-arrow-right"></i>
       </a>
diff --git a/www/views/sellCoinbase.html b/www/views/sellCoinbase.html
index b74b8783f..d698f3009 100644
--- a/www/views/sellCoinbase.html
+++ b/www/views/sellCoinbase.html
@@ -7,21 +7,42 @@
 
   <ion-content class="add-bottom-for-cta">
     <!-- SELL -->
-    <div class="list">
-      <div class="item item-divider">
-        Sale Info
-      </div>
-      <label class="item item-input item-select">
-        <div class="input-label">
-          Deposit into
-        </div>
-        <select ng-model="selectedPaymentMethodId.value"
-                ng-options="item.id as item.name for item in paymentMethods"
-                ng-change="sellRequest()">
-        </select>
-      </label>
+    <div class="list" ng-if="sellRequestInfo">
+
+      <div class="item head">
+        <div class="sending-label">
+          <img src="img/sell-bitcoin.svg" alt="sell bitcoin" width="35" class="item-img-sell">
+          <span>Selling</span>
+        </div>
+        <div class="amount-label">
+          <div class="amount">{{sellRequestInfo.amount.amount}} {{sellRequestInfo.amount.currency}}</div>
+          <div class="alternative">{{sellRequestInfo.subtotal.amount}} {{sellRequestInfo.subtotal.currency}}</div>
+        </div>
+      </div> 
+
+      <div class="info">
+
+        <div class="item item-icon-right" ng-click="showWalletSelector()">
+          <div class="label">From</div>
+          <div class="wallet">
+            <i class="icon big-icon-svg">
+              <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg">
+            </i>
+            {{wallet ? wallet.name : '...'}}
+          </div>
+          <i class="icon bp-arrow-right"></i>
+        </div>
+
+        <label class="item item-input item-select">
+          <div class="input-label">
+            Deposit into
+          </div>
+          <select ng-model="selectedPaymentMethodId.value"
+                  ng-options="item.id as item.name for item in paymentMethods"
+                  ng-change="sellRequest()">
+          </select>
+        </label>
 
-      <div ng-if="sellRequestInfo">
         <div class="item item-divider">
           At what percentage lower price would you accept to sell?
         </div>
@@ -54,36 +75,15 @@
         </div>
 
         <div class="item item-divider">
-          Sell from
-        </div>
-        <div class="item" ng-click="showWalletSelector()">
-          <span>Wallet</span>
-          <span class="item-note">{{wallet ? wallet.name : '...'}}</span>
-        </div>
-        <div class="item">
-          Amount
-          <span class="item-note">
-            {{sellRequestInfo.amount.amount}} {{sellRequestInfo.amount.currency}}
-          </span>
-        </div> 
-
-        <div class="item item-divider">
-          Fees
+          Total to receive
         </div>
         <div class="item" ng-repeat="fee in sellRequestInfo.fees">
-          {{fee.type}}
-          <span class="item-note">
-            {{fee.amount.amount}} {{fee.amount.currency}}
+          <span class="capitalized">
+            {{fee.type}}
           </span>
-        </div>
-
-        <div class="item item-divider">
-          Total
-        </div>
-        <div class="item">
-          Subtotal
           <span class="item-note">
-            {{sellRequestInfo.subtotal.amount}} {{sellRequestInfo.subtotal.currency}}
+            <span ng-if="fee.amount.amount != '0.00'">-</span>
+            {{fee.amount.amount}} {{fee.amount.currency}}
           </span>
         </div>
         <div class="item">