feat(design): improve design of wallet color selection

src/sass/views/tab-settings.scss

@@ -61,6 +61,7 @@
             width: 25px;
             height: 25px;
             padding:.1rem;
+            box-shadow: 0px 1px 5px rgba($mid-gray, .1);
           }
         }
       }
@@ -112,3 +113,14 @@
     border-style: solid;
   }
 }
+.settings-color-name {
+  margin-left: 1rem;
+}
+.settings-color-block {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  box-shadow: 0px 0px 10px;
+  float: left; // we don't want these indicators to affect their container's sizing
+}

www/views/preferences.html

@@ -1,7 +1,7 @@
 <ion-view class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>
-      {{'Wallet Preferences'|translate}}
+      {{'Wallet Settings'|translate}}
     </ion-nav-title>
     <ion-nav-back-button>
     </ion-nav-back-button>
@@ -24,8 +24,8 @@
       </div>
       <a class="item item-icon-right" ui-sref="tabs.preferences.preferencesColor">
         <span translate>Color</span>
-        <span class="item-note" ng-style="{'color': wallet.color}">
-          &block;
+        <span class="item-note">
+          <span class="settings-color-block" ng-style="{'background-color': wallet.color, 'color': wallet.color}"></span>
         </span>
         <i class="icon bp-arrow-right"></i>
       </a>

www/views/preferencesAlias.html

@@ -9,7 +9,7 @@
   <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 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">

www/views/preferencesColor.html

@@ -1,15 +1,15 @@
-<ion-view>
+<ion-view id="settings-color" class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>
-      {{'Color'|translate}}
+      {{'Wallet Color'|translate}}
     </ion-nav-title>
     <ion-nav-back-button>
     </ion-nav-back-button>
   </ion-nav-bar>
   <ion-content>
     <ion-radio ng-repeat="c in colorList" ng-value="c" ng-model="currentColor" ng-click="save(c.color)">
-      <span ng-style="{'color': c.color}">&block;</span>
-      <span> {{c.name}}</span>
+      <span ng-style="{'background-color': c.color, 'color' : c.color}" class="settings-color-block"></span>
+      <span class="settings-color-name"> {{c.name}}</span>
     </ion-radio>
   </ion-content>
 </ion-view>

www/views/tab-settings.html

@@ -1,6 +1,6 @@
 <ion-view id="tab-settings" class="settings">
   <ion-nav-bar class="bar-royal">
-    <ion-nav-title>{{'Global Settings' | translate}}</ion-nav-title>
+    <ion-nav-title>{{'Settings' | translate}}</ion-nav-title>
   </ion-nav-bar>
 
   <ion-content>