Merge pull request #2409 from bechi/pin-screen

Pin screen

css/src/icons.css

@@ -50,120 +50,170 @@
 	-moz-osx-font-smoothing: grayscale;
 }
 
+.icon-circle:before {
+	content: "\e629";
+}
+
+.icon-circle-active:before {
+	content: "\e627";
+}
+
 .icon-trash:before {
 	content: "\e626";
 }
-.icon-history:before {
-	content: "\e623";
-}
-.icon-reference:before {
-	content: "\e621";
-}
-.icon-bell:before {
-	content: "\e61c";
-}
-.icon-receive:before {
-	content: "\e625";
-}
-.icon-wrench:before {
-	content: "\e61d";
-}
-.icon-download:before {
-	content: "\e61e";
-}
-.icon-upload:before {
-	content: "\e61f";
-}
-.icon-power:before {
-	content: "\e620";
-}
-.icon-forward:before {
-	content: "\e624";
-}
+
 .icon-wallet:before {
 	content: "\e622";
 }
+
+.icon-history:before {
+	content: "\e623";
+}
+
+.icon-reference:before {
+	content: "\e621";
+}
+
+.icon-bell:before {
+	content: "\e61c";
+}
+
+.icon-receive:before {
+	content: "\e625";
+}
+
+.icon-wrench:before {
+	content: "\e61d";
+}
+
+.icon-download:before {
+	content: "\e61e";
+}
+
+.icon-upload:before {
+	content: "\e61f";
+}
+
+.icon-power:before {
+	content: "\e620";
+}
+
+.icon-forward:before {
+	content: "\e624";
+}
+
 .icon-compose:before {
 	content: "\e610";
 }
+
 .icon-contact:before {
 	content: "\e611";
 }
+
 .icon-email:before {
 	content: "\e612";
 }
+
 .icon-gear:before {
 	content: "\e613";
 }
+
 .icon-home:before {
 	content: "\e614";
 }
+
 .icon-locked:before {
 	content: "\e615";
 }
+
 .icon-paperplane:before {
 	content: "\e617";
 }
+
 .icon-people:before {
 	content: "\e618";
 }
+
 .icon-person:before {
 	content: "\e619";
 }
+
 .icon-pricetag:before {
 	content: "\e61a";
 }
+
 .icon-pricetags:before {
 	content: "\e61b";
 }
+
 .icon-bitcoin:before {
 	content: "\e60f";
 }
+
 .icon-usd:before {
 	content: "\e616";
 }
+
+.icon-erase:before {
+	content: "\e628";
+}
+
 .icon-arrow-left:before {
 	content: "\e600";
 }
+
 .icon-arrow-down:before {
 	content: "\e601";
 }
+
 .icon-arrow-up:before {
 	content: "\e602";
 }
+
 .icon-arrow-right:before {
 	content: "\e603";
 }
+
 .icon-arrow-left2:before {
 	content: "\e604";
 }
+
 .icon-arrow-down2:before {
 	content: "\e605";
 }
+
 .icon-arrow-up2:before {
 	content: "\e606";
 }
+
 .icon-arrow-right2:before {
 	content: "\e607";
 }
+
 .icon-arrow-left3:before {
 	content: "\e608";
 }
+
 .icon-arrow-down3:before {
 	content: "\e609";
 }
+
 .icon-arrow-up3:before {
 	content: "\e60a";
 }
+
 .icon-arrow-right3:before {
 	content: "\e60b";
 }
+
 .icon-arrow-left4:before {
 	content: "\e60c";
 }
+
 .icon-arrow-down4:before {
 	content: "\e60d";
 }
+
 .icon-arrow-up4:before {
 	content: "\e60e";
 }

css/src/main.css

@@ -1565,8 +1565,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

@@ -415,14 +415,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;
   }
@@ -432,8 +432,8 @@
     bottom: 0;
     width: 100%;
     text-align: center;
