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) {