UI fixes

src/js/controllers/confirm.js

@@ -570,7 +570,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
 
     if (usingCustomFee) {
       scope.customFeePerKB = tx.feeRate;
-      scope.feePerSatByte = (tx.feeRate / 1000).toFixed();
+      scope.feePerSatByte = tx.feeRate / 1000;
     }
 
     $ionicModal.fromTemplateUrl('views/modals/chooseFeeLevel.html', {

src/js/controllers/modals/feeLevels.js

@@ -35,10 +35,13 @@ angular.module('copayApp.controllers').controller('feeLevelsController', functio
   };
 
   $scope.checkFees = function(feePerSatByte) {
-    if (parseInt(feePerSatByte) < $scope.minFeeRecommended) $scope.showMinWarning = true;
+    if (Number(feePerSatByte) == 0) $scope.showError = true;
+    else $scope.showError = false;
+
+    if (Number(feePerSatByte) < $scope.minFeeRecommended) $scope.showMinWarning = true;
     else $scope.showMinWarning = false;
 
-    if (parseInt(feePerSatByte) > $scope.maxFeeRecommended) $scope.showMaxWarning = true;
+    if (Number(feePerSatByte) > $scope.maxFeeRecommended) $scope.showMaxWarning = true;
     else $scope.showMaxWarning = false;
   };
 
@@ -54,7 +57,7 @@ angular.module('copayApp.controllers').controller('feeLevelsController', functio
       $scope.avgConfirmationTime = value.nbBlocks * 10;
     } else {
       $scope.avgConfirmationTime = null;
-      $scope.customSatPerByte = { value: parseInt($scope.feePerSatByte) };
+      $scope.customSatPerByte = { value: Number($scope.feePerSatByte) };
       $scope.customFeePerKB = ($scope.feePerSatByte * 1000).toFixed();
     }
 

src/sass/views/includes/modals/choose-fee-level.scss

@@ -2,7 +2,7 @@
   @extend .deflash-blue;
   .selected-fee-level {
     text-align: center;
-    background: #f2f2f2;
+    background: #f9f9f9;
     font-size: 11px;
     height: 120px;
     padding-top: 25px;
@@ -20,19 +20,39 @@
     .rate .list {
       margin-bottom: 0;
     }
-    .unit {
-      color: #9c9c9c;
-      background: #f2f2f2;
-      position: absolute;
-      right: 0;
-      top: 0;
-      padding: 15px 10px 12px 10px;
+
+    .item-input {
+      input[type="number"] {
+        text-align: right;
+        padding-right: 90px;
+      }
+      .unit {
+        color: #9c9c9c;
+        background: #f2f2f2;
+        position: absolute;
+        right: 0;
+        top: 0;
+        padding: 15px 10px 12px 10px;
+      }
     }
   }
   .warning-fee {
+    padding: 5px 10px;
     color: $v-warning-color;
     font-size: 12px;
-    text-align: left;
+    text-align: center;
+    i {
+      margin-right: 8px;
+    }
+  }
+  .error-fee {
+    padding: 5px 10px;
+    color: $v-error-color;
+    font-size: 12px;
+    text-align: center;
+    i {
+      margin-right: 8px;
+    }
   }
   .box-notification {
     margin: 0;

www/views/modals/chooseFeeLevel.html

@@ -4,9 +4,7 @@
       {{'Bitcoin Network Fee Policy'|translate}}
     </div>
     <button
-      ng-disabled="customFeePerKB &&
-      (!customSatPerByte.value ||
-      customSatPerByte.value > maxFeeRecommended || customSatPerByte.value < minFeeRecommended)"
+      ng-disabled="customFeePerKB && !customSatPerByte.value"
       class="button button-clear" ng-click="ok()" translate>
       OK
     </button>
@@ -41,6 +39,8 @@
               <input
               type="number"
               placeholder="{{'Enter custom fee'|translate}}"
+              ng-min="0"
+              ng-max="maxFeeRecommended + 10000"
               min="minFeeRecommended"
               max="maxFeeRecommended"
               ng-change="checkFees(customSatPerByte.value)"
@@ -49,15 +49,20 @@
               <span class="unit">sat/byte</span>
             </label>
           </div>
-          <div class="warning-fee">
-            <i ng-if="showMinWarning || showMaxWarning" class="icon ion-alert-circled"></i>
+          <div class="error-fee" ng-if="showError">
+            <i class="icon ion-close-circled"></i>
+            <span translate>
+              Zero value for fee are not allowed.
+            </span>
+          </div>
+          <div class="warning-fee" ng-if="showMinWarning || showMaxWarning">
+            <i class="icon ion-alert-circled"></i>
             <span ng-if="showMinWarning" translate>
               Your fee is lower than recommended.
             </span>
             <span ng-if="showMaxWarning" translate>
-              You could not set a fee higher than 1000 satoshis/byte.
+              You should not set a fee higher than 1000 satoshis/byte.
             </span>
-            &nbsp;
           </div>
         </div>
       </div>