header new style

css/main.css

@@ -72,10 +72,15 @@ html, body {height: 100%;}
 }
 
 .header-content {
-  padding: 1.5rem;
+  padding: 2rem;
   overflow: hidden;
 }
 
+.header a.button.small-icon {
+  padding: 0.1rem 0.3rem;
+  font-size: 0.9rem;
+}
+
 .top-bar {
   height: auto;
   width: 100%;
@@ -90,19 +95,6 @@ html, body {height: 100%;}
   margin: 0;
 }
 
-.connection-info {
-  margin-bottom: 10px;
-}
-
-.balance-info {
-  font-size: 14px;
-}
-
-/*.panel:hover {
-  background: #efefef;
-  color: #111;
-}*/
-
 .addresses .panel {
   font-size: 0.9rem;
 }
@@ -241,6 +233,7 @@ hr { margin: 2.25rem 0;}
 .size-60 { font-size: 60px; }
 .size-72 { font-size: 72px; }
 .m10t {margin-top: 10px;}
+.p10t {padding-top: 10px;}
 .p0r {padding-right: 0;}
 .p70r {padding-right: 70px;}
 .p70l {padding-left: 70px;}

css/tpl-default.css

@@ -7,7 +7,8 @@ body {
 }
 
 .top-bar-section li:not(.has-form) a:not(.button) {
-  background: #FAE448;
+  background: #1ABC9C;
+  color: #fff;
 }
 
 .top-bar-section li.active:not(.has-form) a:not(.button) {
@@ -16,7 +17,7 @@ body {
 }
 
 .top-bar-section li.active:not(.has-form) a:not(.button):hover, .top-bar-section li:not(.has-form) a:not(.button):hover {
-  background: #111;
+  background: #16A085;
   color: white;
 }
 
@@ -25,11 +26,36 @@ body {
 }
 
 .header {
-  background: #111;
+  background: #2C3E50;
   color: white;
 }
 
-.header h1, h5 {
+.header h1, h5, p {
+  color: #93A9BD;
+  font-weight: 100;
+  margin-bottom: 0;
+}
+
+.header button, .button {
+  margin-bottom: 0;
+}
+
+.header h6 {
+  color: #fff;
+  font-weight: 100;
+}
+
+.header .line-dashed-v {
+  border-right: 1px dashed #5A6B7D;
+}
+
+.header a.button.small-icon {
+  background: white;
+  color: #2C3E50;
+}
+
+.header a.button.small-icon:hover {
+  background: #16A085;
   color: #fff;
 }
 

index.html

@@ -14,20 +14,22 @@
       <div data-ng-init="init()" data-ng-controller="HeaderController">
         <div class="header"> 
           <div class="header-content">
-            <div class="left">
+            <div class="left large-3 columns">
               <a href="#" class="logo" title="copay"></a>
             </div>
-            <div class="right text-right" ng-show="$root.wallet">
-              <div class="connection-info">
+            <div class="right text-center large-9 columns m10t" ng-show="$root.wallet">
+              <h6 class="large-6 columns line-dashed-v">
                 <span ng-if="!$root.wallet.name && $root.wallet.id">{{$root.wallet.id}}</span>
                 <span ng-if="$root.wallet.name">Wallet: {{$root.wallet.name}} &lt;{{$root.wallet.id}}&gt;</span> 
                 ({{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}}) 
-                <a href="#" ng-click="signout()"><i class="fi-power"></i></a>
-              </div>
-              <div class="balance-info">
-                  Balance: {{totalBalance || 0}} <i class="fi-bitcoin"></i><br>
-                  Available to Spend: {{availableBalance || 0}} <i class="fi-bitcoin"></i>
-              </div>
+                <a class="button radius small-icon" href="#" ng-click="signout()"><i class="fi-power"></i></a>
+              </h6>
+              <p class="large-3 columns line-dashed-v">
+                Balance: {{totalBalance || 0}} <i class="fi-bitcoin"></i><br>
+              </p>
+              <p class="large-3 columns">
+                Available to Spend: {{availableBalance || 0}} <i class="fi-bitcoin"></i>
+              </p>
             </div>
           </div>