fix lock & add wallet on sidebar mobile

css/src/mobile.css

@@ -18,18 +18,6 @@
     display: none;
   }
 
-  .button-close {
-    margin-top:10px;
-    background: #213140;
-    padding: 1.2rem;
-    font-size: 14px;
-    width: 100%;
-    text-align: center;
-    height: 65px;
-    display:block;
-    color: #fff;
-  }
-
   .page, .main {
     height: auto;
   }
@@ -192,6 +180,27 @@
     opacity: 0.6;
   }
 
+  ul.off-canvas-list li .buttons-sidebar {
+    color: #4B6178;
+    font-weight: 700;
+    font-size: 12px;
+    display: block;
+    padding: 0.5rem 0;
+  }
+
+  .buttons-sidebar .col1 {
+    margin-top: 2px;
+  }
+
+  .buttons-sidebar .col1 i {
+    background-color: #fff;
+    color: #4B6178;
+    border-radius: 100%;
+    padding: .3rem 0.55rem;
+    margin: 0 7px;
+  }
+
+
   .bottombar-item a {
     color: #7A8C9E;
     padding: 0.5rem 0;
@@ -296,28 +305,6 @@
     -webkit-tap-highlight-color:rgba(0,0,0,0);
   }
 
-  a.button-addwallet {
-    background: #D8DEE3;
-    border-radius: 4px;
-    color: #7A8C9E;
-    text-transform: uppercase;
-    font-weight: 700;
-    font-size: 12px;
-    padding: 0.8rem;
-    width: 80%;
-    display: block;
-    margin: 20px;
-    text-align: center;
-  }
-
-  a.button-addwallet i {
-    background-color: #7A8C9E;
-    color: #D8DEE3;
-    border-radius: 100%;
-    padding: .1rem 0.25rem;
-    margin-right: 5px;
-  }
-
   .add-wallet .button-setup {
     border: 1px solid #A5B2BF;
     border-radius: 5px;

views/includes/sidebar-mobile.html

@@ -37,16 +37,40 @@
         </a>
       </div>
       </li> 
+      <li>
+        <div class="buttons-sidebar" title="Add wallet" ng-click="$root.go('add')">
+          <div class="col1">
+            <i class="fi-plus size-21"></i> 
+          </div>
+          <div class="col2">
+            <i class="icon-arrow-right3 size-18 right m10t"></i>
+            <span class="tu text-bold">Add wallet</span> <br>
+            <span class="text-light">Create, join or import</span>
+          </div>
+        </div>
+      </li>
+      <li>
+        <div ng-if="!$root.hasPin" class="buttons-sidebar" title="Close" ng-click="signout()">
+          <div class="col1">
+            <i class="fi-power size-21"></i> 
+          </div>
+          <div class="col2 m5t">
+            <span class="tu text-bold">Close</span> <br>
+          </div>
+        </div>
+        <div ng-if="$root.hasPin" class="buttons-sidebar" title="Close" ng-click="signout()">
+          <div class="col1">
+            <i class="fi-lock size-21"></i> 
+          </div>
+          <div class="col2">
+            <span class="tu text-bold">Lock</span> <br>
+            <span class="text-light"> Require pin to unlock</span>
+          </div>
+        </div>
+      </li>
     </ul>
 
-    <a class="button-addwallet" title="Add wallet" ng-click="$root.go('add')">
+      
-      <i class="fi-plus"></i> Add wallet
-    </a>
-
-    <a class="button-close" title="Close" ng-click="signout()">
-      <span ng-if="!$root.hasPin"><i class="size-16 m5r fi-power"></i> {{'Close'|translate}}</span>
-      <span ng-if="$root.hasPin"><i class="size-16 m5r icon-locked"></i> {{'Lock'|translate}}</span>
-    </a>
 
 
     <div class="text-gray size-12 text-center columns">