From 70db673855d2ee6e56967b2c317c5447e97020a3 Mon Sep 17 00:00:00 2001
From: Nick Cardin <nick@cardin.email>
Date: Thu, 1 Sep 2016 15:04:15 -0400
Subject: [PATCH] update walletDetails header styles

---
 public/views/walletDetails.html     | 17 ++++++++++-------
 src/js/controllers/walletDetails.js |  4 ++++
 src/sass/common.scss                |  8 ++++++++
 src/sass/main.scss                  | 15 +--------------
 src/sass/views/walletDetails.scss   | 24 ++++++++++++++++++++++++
 5 files changed, 47 insertions(+), 21 deletions(-)
 create mode 100644 src/sass/views/walletDetails.scss

diff --git a/public/views/walletDetails.html b/public/views/walletDetails.html
index 12abcb6c6..7efc8a472 100644
--- a/public/views/walletDetails.html
+++ b/public/views/walletDetails.html
@@ -1,10 +1,13 @@
-<ion-view>
-  <ion-nav-bar class="bar-royal">
-    <ion-nav-title>{{wallet.name}}</ion-nav-title>
-    <ion-nav-back-button>
+<ion-view id="walletDetails">
+  <ion-header-bar ng-style="{'background-color': walletDetailsColor}">
+    <button class="button back-button" ng-click="$ionicGoBack()">
       <i class="icon ion-ios-arrow-thin-left"></i>
-    </ion-nav-back-button>
-  </ion-nav-bar>
+    </button>
+    <h1 class="title">{{walletDetailsName}}</h1>
+    <button class="button search-button">
+      <i class="icon ion-ios-search-strong"></i>
+    </button>
+  </ion-header-bar>
 
   <ion-content ng-controller="walletDetailsController" ng-init="init()" delegate-handle="my-handle">
     <div ng-show="!wallet" translate>
@@ -39,7 +42,7 @@
 
           <div ng-click='updateAll()' ng-show="!updateStatusError && wallet.walletScanStatus != 'error' && !wallet.balanceHidden" on-hold="hideToggle()">
             <strong class="size-36">{{status.totalBalanceStr}}</strong>
-            <div class="size-14" ng-if="status.totalBalanceAlternative">{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}</div>
+            <div class="size-14 amount-alternative" ng-if="status.totalBalanceAlternative">{{status.totalBalanceAlternative}} {{status.alternativeIsoCode}}</div>
             <div class="size-14" ng-if="status.pendingAmount">
               <span translate>Pending Confirmation</span>: {{status.pendingAmountStr}}
             </div>
diff --git a/src/js/controllers/walletDetails.js b/src/js/controllers/walletDetails.js
index 4422a5d22..9994be0dd 100644
--- a/src/js/controllers/walletDetails.js
+++ b/src/js/controllers/walletDetails.js
@@ -194,6 +194,10 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
       return $state.go('wallet.copayers');
     };
 
+    /* Set color for header bar */
+    $rootScope.walletDetailsColor = wallet.color;
+    $rootScope.walletDetailsName = wallet.name;
+
     $scope.wallet = wallet;
     $scope.requiresMultipleSignatures = wallet.credentials.m > 1;
     $scope.newTx = false;
diff --git a/src/sass/common.scss b/src/sass/common.scss
index 38548d25a..4507e1f0d 100644
--- a/src/sass/common.scss
+++ b/src/sass/common.scss
@@ -36,6 +36,14 @@
   }
 }
 
+.search-button {
+  .icon:before {
+    color: #fff;
+    font-size: 30px !important;
+    margin-left: 5px;
+  }
+}
+
 .button-block {
   width: 90% !important;
   margin-left: auto;
diff --git a/src/sass/main.scss b/src/sass/main.scss
index fc34e9a98..0f218dd75 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -339,20 +339,6 @@ ul.wallet-selection.wallets {
   padding-right: 10%;
 }
 
-.amount {
-  width: 100%;
-  text-align: center;
-  padding: 1.5rem 1rem 1.5rem 1rem;
-  color: #fff;
-  height: 150px;
-  margin-bottom: 25px;
-}
-
-.alternative-amount {
-  height: 25px;
-  text-align: center;
-}
-
 .wallet-info {
   position: absolute;
   top: inherit;
@@ -1008,5 +994,6 @@ input[type=number] {
 @import 'mixins/mixins';
 @import "views/add";
 @import "views/tab-home";
+@import "views/walletDetails";
 @import 'views/onboarding/onboarding';
 @import "views/includes/walletActivity";
diff --git a/src/sass/views/walletDetails.scss b/src/sass/views/walletDetails.scss
new file mode 100644
index 000000000..633f076ee
--- /dev/null
+++ b/src/sass/views/walletDetails.scss
@@ -0,0 +1,24 @@
+#walletDetails {
+  .bar-header {
+    border: 0;
+    .title, .button {
+      color: #fff;
+    }
+    .button {
+      background-color: transparent;
+    }
+  }
+
+  .amount {
+    width: 100%;
+    text-align: center;
+    padding: 2.5rem 1rem 1.5rem 1rem;
+    color: #fff;
+    height: 150px;
+    margin-bottom: 25px;
+
+    &-alternative {
+      line-height: 48px;
+    }
+  }
+}