-    background-color: #000;
-    height: 50%;
+    height: 72%;
+    margin-bottom: 1.5%;
   }
 
   .pin-button-bar {
@@ -441,18 +441,28 @@
   }
 
   a.pin-button {
-    margin: 4px;
-    padding: 5% 10%;
+    margin: 2.5%;
     display: inline-block;
-    color: #ccc;
-    font-size: 120%;
+    color: #CED5DC;
+    font-size: 210%;
+    font-weight: 100;
+    border: 1px solid #4B6178;
+    border-radius: 100%;
+    width: 70px;
+    padding-top: 1rem;
+    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) {

font/icomoon.svg

@@ -46,4 +46,7 @@
 <glyph unicode="&#xe624;" d="M449.248 577.472v318.528l-449.248-448 449.248-448v321.344c228.32 0 453.664-39.744 574.752-228.352-12.608 343.712-269.76 425.536-574.752 484.48z" />
 <glyph unicode="&#xe625;" d="M680.75 729.25h-337.5l-281.25-337.5v-225.001c0-31.066 25.184-56.25 56.25-56.25h787.5c31.068 0 56.25 25.184 56.25 56.25v225.001l-281.25 337.5zM737.001 391.75l-112.5-112.5h-225.001l-112.5 112.5h-151.778l234.374 281.25h284.807l234.374-281.25h-151.778z" />
 <glyph unicode="&#xe626;" d="M362.451 188.385v380.769q0 7.572-4.868 12.44t-12.44 4.868h-34.614q-7.572 0-12.44-4.868t-4.868-12.44v-380.769q0-7.572 4.868-12.44t12.44-4.868h34.614q7.572 0 12.44 4.868t4.868 12.44zM500.913 188.385v380.769q0 7.572-4.868 12.44t-12.44 4.868h-34.615q-7.572 0-12.44-4.868t-4.868-12.44v-380.769q0-7.572 4.868-12.44t12.44-4.868h34.615q7.572 0 12.44 4.868t4.868 12.44zM639.374 188.385v380.769q0 7.572-4.868 12.44t-12.44 4.868h-34.615q-7.572 0-12.44-4.868t-4.868-12.44v-380.769q0-7.572 4.868-12.44t12.44-4.868h34.615q7.572 0 12.44 4.868t4.868 12.44zM345.143 724.923h242.307l-25.962 63.281q-3.787 4.868-9.194 5.95h-171.455q-5.408-1.082-9.194-5.95zM847.067 707.615v-34.615q0-7.572-4.868-12.44t-12.44-4.868h-51.923v-512.739q0-44.892-25.42-77.615t-61.117-32.722h-450q-35.697 0-61.117 31.641t-25.42 76.533v514.904h-51.923q-7.572 0-12.44 4.868t-4.868 12.44v34.615q0 7.572 4.868 12.44t12.44 4.868h167.126l37.861 90.325q8.112 20.012 29.207 34.074t42.728 14.063h173.077q21.635 0 42.728-14.063t29.207-34.074l37.861-90.325h167.126q7.572 0 12.44-4.868t4.868-12.44z" horiz-adv-x="933" />
+<glyph unicode="&#xe627;" d="M1024 463.238c0-282.77-229.23-512-512-512s-512 229.23-512 512c0 282.77 229.23 512 512 512s512-229.23 512-512z" />
+<glyph unicode="&#xe628;" d="M921.6 819.2h-489.165c-22.528 0-54.835-12.134-71.782-26.982l-347.955-304.435c-16.947-14.848-16.947-39.117 0-53.965l347.955-304.486c16.947-14.797 49.254-26.931 71.782-26.931h489.165c56.371 0 102.4 46.080 102.4 102.4v512c0 56.32-46.029 102.4-102.4 102.4zM777.779 256l-130.918 130.918-130.816-130.918-73.933 73.882 130.867 130.918-130.867 130.867 73.933 73.933 130.867-130.867 130.867 130.867 73.882-73.933-130.816-130.867 130.867-130.867-73.933-73.933z" />
+<glyph unicode="&#xe629;" d="M536.381-73.143c-297.448 0-536.381 238.933-536.381 536.381s238.933 536.381 536.381 536.381 536.381-238.933 536.381-536.381c0-297.448-238.933-536.381-536.381-536.381zM536.381 950.857c-268.19 0-487.619-219.429-487.619-487.619s219.429-487.619 487.619-487.619c268.19 0 487.619 219.429 487.619 487.619s-219.429 487.619-487.619 487.619z" horiz-adv-x="1073" />
 </font></defs></svg>

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-16 vm" 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>