Merge branch 'ref/design' of https://github.com/bitpay/bitpay-wallet into feature/address_book

src/sass/common.scss

@@ -4,6 +4,18 @@
   @extend .ion-ios-arrow-right;
 }
 
+.icon.nav-item-arrow-down {
+  color: #666;
+  font-size: 26px;
+  @extend .ion-ios-arrow-down;
+}
+
+.icon.nav-item-arrow-up {
+  color: #666;
+  font-size: 26px;
+  @extend .ion-ios-arrow-up;
+}
+
 .item.item-heading {
   font-weight: bold;
 }
@@ -45,6 +57,11 @@
     }
   }
 }
+
+.white-bg{
+  background: #fff;
+}
+
 .overlay {
   position: absolute;
   top:0;

src/sass/main.scss

@@ -594,6 +594,10 @@ ul.wallet-selection.wallets {
   margin-right: 40px;
 }
 
+.m55r {
+  margin-right: 55px;
+}
+
 .m25r {
   margin-right: 25px;
 }
@@ -992,6 +996,7 @@ input[type=number] {
 @import "views/tab-send";
 @import "views/tab-settings";
 @import "views/walletDetails";
+@import "views/advancedSettings";
 @import "views/bitpayCard";
 @import "views/address-book";
 @import "views/wallet-backup-phrase";

src/sass/views/address-book.scss

@@ -20,8 +20,6 @@
     .item {
       color: #444;
       border-top: none;
-      padding-top: 1.5rem;
-      padding-bottom: 1.5rem;
       &:before {
         display: block;
         position: absolute;

src/sass/views/advancedSettings.scss

@@ -0,0 +1,53 @@
+.settings {
+  .item {
+    color: #444;
+    border-color: rgba(221, 221, 221, 0.3);
+  }
+}
+
+#advanced-settings {
+  .list {
+    .item {
+      color: #444;
+      border-top: none;
+      padding-top: 1.5rem;
+      padding-bottom: 1.5rem;
+      &:before {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        background: rgba(221, 221, 221, 0.3);
+        top: 0;
+        right: 0;
+        content: '';
+      }
+      &.item-divider {
+        color: rgba(74, 74, 74, .8);
+      }
+      &.item-heading {
+        &:before {
+          top: 99%
+        }
+      }
+      &:nth-child(2) {
+        &:before {
+          width: 0;
+        }
+      }
+      .item-note {
+        color: rgb(58, 58, 58);
+      }
+    }
+    .comment {
+      padding: 15px;
+      background-color: #fff;
+      color: rgba(74, 74, 74, 0.8);
+    }
+    .divider-comment {
+      padding: 15px;
+      color: rgba(74, 74, 74, 0.8);
+      font-size: 15px;
+    }
+  }
+}

src/sass/views/backup-warning.scss

@@ -1,4 +1,4 @@
-#onboarding-backup-warning{
+#backup-warning{
   .warning{
     margin:4rem auto 1rem;
     height: 11rem;
@@ -21,7 +21,7 @@
 }
 
 @media (max-width: 400px){
-  #onboarding-backup-warning{
+  #backup-warning{
     .warning{
       margin: 2rem auto 1rem;
       height: 8rem;
@@ -45,10 +45,10 @@
   }
 }
 @media (max-height: 540px){
-  #onboarding-backup-warning{
+  #backup-warning{
     .cta-buttons{
       float:left;
       position: relative;
     }
   }
-}
+}

src/sass/views/confirm.scss

@@ -9,7 +9,7 @@
   }
   .accept-slide {
      position: fixed;
-     bottom: 49px;
+     bottom: 0;
      width: 100%;
      height: 100px;
      background-color: #647CE8;

src/sass/views/includes/modals/modals.scss

@@ -9,7 +9,12 @@
   transform: translate(-50%, -50%);
   border-radius: .25rem;
   &-header {
-    background: rgb(1, 209, 162);
+    &-success {
+      background: rgb(1, 209, 162);
+    }
+    &-warning {
+      background: orange;
+    }
     padding: 1rem;
     border-radius: .25rem .25rem 0 0;
     min-height: 120px;
@@ -26,6 +31,12 @@
       background-size: contain;
       margin-top: .3rem;
     }
+    &-img-warning {
+      background-image: url('../img/onboarding-success.svg');
+      height: 6rem;
+      background-size: contain;
+      margin-top: .3rem;
+    }
   }
   &-content {
     padding: .5rem .8rem;
@@ -42,11 +53,16 @@
       font-weight: 200;
     }
   }
