From 779205c7ad8de6a16d213b5fa1f11fb363abbd4a Mon Sep 17 00:00:00 2001
From: Jason Dreyzehner <jason@dreyzehner.com>
Date: Wed, 12 Oct 2016 18:59:45 -0400
Subject: [PATCH] feat(design): improve design of bitcoin network fee policy
 view

---
 src/sass/views/tab-settings.scss | 41 ++++++++++++++++++++++++++++----
 www/views/preferencesFee.html    | 24 ++++++++++---------
 2 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/src/sass/views/tab-settings.scss b/src/sass/views/tab-settings.scss
index f4fec0000..c99815870 100644
--- a/src/sass/views/tab-settings.scss
+++ b/src/sass/views/tab-settings.scss
@@ -1,11 +1,22 @@
 .settings {
   .item {
-    color: #444;
+    color: $dark-gray;
     border-color: rgba(221, 221, 221, 0.3);
   }
-}
-
-#tab-settings {
+  &-explaination {
+    padding: 0 1rem;
+    margin: 1rem 0;
+  }
+  &-heading {
+    font-size: 17px;
+    color: $dark-gray;
+    margin: 1rem 0;
+  }
+  &-description {
+    font-size: 15px;
+    color: $mid-gray;
+    margin: 1rem 0;
+  }
   .setting-title, .setting-value {
     display: block;
     overflow: hidden;
@@ -16,9 +27,12 @@
     color: $light-gray;
     font-size: 14px;
   }
+}
+
+#tab-settings {
   .list {
     .item {
-      color: #444;
+      color: $dark-gray;
       border-top: none;
       padding-top: 1.3rem;
       padding-bottom: 1.3rem;
@@ -70,3 +84,20 @@
     font-size: 18px;
   }
 }
+
+#settings-fee {
+  .estimates {
+    font-size: 15px;
+    color: $dark-gray;
+  }
+  .fee-minutes, .fee-rate {
+    font-weight: bold;
+    display: block;
+    margin-bottom: .5rem;
+  }
+  .fee-policies {
+    border-color: #fff;
+    border-width: 2px 0;
+    border-style: solid;
+  }
+}
diff --git a/www/views/preferencesFee.html b/www/views/preferencesFee.html
index a07f46f66..123cec824 100644
--- a/www/views/preferencesFee.html
+++ b/www/views/preferencesFee.html
@@ -1,4 +1,4 @@
-<ion-view class="settings">
+<ion-view id="settings-fee" class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>
       {{'Bitcoin Network Fee Policy'|translate}}
@@ -6,19 +6,21 @@
     <ion-nav-back-button>
     </ion-nav-back-button>
   </ion-nav-bar>
-
   <ion-content>
-    <ion-radio ng-repeat="fee in feeLevels.livenet" ng-value="fee.level" ng-model="currentFeeLevel" ng-click="save(fee)">
-      {{feeOpts[fee.level]|translate}}
-    </ion-radio>
-    <div class="padding text-center positive" ng-repeat="fee in feeLevels.livenet" ng-if="fee.level == currentFeeLevel">
-      <div ng-show="fee.nbBlocks">
-        <span translate>Average confirmation time: {{fee.nbBlocks * 10}} minutes</span>.
+    <div class="settings-explaination">
+      <div class="settings-heading" translate>Bitcoin transactions include a fee collected by miners on the network.</div>
+      <div class="settings-description" translate>The higher the fee, the greater the incentive a miner has to include that transaction in a block. Current fees are determined based on network load and the selected policy.</div>
+      <div class="estimates" ng-repeat="fee in feeLevels.livenet" ng-if="fee.level == currentFeeLevel">
+        <div ng-show="fee.nbBlocks">
+          <span translate>Average confirmation time: <span class="fee-minutes">{{fee.nbBlocks * 10}} minutes</span></span>
+        </div>
+        <span translate>Current fee rate for this policy: <span class="fee-rate">{{fee.feePerKBUnit}}/kiB</span></span>
       </div>
-      <span translate>Current fee rate for this policy: {{fee.feePerKBUnit}}/kiB</span>
     </div>
-    <div class="padding" translate>
-      Bitcoin transactions may include a fee collected by miners on the network. The higher the fee, the greater the incentive a miner has to include that transaction in a block. Current fees are determined based on network load and the selected policy.
+    <div class="fee-policies">
+      <ion-radio ng-repeat="fee in feeLevels.livenet" ng-value="fee.level" ng-model="currentFeeLevel" ng-click="save(fee)">
+        {{feeOpts[fee.level]|translate}}
+      </ion-radio>
     </div>
   </ion-content>
 </ion-view>