improve pin screen

css/src/main.css

@@ -1564,8 +1564,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
   color: #A5B2BF;
   text-transform: uppercase;
   padding-bottom: 0.8rem;
-  border-bottom: 1px solid #425467;
-  margin-bottom: 2rem;
+  margin: 1rem 0;
   text-align: center;
 }
 

css/src/mobile.css

@@ -423,14 +423,14 @@
 
   .pin {
     margin: 0 auto;
-    width: 70%;
+    width: 35%;
     text-align: center;
     overflow: hidden;
   }
 
   .pin-box {
     color: #fff;
-    font-size: 28px;
+    font-size: 14px;
     width: 25%;
     float: left;
   }
@@ -440,8 +440,8 @@
     bottom: 0;
     width: 100%;
     text-align: center;
-    background-color: #000;
-    height: 50%;
+    height: 72%;
+    margin-bottom: 1.5%;
   }
 
   .pin-button-bar {
@@ -449,18 +449,27 @@
   }
 
   a.pin-button {
-    margin: 4px;
-    padding: 5% 10%;
+    margin: 2.5%;
     display: inline-block;
-    color: #ccc;
-    font-size: 120%;
+    color: #CED5DC;
+    font-size: 150%;
+    border: 1px solid #4B6178;
+    border-radius: 100%;
+    width: 70px;
+    padding-top: 1.4rem;
+    height: 70px;
   }
 
   a.pin-button:active {
     color: #fff;
-    background-color: #2C3E50;
+    background-color: #3E5367;
   }
 
+  .icon-circle, .icon-circle-active {
+    color:  #1ABC9C;
+  }
+
+
 }
 
 @media (max-width: 640px) {

views/home.html

@@ -59,11 +59,9 @@
     </div>
 
     <div ng-if='askForPin || ($root.hasPin && !$root.iden)'>
-      <div class="clipo">
-        <img src="img/clipo-pin-enter.png" alt="clipo" width="300" ng-show="$root.hasPin && !$root.iden">
-        <img src="img/clipo-pin.png" alt="clipo" width="380" ng-show="askForPin">
-      </div>
-      <div class="text-white text-center" ng-show="askForPin == 2">Repeat PIN</div>
+      <h2 ng-show="$root.hasPin && !$root.iden"> Enter PIN </h2>
+      <h2 ng-show="askForPin && askForPin !=2"> Set up a PIN </h2>
+      <h2 ng-show="askForPin == 2">Repeat PIN</h2>
       <div class="box-notification" ng-show="error">
         <div class="box-icon error">
           <i class="fi-x size-24"></i>

views/includes/pin-number.html

@@ -16,8 +16,8 @@
   </div>
   <div class="pin-button-bar">
     <a class="pin-button" ng-click="skip()">
-      <i class="fi-unlock text-warning" ng-show="$root.hasPin"></i>
-      <i class="fi-home text-secondary" ng-show="!$root.hasPin"></i>
+      <i class="icon-power text-primary" ng-show="$root.hasPin"></i>
+      <i class="text-primary size-14" ng-show="!$root.hasPin">Skip</i>
     </a>
     <a class="pin-button" ng-click="press(0)">0</a>
     <a class="pin-button" ng-click="clear()"><i class="fi-arrow-left"></i></a>

views/includes/pin.html

@@ -1,21 +1,21 @@
 <div class="pin" ng-show="!error">
   <div class="pin-box">
-    <i class="" ng-show="!defined[0]">-</i>
-    <i class="" ng-show="defined[0]">*</i>
+    <i class="icon-circle" ng-show="!defined[0]"></i>
+    <i class="icon-circle-active" ng-show="defined[0]"></i>
   </div>
     
   <div class="pin-box">
-    <i class="" ng-show="!defined[1]">-</i>
-    <i class="" ng-show="defined[1]">*</i>
+    <i class="icon-circle" ng-show="!defined[1]"></i>
+    <i class="icon-circle-active" ng-show="defined[1]"></i>
   </div>
 
   <div class="pin-box">
-    <i class="" ng-show="!defined[2]">-</i>
-    <i class="" ng-show="defined[2]">*</i>
+    <i class="icon-circle" ng-show="!defined[2]"></i>
+    <i class="icon-circle-active" ng-show="defined[2]"></i>
   </div>
 
   <div class="pin-box">
-    <i class="" ng-show="!defined[3]">-</i>
-    <i class="" ng-show="defined[3]">*</i>
+    <i class="icon-circle" ng-show="!defined[3]"></i>
+    <i class="icon-circle-active" ng-show="defined[3]"></i>
   </div>
 </div>