From 4f8758c6d7ca111df8ec85d0d11340dc2db88fc9 Mon Sep 17 00:00:00 2001
From: Jason Dreyzehner <jason@dreyzehner.com>
Date: Wed, 12 Oct 2016 22:01:48 -0400
Subject: [PATCH] feat(design): polish all settings views

Closes #424
---
 src/sass/icons.scss                   |  8 ++++----
 src/sass/views/advancedSettings.scss  | 12 +++---------
 src/sass/views/tab-settings.scss      | 24 ++++++++++++++----------
 www/img/icon-link.svg                 |  4 ++--
 www/views/advancedSettings.html       | 12 +++++++-----
 www/views/paperWallet.html            | 20 ++++++--------------
 www/views/preferences.html            |  4 ++--
 www/views/preferencesAdvanced.html    |  2 +-
 www/views/preferencesAlias.html       |  2 +-
 www/views/preferencesEmail.html       | 11 ++++++++---
 www/views/preferencesInformation.html | 14 ++++++++++----
 www/views/tab-settings.html           |  4 ++--
 12 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/src/sass/icons.scss b/src/sass/icons.scss
index 65e4e7f1a..0e7c431a5 100644
--- a/src/sass/icons.scss
+++ b/src/sass/icons.scss
@@ -1,19 +1,19 @@
 .icon.bp-arrow-right {
   @extend .ion-ios-arrow-right;
-  @extend %just-a-hint;
+  @extend .just-a-hint;
 }
 
 .icon.bp-arrow-down {
   @extend .ion-ios-arrow-down;
-  @extend %just-a-hint;
+  @extend .just-a-hint;
 }
 
 .icon.bp-arrow-up {
   @extend .ion-ios-arrow-up;
-  @extend %just-a-hint;
+  @extend .just-a-hint;
 }
 
-%just-a-hint {
+.just-a-hint {
   opacity: 0.2;
 }
 
diff --git a/src/sass/views/advancedSettings.scss b/src/sass/views/advancedSettings.scss
index d3da674d9..85dee4e55 100644
--- a/src/sass/views/advancedSettings.scss
+++ b/src/sass/views/advancedSettings.scss
@@ -8,10 +8,6 @@
 #advanced-settings {
   .list {
     .item {
-      color: #444;
-      border-top: none;
-      padding-top: 1.5rem;
-      padding-bottom: 1.5rem;
       &:before {
         display: block;
         position: absolute;
@@ -39,15 +35,13 @@
         color: rgb(58, 58, 58);
       }
     }
+    .has-comment {
+      border-bottom: 0 none;
+    }
     .comment {
       padding: 15px;
       background-color: #fff;
       color: rgba(74, 74, 74, 0.8);
     }
-    .divider-comment {
-      padding: 15px;
-      color: rgba(74, 74, 74, 0.8);
-      font-size: 15px;
-    }
   }
 }
diff --git a/src/sass/views/tab-settings.scss b/src/sass/views/tab-settings.scss
index 309cb6119..a4bedf400 100644
--- a/src/sass/views/tab-settings.scss
+++ b/src/sass/views/tab-settings.scss
@@ -27,7 +27,7 @@
     color: $light-gray;
     font-size: 14px;
   }
