From 9ec7d5f38ce3b7622f909671617849a2401592dd Mon Sep 17 00:00:00 2001
From: Jason Dreyzehner <jason@dreyzehner.com>
Date: Wed, 12 Oct 2016 19:33:54 -0400
Subject: [PATCH] feat(design): improve wallet settings view and wallet
 settings alias view

---
 src/sass/views/tab-settings.scss | 11 +++++++++++
 www/views/preferences.html       |  4 ++--
 www/views/preferencesAlias.html  | 15 +++++++++------
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/sass/views/tab-settings.scss b/src/sass/views/tab-settings.scss
index c99815870..5f37ea40e 100644
--- a/src/sass/views/tab-settings.scss
+++ b/src/sass/views/tab-settings.scss
@@ -27,6 +27,17 @@
     color: $light-gray;
     font-size: 14px;
   }
+ .settings-list {
+    background-color: #fff;
+    .item-stacked-label {
+      padding: 1rem;
+    }
+    .input-label {
+      text-transform: uppercase;
+      font-size: 12px;
+      font-weight: bold;
+    }
+ }
 }
 
 #tab-settings {
diff --git a/www/views/preferences.html b/www/views/preferences.html
index 76432715d..5dd11b872 100644
--- a/www/views/preferences.html
+++ b/www/views/preferences.html
@@ -30,8 +30,8 @@
         <i class="icon bp-arrow-right"></i>
       </a>
       <a class="item item-icon-right" ui-sref="tabs.preferences.preferencesEmail">
-        <span translate>Email Notifications</span>
-        <span class="item-note">
+        <span class="setting-title" translate>Email Notifications</span>
+        <span class="setting-value">
           <span ng-if="!wallet.email" translate>Disabled</span>
           <span ng-if="wallet.email">{{wallet.email}}</span>
         </span>
diff --git a/www/views/preferencesAlias.html b/www/views/preferencesAlias.html
index ae0df0c89..44d824b1f 100644
--- a/www/views/preferencesAlias.html
+++ b/www/views/preferencesAlias.html
@@ -1,17 +1,21 @@
-<ion-view>
+<ion-view class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>
-      {{'Alias'|translate}}
+      {{'Wallet Name'|translate}}
     </ion-nav-title>
     <ion-nav-back-button>
     </ion-nav-back-button>
   </ion-nav-bar>
   <ion-content>
+    <div class="settings-explaination">
+      <div class="settings-heading" translate>What do you call this wallet?</div>
+      <div class="settings-description" translate>When this wallet was created, it was called "{{walletName}}". You can change how the name is displayed on this device below.</div>
+    </div>
     <form name="aliasForm" ng-submit="save(aliasForm)" novalidate>
-      <div class="card list">
+      <div class="list settings-list">
         <label class="item item-input item-stacked-label">
-          <span class="input-label" transalate>Alias for {{walletName}}</span>
-          <input type="text" id="alias" name="alias" ng-model="alias.value" placeholder="John" required>
+          <span class="input-label" transalate>Name</span>
+          <input type="text" id="alias" name="alias" ng-model="alias.value" placeholder="Personal Wallet" required>
         </label>
       </div>
       <button type="submit"
@@ -20,6 +24,5 @@
         Save
       </button>
     </form>
-    <div class="text-center" translate>Changing wallet alias only affects the local wallet name.</div>
   </ion-content>
 </ion-view>