Merge pull request #2696 from bechi/sidebar-color1

change color for sidebar

public/views/includes/sidebar.html

@@ -9,17 +9,17 @@
     ng-class="{'selected': item.id == index.walletId}"
     class="nav-item">
     <a ng-click="sidebar.switchWallet(item.id)">
-      <div class="avatar-wallet" 
+      <div class="avatar-wallet"
         ng-style="{'background-color':item.color}">{{(item.name || item.id) | limitTo: 1}}</div>
       <div class="ellipsis name-wallet">{{item.name || item.id}}</div>
-      <div class="size-12">{{item.m}} <span translate>of</span> {{item.n}}</div> 
+      <div class="size-12">{{item.m}} <span translate>of</span> {{item.n}}</div>
     </a>
-    </li> 
+    </li>
     <li>
       <a ng-click="$root.go('add')">
         <i class="icon-arrow-right3 size-18 right m10t"></i>
-        <i class="fi-plus size-24 db left m10r"></i>
+        <i class="fi-plus size-24 db left m20r m5t"></i>
-        <div class="tu text-bold"> 
+        <div class="tu text-bold">
           <span class="size-12" translate>Add wallet</span>
         </div>
         <div translate>Create, join or import</div>

src/css/main.css

@@ -379,7 +379,7 @@ ul.manage li {
 .m20v {margin:20px 0;}
 .m30a {margin: 30px auto;}
 .m-negative-l {margin-left: -0.9375rem;}
-.br100 {border-radius: 100%;}
+.br100 {border-radius: 100% !important;}
 .lh {line-height: 0;}
 .lh140 {line-height: 140%;}
 .oh {overflow:hidden;}
@@ -408,9 +408,9 @@ ul.manage li {
 }
 
 .name-wallet {
-  color: #7A8C9E;
   font-size: 14px;
-  font-weight: 300;
+  font-weight: 400;
+  padding-top: 0 !important;
 }
 
 .tab-bar h1, .tab-bar h2, .tab-bar h3, .tab-bar h4, .tab-bar h5, .tab-bar h6 {
@@ -418,7 +418,7 @@ ul.manage li {
 }
 
 .sidebar li.nav-item.selected .name-wallet {
-  font-weight: 700;
+  color: #fff;
 }
 
 .name-wallet i {

src/css/mobile.css

@@ -271,17 +271,17 @@ a.missing-copayers {
 }
 
 .sidebar {
-  background: #fff;
+  background: #2C3E50;
-  box-shadow: inset -1px 0px 2px 0px rgba(0,0,0,0.20);
+  box-shadow: inset -2px 0px 1px 0px rgba(0,0,0,0.40);
 }
 
 .sidebar li {
   overflow: hidden;
-  border-bottom: 1px solid #f1f3f5;
+  border-bottom: 1px solid #384B5F;
 }
 
 .sidebar li.nav-item.selected {
-  background-color: #f1f3f5;
+  background-color: #122232;
   box-shadow: inset -1px 0px 1px 0px rgba(0,0,0,0.20);
 }
 
@@ -291,22 +291,21 @@ a.missing-copayers {
   font-size: 20px;
   font-weight: 700;
   margin-right: 15px;
-  padding: 0.5rem 0.65rem;
+  padding: 0.33rem 0.65rem;
   line-height: 24px;
   text-align: center;
   float: left;
-  width: 40px;
+  width: 35px;
+  height: 35px;
   border-radius: 3px;
 }
 
 .sidebar header {
-  background-image: -webkit-linear-gradient(bottom, #213140 0%, #2C3E50 100%);
-  background-image: -o-linear-gradient(bottom, #213140 0%, #2C3E50 100%);
-  background-image: linear-gradient(to top, #213140 0%, #2C3E50 100%);
   width: 100%;
   text-align: center;
   height: 7rem;
-  padding: 1.3rem;
+  padding: 1.7rem;
+  border-bottom: 1px solid #384B5F;
 }
 
 .sidebar header h1 {
@@ -325,11 +324,11 @@ a.missing-copayers {
 
 .sidebar ul.off-canvas-list li a {
   font-size: 12px;
-  vertical-align: middle;
   font-weight: 300;
   border-bottom: transparent;
   color: #A5B2BF;
   padding: 1rem 0.7rem;
+  line-height: 155%;
 }
 
 .sidebar ul.off-canvas-list li a i {

src/js/controllers/index.js

@@ -123,7 +123,6 @@ angular.module('copayApp.controllers').controller('indexController', function($r
       var old = document.getElementById('menu-' + self.tab);
       if (old) {
         old.className = '';
-        old.style.borderTopColor = '';
       }
     }
 
@@ -132,7 +131,6 @@ angular.module('copayApp.controllers').controller('indexController', function($r
       var newe = document.getElementById('menu-' + tab);
       if (newe) {
         newe.className = 'active';
-        newe.style.borderTopColor = self.backgroundColor;
       }
     }
 
@@ -340,7 +338,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
   self.updateColor = function() {
     var config = configService.getSync();
     config.colorFor = config.colorFor || {};
-    self.backgroundColor = config.colorFor[self.walletId] || '#2C3E50';
+    self.backgroundColor = config.colorFor[self.walletId] || '#7A8C9E';
     var fc = profileService.focusedClient;
     fc.backgroundColor = self.backgroundColor;
   };

src/js/controllers/preferencesColor.js

@@ -11,7 +11,7 @@ angular.module('copayApp.controllers').controller('preferencesColorController',
       '#9B59B6',
       '#E856EF',
       '#F883B4',
-      '#2C3E50',
+      '#7A8C9E',
     ];
 
     var fc = profileService.focusedClient;
@@ -19,7 +19,7 @@ angular.module('copayApp.controllers').controller('preferencesColorController',
 
     var config = configService.getSync();
     config.colorFor = config.colorFor || {};
-    this.color = config.colorFor[walletId] || '#2C3E50';
+    this.color = config.colorFor[walletId] || '#7A8C9E';
 
     this.save = function(color) {
       var self = this;

src/js/controllers/sidebar.js

@@ -41,7 +41,7 @@ angular.module('copayApp.controllers').controller('sidebarController',
           n: c.n,
           name: c.walletName,
           id: c.walletId,
-          color: config.colorFor[c.walletId] || '#2C3E50',
+          color: config.colorFor[c.walletId] || '#7A8C9E',
         };
       });
       self.wallets = lodash.sortBy(ret, 'walletName');

src/js/services/notificationsService.js

@@ -26,15 +26,15 @@ angular.module('copayApp.services')
       if (!last) return false;
 
       // rules...
-      if (last.type === 'NewTxProposal' 
+      if (last.type === 'NewTxProposal'
           && notificationData.type === 'TxProposalAcceptedBy')
         return true;
 
-      if (last.type === 'TxProposalFinallyAccepted' 
+      if (last.type === 'TxProposalFinallyAccepted'
           && notificationData.type === 'NewOutgoingTx')
         return true;
 
-      if (last.type === 'TxProposalRejectedBy' 
+      if (last.type === 'TxProposalRejectedBy'
           && notificationData.type === 'TxProposalFinallyRejected')
         return true;