- .settings-list {
+  .settings-input-group {
     background-color: #fff;
     .item-stacked-label {
       padding: 1rem;
@@ -37,16 +37,25 @@
       font-size: 12px;
       font-weight: bold;
     }
+  }
+ .settings-list {
+    .item {
+      color: $dark-gray;
+      border-top: none;
+      padding-top: 1.3rem;
+      padding-bottom: 1.3rem;
+      &.item-divider {
+        color: $mid-gray;
+        padding-bottom: .5rem;
+        font-size: .9rem;
+      }
+    }
  }
 }
 
 #tab-settings {
   .list {
     .item {
-      color: $dark-gray;
-      border-top: none;
-      padding-top: 1.3rem;
-      padding-bottom: 1.3rem;
       .big-icon-svg {
        & > .bg{
         width:20px;
@@ -75,11 +84,6 @@
         right: 0;
         content: '';
       }
-      &.item-divider {
-        color: $mid-gray;
-        padding-bottom: .5rem;
-        font-size: .9rem;
-      }
       &.item-heading {
         &:before {
           top: 99%
diff --git a/www/img/icon-link.svg b/www/img/icon-link.svg
index 38d3e8cb0..eba22bf4e 100644
--- a/www/img/icon-link.svg
+++ b/www/img/icon-link.svg
@@ -5,7 +5,7 @@
     <desc>Created with sketchtool.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Icons" transform="translate(-712.000000, -769.000000)" stroke="#8F8F90">
+        <g id="Icons" transform="translate(-712.000000, -769.000000)" stroke="#666677">
             <g id="ui-24px-outline-2_link-69" transform="translate(713.384615, 770.000000)">
                 <g id="Group">
                     <path d="M8.1,3.6 L10.35,1.35 C12.06,-0.36 14.94,-0.36 16.65,1.35 L16.65,1.35 C18.36,3.06 18.36,5.94 16.65,7.65 L14.4,9.9" id="Shape"></path>
@@ -15,4 +15,4 @@
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/www/views/advancedSettings.html b/www/views/advancedSettings.html
index e0a2d0e5d..505ea7dc6 100644
--- a/www/views/advancedSettings.html
+++ b/www/views/advancedSettings.html
@@ -6,7 +6,7 @@
   </ion-nav-bar>
 
   <ion-content>
-    <div class="list">
+    <div class="settings-list list">
       <div class="item item-divider" translate>Enabled Integrations</div>
 
       <ion-toggle ng-show="!isWP" ng-model="bitpayCardEnabled.value" toggle-class="toggle-balanced" ng-change="bitpayCardChange()">
@@ -30,7 +30,7 @@
 
       <div class="item item-divider" translate>Wallet Operation</div>
 
-      <ion-toggle ng-model="spendUnconfirmed.value" toggle-class="toggle-balanced" ng-change="spendUnconfirmedChange()">
+      <ion-toggle class="has-comment" ng-model="spendUnconfirmed.value" toggle-class="toggle-balanced" ng-change="spendUnconfirmedChange()">
         <span class="toggle-label" translate>Use Unconfirmed Funds</span>
       </ion-toggle>
       <div class="comment">
@@ -38,11 +38,13 @@
       </div>
 
       <div class="item item-divider" translate>Experimental Features</div>
-      <div class="divider-comment">
-        <span translate>These features aren't quite ready for primetime. They may change, stop working, or disappear at any time.</span>
+      <div class="settings-explaination">
+        <div class="settings-description" translate>
+          These features aren't quite ready for primetime. They may change, stop working, or disappear at any time.
+        </div>
       </div>
 
-      <ion-toggle ng-show="!isWP" ng-model="recentTransactionsEnabled.value" toggle-class="toggle-balanced" ng-change="recentTransactionsChange()">
+      <ion-toggle class="has-comment" ng-show="!isWP" ng-model="recentTransactionsEnabled.value" toggle-class="toggle-balanced" ng-change="recentTransactionsChange()">
         <span class="toggle-label" translate>Recent Transaction Card</span>
       </ion-toggle>
       <div class="comment">
diff --git a/www/views/paperWallet.html b/www/views/paperWallet.html
index 08b198155..43c9754fc 100644
--- a/www/views/paperWallet.html
+++ b/www/views/paperWallet.html
@@ -6,21 +6,13 @@
   </ion-nav-bar>
 
   <ion-content>
-    <div class="row" ng-show="needsBackup">
-      <div class="columns">
-        <h4></h4>
-        <div class="size-14 text-warning m20b">
-          <i class="fi-alert size-12"></i>
-          <span class="text-warning" translate>Backup Needed</span>.
-          <span translate>
-            Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup.
-          </span>
-        </div>
-        <div class="text-center m20t">
-          <a class="button outline round dark-gray" href ui-sref="tabs.preferences.preferencesAdvanced">
-            <span translate>Preferences</span>
-          </a>
+    <div class="settings" class="row" ng-show="needsBackup">
+      <div class="settings-explaination">
+        <div class="settings-heading" translate>Backup Needed</div>
+        <div class="settings-description" translate>
+          Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup.
         </div>
+        <a class="button button-standard button-primary" href ui-sref="tabs.preferences.preferencesAdvanced" translate>Preferences</a>
       </div>
     </div>
 
diff --git a/www/views/preferences.html b/www/views/preferences.html
index 410b93119..54e38ccd2 100644
--- a/www/views/preferences.html
+++ b/www/views/preferences.html
@@ -7,7 +7,7 @@
     </ion-nav-back-button>
   </ion-nav-bar>
   <ion-content>
-    <div class="list">
+    <div class="list settings-list">
       <div class="item item-divider"></div>
       <a class="item item-icon-right" ui-sref="tabs.preferences.preferencesAlias">
         <span translate>Name</span>
@@ -56,7 +56,7 @@
       </div>
       <div class="item item-divider"></div>
       <a class="item item-icon-right" ui-sref="tabs.preferences.preferencesAdvanced">
-        <span translate>Advanced</span>
+        <span translate>More Options</span>
         <i class="icon bp-arrow-right"></i>
       </a>
     </div>
diff --git a/www/views/preferencesAdvanced.html b/www/views/preferencesAdvanced.html
index 4f307ebc6..ee1c3b859 100644
--- a/www/views/preferencesAdvanced.html
+++ b/www/views/preferencesAdvanced.html
@@ -1,6 +1,6 @@
 <ion-view class="settings">
   <ion-nav-bar class="bar-royal">
-    <ion-nav-title>{{'Advanced Preferences' | translate}}</ion-nav-title>
+    <ion-nav-title>{{'More Options' | translate}}</ion-nav-title>
     <ion-nav-back-button>
     </ion-nav-back-button>
   </ion-nav-bar>
diff --git a/www/views/preferencesAlias.html b/www/views/preferencesAlias.html
index 8471af6f5..ed052c03f 100644
--- a/www/views/preferencesAlias.html
+++ b/www/views/preferencesAlias.html
@@ -12,7 +12,7 @@
       <div class="settings-description" translate>When this wallet was created, it was called &ldquo;{{walletName}}&rdquo;. You can change the name displayed on this device below.</div>
     </div>
     <form name="aliasForm" ng-submit="save(aliasForm)" novalidate>
-      <div class="list settings-list">
+      <div class="list settings-input-group">
         <label class="item item-input item-stacked-label">
           <span class="input-label" transalate>Name</span>
           <input type="text" id="alias" name="alias" ng-model="alias.value" placeholder="Personal Wallet" required>
diff --git a/www/views/preferencesEmail.html b/www/views/preferencesEmail.html
index 7d6cea37e..9d8666daf 100644
--- a/www/views/preferencesEmail.html
+++ b/www/views/preferencesEmail.html
@@ -1,4 +1,4 @@
-<ion-view>
+<ion-view class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>
       {{'Email Notifications'|translate}}
@@ -7,10 +7,15 @@
     </ion-nav-back-button>
   </ion-nav-bar>
   <ion-content>
+    <div class="settings-explaination">
+      <div class="settings-description" translate>
+        You'll receive email notifications about payments sent and received from this wallet.
+      </div>
+    </div>
     <form name="emailForm" ng-submit="save(emailForm)" novalidate>
-      <div class="card list">
+      <div class="list settings-input-group">
         <label class="item item-input item-stacked-label">
-          <span class="input-label" transalate>Email for wallet notifications</span>
+          <span class="input-label" transalate>Email Address</span>
           <input type="email" id="email" name="email" ng-model="email.value" required></input>
         </label>
       </div>
diff --git a/www/views/preferencesInformation.html b/www/views/preferencesInformation.html
index 8bfcca5dd..6db452ea6 100644
--- a/www/views/preferencesInformation.html
+++ b/www/views/preferencesInformation.html
@@ -88,15 +88,21 @@
 
       <div ng-show="addrs">
         <div class="item item-divider" translate>
-          Last Wallet Addresses
+          Latest Wallet Addresses
+        </div>
+        <div class="settings-explaination">
+          <div class="settings-description" translate>
+            Only &ldquo;main&rdquo; addresses are shown below. This excludes &ldquo;change&rdquo; address.
+          </div>
         </div>
-
         <div class="item" ng-repeat="a in addrs" class="oh" copy-to-clipboard="a.address">
           <span>{{a.address}}</span>
           <span class="item-note">{{a.path}} &middot;  {{a.createdOn *1000  | amDateFormat:'MMMM Do YYYY, h:mm a' }}</span>
         </div>
-        <div class="padding text-center" translate>
-          Only Main (not change) addresses are shown. The addresses on this list were not verified locally at this time.
+        <div class="settings-explaination">
+          <div class="settings-description" translate>
+            Please note: due to resource constraints, this list of addresses is not verified locally. A compromised BWS node could return addresses which are not controlled by this wallet.
+          </div>
         </div>
         <button class="button button-standard button-primary" ng-click="scan()" translate>
           Scan addresses for funds
diff --git a/www/views/tab-settings.html b/www/views/tab-settings.html
index 551454d6d..3c1b70e2c 100644
--- a/www/views/tab-settings.html
+++ b/www/views/tab-settings.html
@@ -4,7 +4,7 @@
   </ion-nav-bar>
 
   <ion-content>
-    <div class="list">
+    <div class="settings-list list">
       <div class="item item-divider"></div>
       <a class="ng-hide item item-icon-left item-icon-right" ng-hide="true">
         <i class="icon big-icon-svg">
@@ -26,7 +26,7 @@
         </i>
         <span translate>Help &amp; Support</span>
         <i class="icon big-icon-svg">
-          <img src="img/icon-link.svg" class="bg"/>
+          <img src="img/icon-link.svg" class="bg just-a-hint"/>
         </i>
       </a>
       <a class="ng-hide item item-icon-left item-icon-right" ng-hide="true">