From 535d2e0a088065d36c33e04e7aaa4756dc5d2472 Mon Sep 17 00:00:00 2001
From: Jason Dreyzehner <jason@dreyzehner.com>
Date: Wed, 12 Oct 2016 18:05:28 -0400
Subject: [PATCH] feat(design): improve layout and design of tab-settings

closes #378
---
 src/sass/views/tab-settings.scss | 17 ++++++++++++-----
 www/views/tab-settings.html      | 16 ++++++++--------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/sass/views/tab-settings.scss b/src/sass/views/tab-settings.scss
index 9443e05b0..f4fec0000 100644
--- a/src/sass/views/tab-settings.scss
+++ b/src/sass/views/tab-settings.scss
@@ -6,6 +6,16 @@
 }
 
 #tab-settings {
+  .setting-title, .setting-value {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .setting-value {
+    color: $light-gray;
+    font-size: 14px;
+  }
   .list {
     .item {
       color: #444;
@@ -23,8 +33,8 @@
           left:8px;
           .bg {
             border-radius: 50%;
-            width:30px;
-            height:30px;
+            width: 25px;
+            height: 25px;
             padding:.1rem;
           }
         }
@@ -54,9 +64,6 @@
           width: 0;
         }
       }
-      .item-note {
-        color: $light-gray;
-      }
     }
   }
   .item-radio .radio-icon {
diff --git a/www/views/tab-settings.html b/www/views/tab-settings.html
index c22662e72..df2530346 100644
--- a/www/views/tab-settings.html
+++ b/www/views/tab-settings.html
@@ -6,7 +6,7 @@
   <ion-content>
     <div class="list">
       <div class="item item-divider"></div>
-      <a class="item item-icon-left item-icon-right" ng-hide="true">
+      <a class="ng-hide item item-icon-left item-icon-right" ng-hide="true">
         <i class="icon big-icon-svg">
           <img src="img/icon-exchange.svg" class="bg"/>
         </i>
@@ -20,7 +20,7 @@
         <span translate>Address Book</span>
         <i class="icon bp-arrow-right"></i>
       </a>
-      <a class="item item-icon-left item-icon-right" ng-hide="true">
+      <a class="ng-hide item item-icon-left item-icon-right" ng-hide="true">
         <i class="icon big-icon-svg">
           <img src="img/icon-send-feedback.svg" class="bg"/>
         </i>
@@ -53,8 +53,8 @@
         <i class="icon big-icon-svg">
           <img src="img/icon-unit.svg" class="bg"/>
         </i>
-        <span translate>Unit</span>
-        <span class="item-note">
+        <span class="setting-title" translate>Unit</span>
+        <span class="setting-value">
           {{unitName}}
         </span>
         <i class="icon bp-arrow-right"></i>
@@ -64,8 +64,8 @@
         <i class="icon big-icon-svg">
           <img src="img/icon-alternative-currency.svg" class="bg"/>
         </i>
-        <span translate>Alternative Currency</span>
-        <span class="item-note">
+        <span class="setting-title" translate>Alternative Currency</span>
+        <span class="setting-value">
           {{selectedAlternative.name}}
         </span>
         <i class="icon bp-arrow-right"></i>
@@ -75,8 +75,8 @@
         <i class="icon big-icon-svg">
           <img src="img/icon-network.svg" class="bg"/>
         </i>
-        <span translate>Bitcoin Network Fee Policy</span>
-        <span class="item-note">
+        <span class="setting-title" translate>Bitcoin Network Fee Policy</span>
+        <span class="setting-value">
           {{feeOpts[currentFeeLevel]|translate}}
         </span>
         <i class="icon bp-arrow-right"></i>