add style on header & ul

css/src/main.css

@@ -219,6 +219,7 @@ header .alt-currency {
     height:100%;   
 }
 
+
 .tab-bar {
   display: none;
 }
@@ -249,11 +250,11 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, inpu
 .side-nav.wallets .avatar-wallet, 
 .wallet-selection.wallets .avatar-wallet
 {
-  background-color: #7A8C9E;
+  background-color: #1ABC9C;
-  color: #213140;
+  color: #fff;
   padding: 0.35rem 0.5rem;
   text-align: center;
-  margin-top: 6px;
+  margin-top: 3px;
   width: 35px;
 }
 
@@ -621,6 +622,7 @@ a.button-setup {
   float: left;
   color: #fff;
   text-transform: lowercase;
+  font-weight: 500;
 }
 
 .name-wallet i {

css/src/mobile.css

@@ -36,6 +36,7 @@
     width: 100%;
     z-index: 5;
     background: #3C4E60;
+    height: 55px;
   }
 
   .bottom-bar {
@@ -57,8 +58,17 @@
   } 
 
   header {
-    height: 45px;
+    padding: 0.45rem;
+    height: 55px;
     line-height: 110%;
+    background-color: #213140;
+  }
+
+  header .photo-container {
+    width: 40px;
+    height: 40px;
+    margin-right: 10px;
+    border: 1px solid #7A8C9E;
   }
 
   header h1 {
@@ -112,10 +122,6 @@
     height: 30px;
   }
 
-  .tab-bar-section {
-    text-align: left;
-  }
-
   .setup-page {
     height: 100%;
   }
@@ -125,8 +131,10 @@
   }
 
   .tab-bar h1 {
-    font-weight: 100;
+    font-weight: 700;
     text-align: center;
+    text-transform: uppercase;
+    font-size: 14px;
   }
 
   ul.off-canvas-list li a {
@@ -173,8 +181,9 @@
     background-color: #213140;
   }
 
-  .left-small {
+  .left-small, .right-small, .tab-bar-section {
     border-right: none;
+    padding-top: 0.3rem;
   }
 
   .right-small {
@@ -219,6 +228,7 @@
   }
 
   .side-nav.wallets {
+    background: #E4E8EC;
     z-index: 100;
     overflow-y: inherit;
     position: inherit;
@@ -226,8 +236,14 @@
     border-bottom: none;
   }
 
+  .side-nav.wallets li {
+    margin: 0;
+    padding: 0.8rem .1rem;
+    border-bottom: 1px solid #D6DBE1;
+  }
+
   .side-nav li.nav-item.selected {
-    background-color: #3C4E60;
+    background-color: #CED5DC;
   } 
 
   /* 

views/includes/sidebar-mobile.html

@@ -1,12 +1,15 @@
 <header>
-  <a ng-click="$root.go('profile')" class="db p20h nav-item text-center" title="Create new wallet">
+  <a ng-click="$root.go('profile')" class="db nav-item" title="Create new wallet">
-    <div class="photo-container">
+    <div class="photo-container left">
-      <img gravatar-src="'{{$root.iden.getName()}}'" gravatar-size="35">
+      <img gravatar-src="'{{$root.iden.getName()}}'" gravatar-size="40">
+    </div>
+    <div class="left">
+      <p class="text-white m0">{{$root.iden.getName()}}</p>
+      <span class="db text-gray size-10"> {{'View My Profile' | translate }} </span>
+    </div>
+    <div class="right">
+      <i class="icon-arrow-right3 size-16 db m10t text-white"></i>
     </div>
-    <p class="text-black m5">{{$root.iden.getName()}}</p>
-    <span class="db text-gray size-10">
-      <i class="fi-torso"></i> {{'View My Profile' | translate }} 
-    </span>
   </a>
 </header>
 <ul class="side-nav wallets off-canvas-list" ng-show="wallets[0]">
@@ -20,15 +23,15 @@
   <div class="col2">
     <a class="size-12 wallet-item">
       <div class="oh">
-        <div class="right size-10 type-wallet">
+        <div class="right size-10 text-gray">
           [ {{item.requiredCopayers}} of {{item.totalCopayers}} ]</div> 
-        <div class="ellipsis name-wallet">{{item.name || item.id}}</div>
+        <div class="ellipsis name-wallet text-black">{{item.name || item.id}}</div>
       </div>
       <div class="oh">
         <span ng-if="item.isComplete() && item.balanceInfo.updatingBalance"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span>
         <div ng-if="item.isComplete() && !item.balanceInfo.updatingBalance" data-options="disable_for_touch:true">
           <b class="m5r size-12">{{item.balanceInfo.totalBalance || 0}} {{item.settings.unitName}}</b>
-          <span class="alt-currency size-10">{{item.balanceInfo.totalBalanceAlternative}} {{item.balanceInfo.alternativeIsoCode}}</span>
+          <span class="alt-currency gray size-10">{{item.balanceInfo.totalBalanceAlternative}} {{item.balanceInfo.alternativeIsoCode}}</span>
         </div>
         <span ng-if="!item.isComplete()">Waiting for copayers...</span>
       </div>