Buttons on keypad have correct colour in new Enter Amount screen.

src/js/routes.js

@@ -701,7 +701,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
           'tab-receive@tabs': {
             controller: 'amountController',
             controllerAs: 'vm',
-            templateUrl: 'views/amount.html'
+            templateUrl: 'views/amountNew.html'
           }
         }
       })

src/sass/views/amountNew.scss

@@ -0,0 +1,484 @@
+#view-amount-new {
+  @extend .deflash-blue;
+  .recipient-label {
+    font-size: 14px;
+    padding-bottom: 0;
+    color: $v-mid-gray;
+  }
+  .item-no-bottom-border + .item {
+      border-top: 0;
+  }
+  .icon-bitpay-card {
+    background-image: url("../img/icon-bitpay.svg");
+  }
+  .icon-amazon {
+    background-image: url("../img/icon-amazon.svg");
+  }
+  @media(max-width: 480px) {
+    .bitcoin-address {
+      .icon {
+        left: 8px;
+        font-size: 24px;
+      }
+      .big-icon-svg {
+        left:5px;
+        & > .bg{
+          width:30px;
+          height:30px;
+          box-shadow: none;
+        }
+      }
+      font-size: 13px;
+      padding-left: 48px;
+    }
+  }
+  @media(max-width: 320px) {
+    .bitcoin-address {
+      & > span:last-child {
+        margin-left: -2px;
+      }
+    }
+  }
+  .send-gravatar {
+    left: 11px;
+    position: absolute;
+    top: 10px;
+  }
+  .amount span input {
+    display: inline;
+    width: 120px;
+  }
+  .amount-pane-recipient {
+    position: absolute;
+    top: 95px;
+    bottom: 0;
+    width: 100%;
+    background-color: #fff;
+    padding: 0 16px;
+
+    .amount-bar {
+      padding: 24px 0;
+      font-size: 18px;
+      @media(max-height: 480px) {
+        padding: 0px;
+      }
+      @media(max-width: 320px) {
+        padding: 0px;
+      }
+      .title {
+        float: left;
+        padding-top: 10px;
+        color: $v-dark-gray;
+        font-weight: bold;
+        @media(max-height: 480px) {
+          padding: 0px;
+        }
+      }
+      @media(max-height: 480px) {
+        padding-top: 3px;
+      }
+    }
+    .amount {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      flex-grow: 1;
+      position: absolute;
+      bottom: 254px;
+      top: 66px;
+      .light {
+        color: $v-light-gray;
+      }
+      @media(max-height: 480px) {
+        top: 45px;
+      }
+      @media(max-width: 320px) {
+        bottom: 276px;
+        top: 60px;
+        & > div {
+          display: inline-block;
+        }
+        & > div:first-child {
+          display: inherit;
+        }
+      }
+    }
+  }
+  .amount-pane-no-recipient {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: #fff;
+    padding: 0 16px;
+
+    .amount-bar {
+      padding: 24px 0;
+      font-size: 18px;
+      .title {
+        padding-top: 10px;
+        color: $v-dark-gray;
+        font-weight: bold;
+        .limits {
+          margin-top: 10px;
+          color: $v-light-gray;
+          font-size: 12px;
+        }
+        .select {
+          margin: 10px 1px;
+        }
+      }
+    }
+    .amount {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      flex-grow: 1;
+      position: absolute;
+      bottom: 254px;
+      top: 66px;
+      .light {
+        color: $v-light-gray;
+      }
+    }
+  }
+  .amount {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    .icon-toggle {
+      font-size: 1.2em;
+      width: auto;
+      margin: 0.8em auto;
+      border: 1px solid $v-subtle-gray;
+      color: $v-dark-gray;
+      border-radius: 3px;
+      padding: 0 10px;
+      cursor: pointer;
+      @media(max-height: 280px) {
+        margin: 0.1em auto;
+      }
+    }
+    &__editable {
+      &--minimize {
+        font-size: 22px;
+      }
+      &--standard {
+        font-size: 42px;
+        @media(max-height: 480px) {
+          font-size: 26px;
+          padding-top: 10px;
+        }
+      }
+      &--placeholder {
+        color: $v-light-gray;
+      }
+    }
+    &__number {
+      color: $v-dark-gray;
+    }
+    &__currency-toggle {
+      border: 1px solid $v-subtle-gray;
+      color: $v-dark-gray;
+      border-radius: 3px;
+      padding: 0 10px;
+      cursor: pointer;
+      font-size: .6em;
+      position: relative;
+      top: -3px;
+      line-height: 1;
+      @media(max-width: 320px) {
+        line-height: 30px;
+        height: 30px;
+      }
+    }
+    &__currency-toggle-mobile {
+      border: 1px solid $v-subtle-gray;
+      color: $v-dark-gray;
+      border-radius: 3px;
+      cursor: pointer;
+      position: relative;
+      line-height: 1;
+      @media(max-width: 320px) {
+        line-height: 30px;
+        height: 30px;
+      }
+    }
+    &__results {
+      &--minimize {
+        font-size: 12px;
+      }
+      &--standard {
+        font-size: 18px;
+        padding: 10px 0;
+      }
+      &--placeholder {
+        color: $v-light-gray;
+      }
+    }
+    &__result {
+      color: $v-light-gray;
+      font-size: .9em;
+      //margin-bottom: -.9em;  TODO matias
+      line-height: 1;
+      @media(max-height: 480px) {
+        margin-bottom: 0;
+      }
+    }
+    &__result-equiv {
+      color: $v-mid-gray;
+      font-size: 1.2em;
+      @media(max-height: 480px) {
+        margin-top: 0;
+        font-size: 16px;
+      }
+    }
+  }
+
+  .scroll-content {
+    display: flex;
+    flex-direction: column;
+
+    .send-amount {
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .send-amount-tool {
+        flex: 0 1 auto;
+
+        .send-amount-tool-input {
+          text-align: center;
+          position: relative;
+          padding: 10px 30px;
+
+          .text-selectable {
+            -webkit-user-select: text;
+            -moz-user-select: text;
+            -ms-user-select: text;
+            user-select: text;
+          }
+
+          .primary-amount {
+            input, .unit, .primary-amount-display {
+              font-size: 1.8em;
+
+              @media (min-width: 375px) {
+                font-size: 2.1em;
+              }
+              
+              @media (min-width: 414px) {
+                font-size: 2.4em;
+              }
+            }
+
+            &.long {
+              input, .unit, .primary-amount-display {
+                font-size: 1.6em;
+  
+                @media (min-width: 375px) {
+                  font-size: 1.8em;
+                }
+                
+                @media (min-width: 414px) {
+                  font-size: 2em;
+                }
+              }
+            }
+
+            &.very-long {
+              input, .unit, .primary-amount-display {
+                font-size: 0.9em;
+  
+                @media (min-width: 375px) {
+                  font-size: 1.3em;
+                }
+                
+                @media (min-width: 414px) {
+                  font-size: 1.4em;
+                }
+              }
+            }
+
+
+            input {
+              border:0;
+              padding:0;
+              white-space:normal;
+              background:none;
+              line-height:1;
+              box-sizing:content-box;
+              display: inline-block;
+              vertical-align: middle;
+              margin: 0;
+              height: 1em;
+              margin-right: 5px;
+              font-family: 'ProximaNova';
+
+              @media (min-width: 375px) {
+              }
+              
+              @media (min-width: 414px) {
+              }
+            }
+
+            .unit,
+            .primary-amount-display {
+              display: inline-block;
+              vertical-align: middle;
+              line-height: 1em;
+            }
+
+            .unit {
+              font-weight: bold;
+            }
+
+            .primary-amount-display {
+              margin-right: 5px;
+              word-break: break-all;
+            }
+          }
+
+          .switch-currencies {
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translate(0, -50%);
+            padding: 15px;
+
+            img {
+              width: 18px;
+            }
+          }
+        }
+
+        .send-amount-actions {
+          margin-top: 15px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .button {
+            flex: 1 1 auto;
+            line-height: 1.2em;
+
+            + .button {
+              margin-left: 10px;
+            }
+
+            span {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+          }
+        }
+      }
+    }
+
+    .button {
+      &.no-margin {
+        margin: 0;
+      }
+    }
+
+    .notification-warning {
+      display: block;
+      padding: .75rem 1.25rem;
+      color: #856404;
+      background-color: #fff3cd;
+      border: 1px solid #ffeeba;
+      line-height: 1.4em;
+      margin-bottom: 20px;
+    }
+
+    .keypad-container {
+      position: relative;
+      //flex: 0 1 196px;
+
+      @media (min-height: 667px) {
+        //flex: 0 1 224px;
+      }
+
+      .keypad {
+        text-align: center;
+        font-size: 18px;
+        font-weight: lighter;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        color: $v-text-primary-color;
+        
+        @media (min-height: 667px) {
+          font-size: 24px;
+        }
+    
+        .row {
+          padding: 0 !important;
+          margin: 0 !important;
+        }
+    
+        .col {
+          line-height: 38px;
+        
+          @media (min-height: 667px) {
+            line-height: 45px;
+          }
+        }
+
+        .row {
+          &:last-child {
+            .col {
+              padding-bottom: 10px;
+            }
+          }
+        }
+    
+        .operator {
+          background-color: $v-subtle-gray;
+          font-weight: normal;
+          cursor: pointer;
+    
+          &:active {
+            background-color: $v-light-gray;
+          }
+        }
+    
+        .operator-send {
+          font-weight: bolder;
+          color: #fff;
+          background-color: $positive;
+          font-size: 36px;
+          cursor: pointer;
+    
+          &:active {
+            background-color: #eaeaea;
+          }
+        }
+    
+        .digit{
+          cursor: pointer;
+          background-color: #000;
+          border: 1px solid #262424;
+          transition: all 0.1s ease;
+          
+
+          &:active {
+            background-color: $v-dark-gray;
+          }
+        }
+    
+        @media(max-height: 480px) {
+          font-size: 12px;
+    
+        }
+      }
+    }
+  }
+  background: #494949;
+
+  ion-content {
+    margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
+    margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
+  }
+}