-  &-content-success{
+  &-content-success {
     button{
       color:rgb(23, 174, 140) !important;
     }
   }
+  &-content-warning {
+    button{
+      color: orange !important;
+    }
+  }
 }
 
 .modal-backdrop.active {

src/sass/views/includes/modals/screenshot-warning-model.scss

@@ -1,7 +1,7 @@
 #screenshot-warning-modal{
   .popup-modal-header{
     &-img{
-      background-image: url('../img/onboarding-no-screenshot.svg');
+      background-image: url('../img/no-screenshot.svg');
     }
   }
-}
+}

src/sass/views/includes/txp-details.scss

@@ -3,7 +3,7 @@
     bottom: 100px;
   }
   .head {
-    padding-bottom: 55px;
+    padding-bottom: 30px;
     .sending-label{
       line-height: 70px;
       font-size: 25px;

src/sass/views/includes/wallets.scss

@@ -9,6 +9,7 @@
       padding-left:.25rem;
       padding-right:.25rem;
       border-radius: .25rem;
+      max-width: 350px;
     }
     .swiper-slide{
       width:100% !important;

src/sass/views/notifications.scss

@@ -0,0 +1,43 @@
+.settings {
+  .item {
+    color: #444;
+    border-color: rgba(221, 221, 221, 0.3);
+  }
+}
+
+#tab-notifications {
+  .list {
+    .item {
+      color: #444;
+      border-top: none;
+      padding-top: 1.5rem;
+      padding-bottom: 1.5rem;
+      &:before {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        background: rgba(221, 221, 221, 0.3);
+        top: 0;
+        right: 0;
+        content: '';
+      }
+      &.item-divider {
+        color: rgba(74, 74, 74, .8);
+      }
+      &.item-heading {
+        &:before {
+          top: 99%
+        }
+      }
+      &:nth-child(2) {
+        &:before {
+          width: 0;
+        }
+      }
+      .item-note {
+        color: rgb(58, 58, 58);
+      }
+    }
+  }
+}

src/sass/views/onboarding/onboard-backup-request.scss

@@ -15,9 +15,14 @@
     position: absolute;
     bottom: 0;
   }
+  @media (min-width: 415px){
+    .warning{
+      height:16rem;
+    }
+  }
 }
 
-@media (max-width: 400px){
+@media (max-width: 399px){
   #onboarding-backup-request{
     .warning{
       margin: 2rem auto 1rem;
@@ -52,7 +57,7 @@
 @media (min-height: 980px){
   #onboarding-backup-request{
     #arrow-down{
-      margin-top: 15rem;
+      margin-top: 7rem;
     }
   }
 }

src/sass/views/onboarding/onboard-collect-email.scss

@@ -80,6 +80,19 @@
             font-size:.8rem;
           }
         }
+        @media (min-width: 415px){
+          &{
+            max-width: 400px;
+            label{
+              .checkbox{
+                left:1rem;
+              }
+              .item-content{
+                font-size: 1rem;
+              }
+            }
+          }
+        }
       }
     }
   }

src/sass/views/onboarding/onboard-disclaimer.scss

@@ -10,6 +10,10 @@
       margin-top:1.5rem;
     }
   }
