apply mocks styling for both distributions

src/sass/views/pincode.scss

@@ -1,40 +1,70 @@
 #pin-code {
-  background-color: #C3C3C3;
+  background-color: #FAFAFA;
-  .close {
+  .bar.bar-clear {
-    cursor: pointer;
+    background-color: transparent;
-    padding: .5rem;
+    border: none;
-  }
-  .button-stretch {
-      width: 100%;
-  }
-  .col-offset-15 {
-      margin-left: 15%;
-  }
-  @mixin centerer {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
   }
   .content {
-    position: absolute;
     text-align: center;
     width: 100%;
     height: 100%;
-    .block-code {
+    .row .col {
-      @include centerer;
+      margin: 10px;
-      top: 20% !important;
+      height: 25px;
-      width: 50%;
+    }
-      > .row > .col {
+    .app-icon {
-        border-bottom: 1px solid #3E3E3E;
+      margin-top: -55px;
-        padding: 5px;
+      .big-icon-svg {
-        margin: 10px;
+        > .bg {
-        height: 35px;
+          background-image: url("../img/app/icon.png");
+          height: 60px;
+          width: 60px;
+          margin: auto;
+        }
       }
     }
+    .block-text {
+      align-items: center;
+      background-color: #F1F1F1;
+      text-align: center;
+      height: 30%;
+      border-bottom: 1px solid #c5c5c5;
+      span {
+        width: 60%;
+        margin: 10% auto;
+      }
+    }
+    .block-code {
+      width: 300px;
+      margin: auto;
+      padding: 0 50px 0 50px;
+    }
     .block-buttons {
-      @include centerer;
+      .row {
-      padding: 20px;
+        padding: 3%;
+      }
+      @media (max-height: 480px) {
+        .row {
+          padding: 2%;
+        }
+      }
+      cursor: pointer;
+      position: absolute;
+      bottom: 3%;
+      left: 0;
+      width: 100%;
     }
   }
+  .circle {
+  	border: 1px solid #666666;
+  	border-radius: 50%;
+  	opacity: 0.6;
+  	box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
+  	width: 5px;
+  	height: 5px;
+  	transition: background-color .5s ease-in-out;
+  }
+  .filled {
+  	background-color: #666666;
+  }
 }

www/views/advancedSettings.html

@@ -29,11 +29,13 @@
         <span class="toggle-label" translate>Hide Next Steps Card</span>
       </ion-toggle>
 
-      <div class="item item-divider"></div>
+      <div ng-if="isCordova">
+        <div class="item item-divider"></div>
 
-      <ion-toggle ng-if="isCordova" ng-model="usePincode.enabled" toggle-class="toggle-balanced" ng-change="usePincodeChange()">
+        <ion-toggle ng-model="usePincode.enabled" toggle-class="toggle-balanced" ng-change="usePincodeChange()">
-        <span class="toggle-label" translate>Use pin to lock/unlock the app</span>
+          <span class="toggle-label" translate>Use pin to lock/unlock the app</span>
-      </ion-toggle>
+        </ion-toggle>
+      </div>
     </div>
   </ion-content>
 </ion-view>

www/views/pincode.html

@@ -1,70 +1,67 @@
 <ion-view id="pin-code" ng-controller="pincodeController" hide-tabs hide-back-button="!fromSettings">
-  <ion-nav-bar class="bar-royal">
+  <ion-nav-bar class="bar-clear">
-    <ion-nav-title>{{'Pin Code' | translate}}</ion-nav-title>
     <ion-nav-back-button>
     </ion-nav-back-button>
   </ion-nav-bar>
-  <div ng-if="fromSettings" ng-click="close()" class="close" translate>Close</div>
   <div class="content">
+    <div class="block-text row" translate ng-if="!newPincode">Please enter your mobile unlock code</div>
+    <div class="block-text row" translate ng-if="newPincode">Confirm your mobile unlock code</div>
+    <div class="app-icon">
+      <i class="icon big-icon-svg">
+        <div class="bg app-icon"></div>
+      </i>
+    </div>
     <div class="block-code">
       <div class="row">
-        <div class="col">
+        <div class="col circle" ng-class="{'filled': currentPincode.length >= 1}"></div>
-            {{currentPincode.substring(0, 1)}}
+        <div class="col circle" ng-class="{'filled': currentPincode.length >= 2}"></div>
-        </div>
+        <div class="col circle" ng-class="{'filled': currentPincode.length >= 3}"></div>
-        <div class="col">
+        <div class="col circle" ng-class="{'filled': currentPincode.length >= 4}"></div>
-            {{currentPincode.substring(1, 2)}}
-        </div>
-        <div class="col">
-            {{currentPincode.substring(2, 3)}}
-        </div>
-        <div class="col">
-            {{currentPincode.substring(3, 4)}}
-        </div>
       </div>
     </div>
     <div class="block-buttons">
       <div class="row">
-        <div class="col">
+        <div class="col" ng-click="updatePinCode('1')">
-          <button class="button button-light button-stretch" ng-click="updatePinCode('1')">1</button>
+          <div class="keyboard">1</div>
         </div>
-        <div class="col">
+        <div class="col" ng-click="updatePinCode('2')">
-          <button class="button button-light button-stretch" ng-click="updatePinCode('2')">2</button>
+          <div class="keyboard">2</div>
         </div>
-        <div class="col">
+        <div class="col" ng-click="updatePinCode('3')">
-          <button class="button button-light button-stretch" ng-click="updatePinCode('3')">3</button>
+          <div class="keyboard">3</div>
         </div>
       </div>
       <div class="row">
-        <div class="col">
+        <div class="col" ng-click="updatePinCode('4')">
-          <button class="button button-light button-stretch" ng-click="updatePinCode('4')">4</button>
+          <div class="keyboard">4</div>
         </div>
-        <div class="col">
+        <div class="col" ng-click="updatePinCode('5')">
-          <button class="button button-light button-stretch" ng-click="updatePinCode('5')">5</button>
+          <div class="keyboard">5</div>
         </div>
-        <div class="col">
+        <div class="col" ng-click="updatePinCode('6')">
-          <button class="button button-light button-stretch" ng-click="updatePinCode('6')">6</button>
+          <div class="keyboard">6</div>
         </div>
       </div>
       <div class="row">
-        <div class="col">
+        <div class="col" ng-click="updatePinCode('7')">
-          <button class="button button-light button-stretch" ng-click="updatePinCode('7')">7</button>
+          <div class="keyboard">7</div>
         </div>
-        <div class="col">
+        <div class="col" ng-click="updatePinCode('8')">
-          <button class="button button-light button-stretch" ng-click="updatePinCode('8')">8</button>
+          <div class="keyboard">8</div>
         </div>
-        <div class="col">
+        <div class="col" ng-click="updatePinCode('9')">
-          <button class="button button-light button-stretch" ng-click="updatePinCode('9')">9</button>
+          <div class="keyboard">9</div>
         </div>
       </div>
       <div class="row">
-        <div class="col">
+        <div class="col" ng-click="save()">
-          <button class="button button-light button-stretch icon ion-checkmark" ng-click="save()" ng-disabled=""></button>
+          <div class="keyboard icon ion-checkmark" ng-disabled=""></div>
+        </div>
+        <div class="col" ng-click="updatePinCode('0')">
+          <div class="">0</div>
         </div>
         <div class="col">
-          <button class="button button-light button-stretch" ng-click="updatePinCode('0')">0</button>
+          <div class="keyboard icon ion-arrow-left-a" ng-click="delete()"></div>
-        </div>
-        <div class="col">
-          <button class="button button-light button-stretch icon ion-arrow-left-a" ng-click="delete()"></button>
         </div>
       </div>
     </div>