src/sass/views/views.scss

@@ -1,6 +1,7 @@
 @import "tabs";
 @import "add";
 @import "amount";
+@import "amountNew";
 @import "confirm";
 @import "copayers";
 @import "starting";

www/views/amountNew.html

@@ -0,0 +1,85 @@
+<ion-view id="view-amount-new" hide-tabs>
+    <ion-nav-bar class="bar-royal">
+      <ion-nav-title>
+        {{'Enter amount (New)' | translate}}
+      </ion-nav-title>
+      <ion-nav-back-button ng-click="vm.goBack()"></ion-nav-back-button>
+    </ion-nav-bar>
+    <ion-content scroll="false" style="background: #fff;">
+  
+      <div style="order: 0; position: relative;">
+  
+        <div class="item send-amount">
+          <div ng-if="vm.shapeshiftOrderId">
+            Minimum amount: {{vm.minShapeshiftAmount}} <br/>
+            Maximum amount: {{vm.maxShapeshiftAmount}} <br/>
+          </div>
+          <div class="send-amount-tool">
+            <div class="send-amount-tool-input amount">
+              <div class="primary-amount"
+                ng-class="{long: vm.amountModel.amount.length > 5, 'very-long': vm.amountModel.amount.length > 10}">
+                <span class="primary-amount-display text-selectable">{{ vm.amountModel.amount || 0 }}</span><span class="unit">{{vm.unit}}</span>
+              </div>
+              <span ng-show="vm.globalResult">{{vm.globalResult}} {{vm.unit}}</span>
+              <div class="alternative-amount">
+                <span class="text-selectable">{{vm.alternativeAmount || '0.00'}}</span> <span>{{vm.alternativeUnit}}</span>
+              </div>
+              <div class="switch-currencies" ng-click="vm.changeUnit()"><img src="img/icon-convert.svg"></div>
+            </div>
+            <div class="send-amount-actions text-center">
+              <button class="button button-sendmax" ng-if="!vm.isRequestingSpecificAmount" ng-click="vm.sendMax()">
+                <span>
+                  <i class="icon ion-ios-speedometer-outline"></i>&emsp;
+                  <span translate>Send max amount</span>
+                </span>
+              </button>
+              <button class="button button-sendmax" ng-click="vm.openPopup()">
+                <span>
+                  <i class="icon ion-social-usd"></i>&emsp;
+                  <span translate>Change currency</span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+  
+      <div class="keypad-container" style="background: #fff; position: absolute; bottom: 0; margin-bottom: 57px; width: 100%;">
+        <div class="keypad" style="position: relative;">
+  
+          <div class="row">
+            <div class="col digit" ng-click="vm.pushDigit('7')">7</div>
+            <div class="col digit" ng-click="vm.pushDigit('8')">8</div>
+            <div class="col digit" ng-click="vm.pushDigit('9')">9</div>
+          </div>
+  
+          <div class="row">
+            <div class="col digit" ng-click="vm.pushDigit('4')">4</div>
+            <div class="col digit" ng-click="vm.pushDigit('5')">5</div>
+            <div class="col digit" ng-click="vm.pushDigit('6')">6</div>
+          </div>
+  
+          <div class="row">
+            <div class="col digit" ng-click="vm.pushDigit('1')">1</div>
+            <div class="col digit" ng-click="vm.pushDigit('2')">2</div>
+            <div class="col digit" ng-click="vm.pushDigit('3')">3</div>
+          </div>
+  
+          <div class="row">
+            <div class="col digit" ng-click="vm.pushDigit('.')">.</div>
+            <div class="col digit" ng-click="vm.pushDigit('0')">0</div>
+            <div class="col digit icon ion-backspace-outline" ng-click="vm.removeDigit()"></div>
+          </div>
+        </div>
+      </div>
+  
+      <button 
+        class="button button-full button-primary no-margin" 
+        ng-disabled="!vm.allowSend" 
+        ng-click="vm.finish()"
+        style="position: absolute; bottom: 0;"
+        translate>
+        Next
+      </button>
+    </ion-content>
+  </ion-view>