+  .list{
+    max-width: 600px;
+    @include center-block();
+  }
   .item {
     background: transparent;
     border: none;
@@ -42,6 +46,7 @@
     .item-content {
       width: 90%;
       margin-left: 6%;
+      white-space: normal;
     }
   }
   .item-checkbox .checkbox {
@@ -54,6 +59,10 @@
     position: absolute;
     bottom: 0;
     width: 100%;
+    &-content{
+      max-width: 600px;
+      @include center-block();
+    }
     .item{
       color:rgb(58,58,58);
       padding-bottom: 2.5rem;

src/sass/views/onboarding/onboard-push-notifications.scss

@@ -1,40 +1,49 @@
-#onboarding-push-notifications{
-  h2{
-    margin-top:2rem;
+#onboarding-push-notifications {
+  h2 {
+    margin-top: 2rem;
   }
-  #cta{
+  #cta {
     background-image: url('../img/onboarding-push-notifications.svg');
     height: 15rem;
     margin-top: .75rem;
   }
-  .cta-buttons{
-    float:none;
-    bottom:0;
+  .cta-buttons {
+    float: none;
+    bottom: 0;
     position: absolute;
-    width:100%;
-    button{
+    width: 100%;
+    button {
       max-width: 400px;
     }
   }
 }
 
-@media (max-width: 400px){
-  #onboarding-push-notifications{
-    .cta-buttons{
-      float:none;
-      bottom:0;
+@media (max-width: 400px) {
+  #onboarding-push-notifications {
+    .cta-buttons {
+      float: none;
+      bottom: 0;
       position: absolute;
     }
   }
 }
-@media (max-height: 540px){
-  #onboarding-push-notifications{
-    #cta{
+
+@media (max-height: 540px) {
+  #onboarding-push-notifications {
+    #cta {
       margin-bottom: 0;
     }
-    .cta-buttons{
-      float:left;
+    .cta-buttons {
+      float: left;
       position: relative;
     }
   }
-}
+}
+
+@media (min-width: 450px) {
+  #onboarding-push-notifications {
+    #cta {
+      height: 26rem;
+    }
+  }
+}

src/sass/views/onboarding/onboarding.scss

@@ -87,17 +87,21 @@
   }
 }
 
-@media (min-width: 400px){
+@media (min-width: 415px){
   .onboarding{
     ion-content{
       h2{
-        font-size: 1.2rem;
+        font-size: 2rem;
+      }
+      p{
+        font-size: 1.4rem;
+        line-height: 1.9rem;
       }
       p,h2,h3{
         max-width: 600px !important;
       }
       button{
-        max-width: 400px !important; 
+        max-width: 400px !important;
       }
     }
   }
@@ -108,6 +112,6 @@
 @import "onboard-tour";
 @import "onboard-collect-email";
 @import "onboard-backup-request";
-@import "onboard-backup-warning";
+@import "../backup-warning";
 @import "onboard-disclaimer";
 @import "onboard-push-notifications";

src/sass/views/tab-home.scss

@@ -26,14 +26,24 @@
         top:0;
         right:0;
         content:'';
+        @media (min-width: 450px){
+          &{
+            width:90%;
+          }
+        }
       }
       &.item-heading{
         &:before{
-          width:100%;
+          width:100% !important;
           top:99%
         }
       }
-      &:nth-child(2){
+      &:nth-child(1){
+        &:before{
+          width:0;
+        }
+      }
+      &:nth-child(2):last-child{
         &:before{
           width:0;
         }

src/sass/views/tab-receive.scss

@@ -9,6 +9,20 @@
   }
   #address {
     background: #fff;
+    .incomplete {
+      padding: 50px;
+      .title {
+        padding: 20px;
+        font-size: 25px;
+        color: #444;
+      }
+      .subtitle {
+        padding: 20px;
+        color: #444;
+      }
+      .button {
+      }
+    }
     .item {
       border: none;
       font-size: .8rem;
@@ -29,6 +43,16 @@
       }
       &-gen-address {}
     }
+    .qr {
+      padding: 30px;
+    }
+    .backup {
+      background-color: orange;
+      color: #fff;
+      i {
+        padding: 10px;
+      }
+    }
   }
   #wallets {
     position: relative;

src/sass/views/tab-send.scss

@@ -16,4 +16,11 @@
     position: absolute;
     top: 10px;
   }
+  .show-more {
+    text-align: center;
+    padding: 20px;
+    font-size: 16px;
+    color: #387ef5;
+    font-weight: bold;
+  }
 }

src/sass/views/wallet-backup-phrase.scss

@@ -84,7 +84,7 @@
       }
     }
 
-    @media (min-width : 320px) and (max-width : 340px) and (orientation : portrait), (min-width : 650px) and (max-width : 770px) and (orientation : portrait){
+    @media (min-width : 320px) and (max-width : 415px) and (orientation : portrait), (min-width : 650px) and (max-width : 770px) and (orientation : portrait){
       #wallet-backup-phrase{
         .cta-buttons,#select-phrase{
           bottom: 64px;