From d3747b6f7ad28ed817ce06b4d486d336ff219a36 Mon Sep 17 00:00:00 2001
From: bechi <bechilandia@gmail.com>
Date: Thu, 17 Jul 2014 15:44:50 -0300
Subject: [PATCH] side bar

---
 css/main.css                |  55 +++++++++++++++++++-
 views/includes/sidebar.html | 101 +++++++++++++++++-------------------
 2 files changed, 102 insertions(+), 54 deletions(-)

diff --git a/css/main.css b/css/main.css
index 1563a9f4f..38969a905 100644
--- a/css/main.css
+++ b/css/main.css
@@ -75,15 +75,20 @@ body, html{
 .sidebar {
   position: fixed;
   width: 250px;
-  padding: 15px;
+  padding: 20px;
   background-color: #2C3E50;
   color: #fff;
+  line-height: 24px;
 }
 
 .sidebar a {
   color: #fff;
 }
 
+.button.small.side-bar {
+  padding: 0.2rem 0.4rem;
+}
+
 .main {
   margin-left: 250px;
 }
@@ -95,7 +100,7 @@ body, html{
 .dn {display: none;}
 .pr {position: relative;}
 .m0 {margin: 0;}
-.db {display: block;}
+.db {display: block;}  
 .size-12 { font-size: 12px; }      
 .size-14 { font-size: 14px; }
 .size-16 { font-size: 16px; }
@@ -112,6 +117,7 @@ body, html{
 .m10b {margin-bottom: 10px;}
 .m15b {margin-bottom: 20px;}
 .m10r {margin-right: 10px;}
+.m20r {margin-right: 20px;}
 .m10 {margin: 10px;}
 .m15 {margin: 15px;}
 .p10t {padding-top: 10px;}
@@ -122,6 +128,7 @@ body, html{
 .p20h {padding: 0 20px;}
 .m30v {margin: 30px 0;}
 .m10h {margin:0 10px;}
+.m10v {margin:10px 0;}
 .m30a {margin: 30px auto;}
 .br100 {border-radius: 100%;}
 .lh {line-height: 0;}
@@ -141,6 +148,11 @@ body, html{
   margin: 0.5rem 0 1rem;
 }
 
+.line-sidebar {
+  border-top: 1px solid #34495E;
+  margin: 1.4rem 0;
+}
+
 .line-dashed {
   border-top: 1px dashed #ccc;
   margin: 1rem 0;
@@ -148,6 +160,23 @@ body, html{
   overflow: hidden;
 }
 
+.name-wallet {
+  font-size: 16px;
+  color: #D4D4D4;
+  line-height: 16px;
+}
+
+.box-livenet {
+  background: #213140;
+  padding: 0rem 0.5rem 0.2rem;
+  color: #7A8C9E;
+}
+
+.founds {
+  font-weight: 100;
+  color: #7A8C9E;
+}
+
 /* Turn Off Number Input Spinners */
 input[type=number]::-webkit-inner-spin-button, 
 input[type=number]::-webkit-outer-spin-button { 
@@ -468,4 +497,26 @@ button[disabled].warning:focus,
 
 .text-gray { color: #999 !important;}
 
+.side-nav li {
+  font-size: 16px;
+  line-height: 40px;
+}
+
+.side-nav li a {
+  color: #FFFFFF !important;
+  font-weight: 100;
+}
+
+.side-nav li.active a {
+  background-color: #1ABC9C;
+}
+
+.side-nav li:hover a {
+  background-color: #3C4E60;
+}
+
+
+
+
+
 /*-----------------------------------------------------------------*/
\ No newline at end of file
diff --git a/views/includes/sidebar.html b/views/includes/sidebar.html
index dda9d5d1f..dd8d139d6 100644
--- a/views/includes/sidebar.html
+++ b/views/includes/sidebar.html
@@ -1,61 +1,58 @@
 <div ng-controller="SidebarController">
-  <span class="logo"></span>
-  Copay <small>v{{version}}</small>
-  <small>
-    <a class="text-gray" href="https://copay.io" target="_blank">Project Homapage</a>
-  </small>
-  <div>
-    <strong>{{$root.wallet.getName()}}</strong>
-  </div>
-  <div class="size-12 m10t">
-    {{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet
-    <span ng-if="$root.wallet.getNetworkName()=='livenet'">[LIVENET]</span>
-    <span ng-if="$root.wallet.getNetworkName()=='testnet'">[TESTNET]</span>
-  </div>
-
-  <div>
-    <a href="/addresses" class="has-tip" tooltip-placement="bottom" tooltip="ID: {{$root.wallet.id}}">
-      <strong><span>{{$root.wallet.getName()}}</span></strong>
+  <header class="text-center">
+    <a href="/" class="db">
+      <img src="../img/logo-negative-beta.svg" alt="" width="100">
     </a>
-    <a title="Manual Refresh"
+    <small>v{{version}}</small>
+    <div class="line-sidebar"></div>
+    <div>
+      <a href="/addresses" class="name-wallet" tooltip-placement="bottom" tooltip="ID: {{$root.wallet.id}}">
+        <span>{{$root.wallet.getName()}}</span>
+      </a>
+      <a class="button small side-bar" title="Manual Refresh"
       ng-disabled="$root.loading"
-      ng-click="refresh()"><i class="fi-refresh"></i></a>
-    <a title="Signout"
-      ng-click="signout()"><i class="fi-power"></i></a>
-  </div>
-  <div>
-    Balance<br class="hide-for-small">
-    <span ng-if="$root.updatingBalance">
-      <i class="fi-bitcoin-circle icon-rotate spinner"></i>
-    </span>
-    <span ng-if="!$root.updatingBalance"
-      data-options="disable_for_touch:true"
-      tooltip="{{totalBalanceBTC || 0 |noFractionNumber:8}} BTC"
-      tooltip-trigger="mouseenter"
-      tooltip-placement="bottom">{{totalBalance || 0
-      |noFractionNumber}} {{$root.unitName}} 
-    </span>
-  </div>
-  <div>
-    Available to Spend<br class="hide-for-small">
-    <span ng-if="$root.updatingBalance">
-      <i class="fi-bitcoin-circle icon-rotate spinner"></i>
-    </span>
-    <span ng-show="!$root.updatingBalance"
-      data-options="disable_for_touch:true"
-      tooltip="{{availableBalanceBTC || 0 |noFractionNumber:8}} BTC"
-      tooltip-trigger="mouseenter"
-      tooltip-placement="bottom">{{availableBalance || 0|noFractionNumber}} {{$root.unitName}}
-    </span>
-  </div>
-
+      ng-click="refresh()"><i class="size-16 fi-refresh"></i></a>
+      <a class="button small side-bar" title="Signout"
+      ng-click="signout()"><i class="size-16 fi-power"></i></a>
+    </div>
+    <div class="founds size-12">
+      Balance
+      <span ng-if="$root.updatingBalance">
+        <i class="fi-bitcoin-circle icon-rotate spinner"></i>
+      </span>
+      <span ng-if="!$root.updatingBalance"
+        data-options="disable_for_touch:true"
+        tooltip="{{totalBalanceBTC || 0 |noFractionNumber:8}} BTC"
+        tooltip-trigger="mouseenter"
+        tooltip-placement="bottom">{{totalBalance || 0
+        |noFractionNumber}} {{$root.unitName}} 
+      </span>
+      <br>
+      Available
+      <span ng-if="$root.updatingBalance">
+        <i class="fi-bitcoin-circle icon-rotate spinner"></i>
+      </span>
+      <span ng-show="!$root.updatingBalance"
+        data-options="disable_for_touch:true"
+        tooltip="{{availableBalanceBTC || 0 |noFractionNumber:8}} BTC"
+        tooltip-trigger="mouseenter"
+        tooltip-placement="bottom">{{availableBalance || 0|noFractionNumber}} {{$root.unitName}}
+      </span>
+    </div>
+    <div class="m10v box-livenet">
+      <small ng-if="$root.wallet.getNetworkName()=='livenet'">LIVENET</small>
+      <small ng-if="$root.wallet.getNetworkName()=='testnet'">TESTNET</small>
+    </div>
+  </header>
   <ul class="side-nav">
-    <li data-ng-repeat="item in menu" ui-route="/{{item.link}}" class="text-center" data-ng-class="{active: isActive(item)}">
-    <a href="{{item.link}}" ng-click="toggleCollapse()"> <i class="{{item.icon}}"></i> {{item.title}}
-      <span class="label alert round" ng-if="item.link=='#/transactions' && $root.pendingTxCount > 0">{{$root.pendingTxCount}}</span>
-    </a>
+    <li data-ng-repeat="item in menu" ui-route="/{{item.link}}" class="nav-item" data-ng-class="{active: isActive(item)}">
+      <a href="{{item.link}}" ng-click="toggleCollapse()" class="db"> 
+        <i class="size-24 m20r {{item.icon}}"></i> {{item.title}}
+        <span class="label alert round" ng-if="item.link=='#/transactions' && $root.pendingTxCount > 0">{{$root.pendingTxCount}}</span>
+      </a>
     </li>
   </ul>
+  {{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet
 
   <div ng-include="'views/includes/video.html'"></div>