Merge.

src/sass/components/action-minor.scss

@@ -0,0 +1,24 @@
+.action-minor {
+  margin: 20px 14px;
+  font-size: 14px;
+
+  &.mt-negative {
+    margin-top: 0;
+  }
+
+  &.text-right {
+    text-align: right;
+  }
+
+  > .action-icon {
+    width: 15px;
+    height: 15px;
+    vertical-align: middle;
+    margin-right: 3px;
+  }
+
+  > .action-text {
+    vertical-align: middle;
+    color: #444444;
+  }
+}

src/sass/components/address-frame.scss

@@ -0,0 +1,27 @@
+.address-frame {
+  background-color: #F8F8F8;
+  border: 0.5px solid #EDEBEB;
+  border-radius: 3px;
+  padding: 9px;
+  text-align: center;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &.expanded {
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+
+  .prefix {
+    color: #000000;
+  }
+
+  .mid {
+    color: #919191;
+  }
+
+  .suffix {
+    color: #000000;
+  }
+}

src/sass/components/amount.scss

@@ -0,0 +1,35 @@
+.amount {
+  .start,
+  .middle,
+  .end,
+  .currency {
+    display: inline-block;
+  }
+
+  .start {
+    font-size: 1em;
+  }
+
+  .middle {
+    font-size: 0.7857em;
+    margin-left: 5px;
+  }
+
+  .end {
+    font-size: 0.7857em;
+    margin-left: 5px;
+  }
+
+  &.size-equal {
+    .middle,
+    .end {
+      font-size: 1em;
+    }
+  }
+
+  .currency {
+    font-size: 1em;
+    margin-left: 5px;
+    text-transform: uppercase;
+  }
+}

src/sass/components/card.scss

@@ -0,0 +1,5 @@
+.card {
+  &.card-gutter-compact {
+    margin: 10px 12px;
+  }
+}

src/sass/components/components.scss

@@ -0,0 +1,11 @@
+@import "item";
+@import "ion-content";
+@import "card";
+
+@import "header";
+@import "content-frame";
+@import "address-frame";
+@import "action-minor";
+@import "expand-content";
+@import "fee-summary";
+@import "amount.scss";

src/sass/components/content-frame.scss

@@ -0,0 +1,11 @@
+.content-frame {
+  &.negative-top {
+    margin-top: -40px;
+
+    .card {
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}

src/sass/components/expand-content.scss

@@ -0,0 +1,26 @@
+.expand-content-frame {
+  position: relative;
+
+  .expand-content-trigger {
+    position: absolute;
+    top: 0;
+    transition: opacity 0.3s ease;
+    right: 0;
+
+    &.expand-content-revealed {
+      opacity: 0;
+    }
+  }
+
+  .expand-content {
+    opacity: 0;
+    transform-origin: 100% 0%;
+    transform: scale(0,0);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+
+    &.expand-content-revealed {
+      opacity: 1;
+      transform: scale(1,1);
+    }
+  }
+}

src/sass/components/fee-summary.scss

@@ -0,0 +1,40 @@
+.fee-summary {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 5px 12px 15px;
+  box-sizing: border-box;
+  background-color: #F2F2F2;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: -15px;
+    width: 100%;
+    height: 15px;
+    background: linear-gradient(to bottom, rgba(242,242,242,0) 0%,rgba(242,242,242,1) 100%);
+  }
+
+  .amount {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+
+    .fee-fiat {
+      &.positive {
+        color: #70955F;
+      }
+
+      &.negative {
+        color: #C24633;
+      }
+    }
+
+    .fee-crypto {
+      color: #A7A7A7;
+    }
+  }
+}

src/sass/components/header.scss

@@ -0,0 +1,39 @@
+.header {
+  padding: 29px 12px 61px;
+  background-color: $v-bitcoin-orange;
+  &.btc {
+    background-color: $v-bitcoin-core;
+  }
+  color: #FFFFFF;
+
+  .title {
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1em;
+    color: #FFFFFF;
+    text-align: center;
+
+    + .content {
+      margin-top: 23px;
+    }
+  }
+
+  .content {
+    text-align: center;
+
+    p {
+      margin: 0;
+      line-height: 1em;
+      font-size: 18px;
+
+      &.large {
+        font-size: 29px;
+        font-weight: 600;
+      }
+
+      + p {
+        margin-top: 8px;
+      }
+    }
+  }
+}

src/sass/components/ion-content.scss

@@ -0,0 +1,17 @@
+/*
+* Extends Ionic v1 ion-content
+*/
+
+ion-content {
+  &.bg-neutral {
+    background-color: #F2F2F2;
+  }
+
+  &.padded-bottom-cta {
+    bottom: 92px;
+  }
+
+  &.padded-bottom-cta-with-summary {
+    bottom: 134px;
+  }
+}

src/sass/components/item.scss

@@ -0,0 +1,48 @@
+/*
+* Extends Ionic v1 item
+*/
+
+.item {
+  &.item-compact {
+    padding: 11px 13px;
+  }
+  &.item-gutterless {
+    padding: 0;
+  }
+
+  .item-content {
+    &.item-content-avatar {
+      min-height: 69px;
+      padding: 13px 11px 13px 68px;
+
+      > img,
+      > i {
+        &:first-child {
+          position: absolute;
+          max-width: 40px;
+          max-height: 40px;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+          left: 13px;
+          top: 50%;
+          padding: 0;
+          transform: translate(0,-50%);
+        }
+      }
+    }
+
+    &.item-content-compact {
+      min-height: 0;
+      padding: 13px 11px;
+    }
+
+    .highlight {
+      color: #FAB915
+    }
+
+    + .item-content {
+      padding-top: 0;
+    }
+  }
+}

src/sass/directives/directives.scss

@@ -1 +1,2 @@
 @import "gravatar";
+@import "elastic";

src/sass/directives/elastic.scss

@@ -0,0 +1,4 @@
+.elastic {
+  width: 100%;
+  font-size: 14px;
+}

src/sass/icons.scss

@@ -88,6 +88,13 @@
         background-image: url('../img/icon-faucet.svg');
         background-size: 70%;
       }
+
+      &.icon-wallet {
+        background-color: #FAB915;
+        background-image: url('../img/icon-wallet.svg');
+        border: none;
+        box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset;
+      }
     }
   }
 

src/sass/main.scss

@@ -9,4 +9,5 @@
 @import "mixins/mixins";
 @import "views/views";
 @import "directives/directives";
+@import "components/components";
 @import "shame";

src/sass/mixins/layout.scss

@@ -18,3 +18,53 @@
 .absolute-center{
   @include absolute-center();
 }
+
+.third-party-notice {
+  font-size: 12px;
+  margin: 0px 14px;
+  font-weight: 600;
+  color: #6F6F70;
+
+  @media (min-width: 768px) {
+    text-align: center;
+  }
+}
+
+@mixin empty-case() {
+  padding-top: 5vh;
+  text-align: center;
+  .item {
+    border-style: none;
+  }
+  & > .title {
+    font-size: 20px;
+    color: $v-dark-gray;
+    margin: 20px 10px;
+  }
+  & > .subtitle {
+    font-size: 1rem;
+    line-height: 1.5em;
+    font-weight: 300;
+    color: #6F6F70;
+    margin: 20px 1em 2.5em;
+  }
+  .big-icon-svg {
+    .bg.green {
+      padding: 0 10px;
+      box-shadow: none;
+    }
+  }
+  .buttons {
+    margin-top: 18px;
+    .button {
+      font-weight: bold;
+      font-size: 19px;
+    }
+  }
+  .button-first-contact img {
+    height: 19px;
+    width: 19px;
+    margin-right: 6px;
+    vertical-align: sub;
+  }
+}

src/sass/qr.scss

@@ -5,8 +5,8 @@ qrcode {
       content: "";
       background-size: 100% 100%;
       display: block;
-      left: 88px;
-      margin-top: 88px;
+      left: calc(50% - 22px);
+      margin-top: calc(50% - 22px);
       width: 44px;
       height: 44px;
       position:absolute;

src/sass/variables.scss

@@ -8,7 +8,9 @@ $v-font-family-light:                                "Roboto-Light", sans-serif-
 
 /* Colors */
 $v-bitcoin-orange:                                   #fab915 !default;
+$v-bitcoin-core:                                     #535353 !default;
 
+$v-off-black:                                        #262424;
 $v-dark-gray:                                        #445 !default;
 $v-mid-gray:                                         #667 !default;
 $v-light-gray:                                       #9b9bab !default;
@@ -24,8 +26,11 @@ $v-text-accent-color:                                #647ce8 !default;
 
 $v-success-color:                                    #13e5b6 !default;
 $v-warning-color:                                    #ffa500 !default;
+$v-warning-color-2:                                  #b7664d;
 $v-error-color:                                      #ef473a !default;
 
+$v-background-under-card:                            #f2f2f2;
+
 $v-wallet-color-map: (
    0: (color: #dd4b39, name: 'Cinnabar'),
    1: (color: #f38f12, name: 'Carrot Orange'),
@@ -77,6 +82,7 @@ $v-button-primary-active-bg:                         darken($v-accent-color, 10%
 $v-button-primary-active-border:                     transparent !default;
 $v-button-primary-clear-bg:                          none !default;
 $v-button-primary-clear-color:                       $v-accent-color !default;
+$v-button-primary-disabled-bg:                       $v-mid-gray;
 $v-button-primary-outline-bg:                        transparent !default;
 $v-button-primary-outline-border:                    $v-accent-color !default;
 $v-button-primary-outline-color:                     $v-accent-color !default;

src/sass/views/amount.scss

@@ -244,6 +244,21 @@
       flex-direction: column;
       justify-content: center;
 
+      .send-amount-header-footer {
+        flex: 1 1 auto;
+        min-height: 20px;
+
+        .warning {
+          font-weight: bold;
+          font-size: 12px;
+          padding: 0 6px 6px 6px;
+          text-align: center;
+        }
+        &__max {
+          float: right;
+        }
+      }
+
       .send-amount-tool {
         flex: 0 1 auto;
 
@@ -260,6 +275,8 @@
           }
 
           .primary-amount {
+            color: #333;
+            font-weight: bold;
             input, .unit, .primary-amount-display {
               font-size: 1.8em;
 
@@ -329,16 +346,15 @@
               line-height: 1em;
             }
 
-            .unit {
-              font-weight: bold;
-            }
-
             .primary-amount-display {
               margin-right: 5px;
               word-break: break-all;
             }
           }
 
+          .alternative-amount {
+            color: #6F6F70;
+          }
           .switch-currencies {
             position: absolute;
             right: 0;
@@ -351,27 +367,56 @@
             }
           }
         }
+      }
+    }
 
-        .send-amount-actions {
-          margin-top: 15px;
+    .send-amount-extras {
+      display: flex;
+      flex: 0 0 auto;
+      /* So that if only one item is present, it appears on the right. */
+      flex-direction: row-reverse;
+      font-size: 12px;
+      align-items: center;
+      justify-content: space-between;
+      margin: 0 14px;
+
+      .available-funds {
+        color: #6F6F70;
+      }
+
+      .warning {
+        color: $v-warning-color-2;
+      }
+
+      .extra,
+      button.extra {
+        /*display: flex;*/
+        flex: 0 1 auto;
+      }
+
+      button.extra {
+        background: none; 
+        border: none;
+        color: #000;
+        font-family: 'ProximaNova';
+        font-size: 14px;
+        line-height: normal;
+        min-height: auto;
+        min-width: auto;
+        padding: 0;
+      }
+
+      .button .icon:before {
+        font-size: 14px;
+        line-height: normal;
+      }
+      
+
+      .button {
+        span {
           display: flex;
           align-items: center;
           justify-content: center;
-
-          .button {
-            flex: 1 1 auto;
-            line-height: 1.2em;
-
-            + .button {
-              margin-left: 10px;
-            }
-
-            span {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-            }
-          }
         }
       }
     }
@@ -394,37 +439,58 @@
 
     .keypad-container {
       position: relative;
+      font-size: 18px;
+      line-height: 2em;
       //flex: 0 1 196px;
 
+      @media (min-height: 667px) {
+        font-size: 24px;
+      }
+
+      @media(max-height: 480px) {
+        font-size: 12px;
+      }
+
       @media (min-height: 667px) {
         //flex: 0 1 224px;
       }
 
+      .sendmax {
+        background: $v-off-black;
+
+        .button {
+          color: white;
+          background: black;
+          border: 1px solid $v-off-black;
+          border-radius: 0;
+          font-size: 0.8em;
+          line-height: 2em;
+          width: 100%;
+
+          .available-funds-amount {
+            color: #C9C9C9;
+          }
+
+          &:active {
+            background-color: $v-dark-gray;
+          }
+        }
+      }
+
       .keypad {
         text-align: center;
-        font-size: 18px;
         font-weight: lighter;
         position: absolute;
         bottom: 0;
         width: 100%;
-        color: $v-mid-gray;
+        color: $v-text-primary-color;
+        
         
-        @media (min-height: 667px) {
-          font-size: 24px;
-        }
     
         .row {
           padding: 0 !important;
           margin: 0 !important;
         }
-    
-        .col {
-          line-height: 38px;
-        
-          @media (min-height: 667px) {
-            line-height: 45px;
-          }
-        }
 
         .row {
           &:last-child {
@@ -458,23 +524,34 @@
     
         .digit{
           cursor: pointer;
-          border-top: 1px solid $v-subtle-gray;
-          border-left: 1px solid $v-subtle-gray;
+          background-color: #000;
+          border: 1px solid $v-off-black;
           transition: all 0.1s ease;
 
           &:active {
-            background-color: $v-subtle-gray;
+            background-color: $v-dark-gray;
           }
         }
     
-        @media(max-height: 480px) {
-          font-size: 12px;
-    
-        }
       }
     }
+
+    .button-primary {
+      background-color: $v-primary-color;
+      border-radius: 0;
+      font-weight: bold;
+    }
+
+    .button-primary[disabled] {
+      background-color: $v-button-primary-disabled-bg;
+      opacity: 1;
+    }
   }
-  background: #494949;
+
+  .warning {
+    color: $v-warning-color-2;
+  }
+  background: $v-background-under-card;
 
   ion-content {
     margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */

src/sass/views/custom-amount.scss

@@ -26,16 +26,10 @@
     height: 100%;
     .qr-code {
       text-align: center;
-      margin-top: 24vh;
-      margin-bottom: 7vh;
-      @media(max-height: 800px) {
-        margin-top: 18vh;
-      }
-      @media(max-height: 700px) {
-        margin-top: 14vh;
-      }
-      @media(max-height: 600px) {
-        margin-top: 8vh;
+      margin-top: 6px;
+      qrcode canvas {
+        height: 30vh;
+        max-height: 220px;
       }
     }
     .info {
@@ -91,5 +85,34 @@
     .address-types {
       text-align: center;
     }
+
+    .amount {
+      margin-top: 20vh;
+      margin-bottom: 4vh;
+      @media(max-height: 800px) {
+        margin-top: 12vh;
+        margin-bottom: 6vh;
+      }
+      @media(max-height: 700px) {
+        margin-top: 10vh;
+        margin-bottom: 4vh;
+      }
+      @media(max-height: 600px) {
+        margin-top: 6vh;
+        margin-bottom: 2vh;
+
+      }
+      width: 100%;
+      text-align: center;
+      //padding-top: 30px;
+      display: block;
+      align-items: center;
+      justify-content: center;
+
+      &-alternative {
+        line-height: 36px;
+      }
+    }
+
   }
 }

src/sass/views/includes/slideToAcceptSuccess.scss

@@ -12,12 +12,6 @@ slide-to-accept-success {
 
   .slide-success {
     $duration: 400ms;
-    &__windows-background {
-      background: $v-success-bg-color;
-      height: 100%;
-      width: 100%;
-      position: fixed;
-    }
     &__background {
       $start-radius: 5;
       $scale-factor: 20;
@@ -40,9 +34,11 @@ slide-to-accept-success {
     &__content {
       position: relative;
       z-index: 1;
-      margin-top: -20vh;
+      margin-top: -10vh;
 
       > img {
+        width: 45vw;
+        max-width: 166px;
         margin-bottom: 1.8rem;
         -webkit-transform: translateY(5rem);
         transform: translateY(5rem);
@@ -59,7 +55,7 @@ slide-to-accept-success {
 
       &__header {
         color: #FFFFFF;
-        font-size: 26px;
+        font-size: 29px;
         -webkit-transform: translateY(5rem);
         transform: translateY(5rem);
         opacity: 0;
@@ -72,6 +68,26 @@ slide-to-accept-success {
           opacity: 1;
         }
       }
+      &__share {
+        transition: transform $duration ease, opacity $duration ease;
+        transition-delay: 600ms;
+        opacity: 0;
+        margin-top: 15vh;
+        span {
+          color: #FFF;
+          font-size: 22px;
+          height: 28px;
+        }
+        img {
+          height: 28px;
+          width: auto;
+          vertical-align: bottom;
+          margin-right: 4px;
+        }
+        &.reveal {
+          opacity: 0.79;
+        }
+      }
     }
 
     &__footer {
@@ -98,11 +114,11 @@ slide-to-accept-success {
       &__btn {
         display: block;
         color: #FFFFFF;
-        font-size: 18px;
+        font-size: 22px;
         font-weight: 600;
         letter-spacing: 2.86px;
-        padding: 1rem 0 1.1rem;
-        border-top: 1px solid rgba(255, 255, 255, .45);
+        padding: 2rem 0 2.1rem;
+        border-top: 1px solid rgba(255, 255, 255, 0.25);
         cursor: pointer;
       }
     }

src/sass/views/review.scss

@@ -0,0 +1,21 @@
+#view-review {
+  background-color: #494949;
+
+  slide-to-accept, slide-to-accept-success {
+    margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
+    margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
+  }
+
+  .fee-summary {
+    position: absolute;
+    bottom: 92px;
+  }
+
+  .shapeshift-banner, .bitpay-banner, .egifter-banner {
+    box-shadow: none;
+  }
+
+  .warning {
+    color: $v-warning-color-2;
+  }
+}

src/sass/views/shapeshift.scss

@@ -0,0 +1,23 @@
+#shapeshift {
+  .swap-image {
+    width: auto;
+    max-width: 400px;
+    max-height: 25vh;
+  }
+  .empty-case {
+    @include empty-case();
+  }
+  .button-shapeshift {
+    @extend %button-standard;
+
+    @include button-style(#243F5D, #FFF, #606060, #FFF, #FFF);
+    @include button-clear(#FFF);
+    @include button-outline(#C1C1C1);
+    border: 0px;
+    @include button-shadow();
+  }
+}
+.header.shapeshift {
+  background: url(../img/shapeshiftbg.jpg) center center repeat #28394d;
+  opacity: 0.99;
+}

src/sass/views/tab-send.scss

@@ -88,6 +88,8 @@
             &.contains-address {
               .address {
                 display: inline;
+                border: none;
+                background-color: transparent;
               }
               .non-address {
                 display: none;
@@ -133,42 +135,7 @@
     padding-left: 30px;
   }
   .sendTip {
-    padding-top: 5vh;
-    text-align: center;
-    .item {
-      border-style: none;
-    }
-    & > .title {
-      font-size: 20px;
-      color: $v-dark-gray;
-      margin: 20px 10px;
-    }
-    & > .subtitle {
-      font-size: 1rem;
-      line-height: 1.5em;
-      font-weight: 300;
-      color: #6F6F70;
-      margin: 20px 1em 2.5em;
-    }
-    .big-icon-svg {
-      .bg.green {
-        padding: 0 10px;
-        box-shadow: none;
-      }
-    }
-    .buttons {
-      margin-top: 18px;
-      .button {
-        font-weight: bold;
-        font-size: 19px;
-      }
-    }
-    .button-first-contact img {
-      height: 19px;
-      width: 19px;
-      margin-right: 6px;
-      vertical-align: sub;
-    }
+    @include empty-case();
   }
   .item-heading {
     line-height: 16px;

src/sass/views/views.scss

@@ -8,11 +8,13 @@
 @import "tab-receive";
 @import "tab-scan";
 @import "tab-send";
+@import "wallet-origin-destination";
 @import "tab-settings";
 @import "wallet-colors";
 @import "walletBalance";
 @import "walletDetails";
 @import "advancedSettings";
+@import "shapeshift";
 @import "bitpayCard";
 @import "bitpayCardIntro";
 @import "buyandsell";
@@ -48,3 +50,4 @@
 @import "includes/logOptions";
 @import "includes/checkBar";
 @import "cashScan";
+@import "review";

src/sass/views/wallet-origin-destination.scss

@@ -0,0 +1,74 @@
+#wallet-origin-destination {
+  .header--request {
+    padding: 30px 24px;
+    width: 100%;
+    height: 139px;
+    background-color: #fff;
+    &__title {
+      width: 46px;
+      height: 20px;
+      font-size: 16px;
+      font-weight: 600;
+      letter-spacing: -0.4px;
+      color: #000000;
+    }
+    &__amount {
+      font-size: 29px;
+      font-weight: 600;
+      letter-spacing: -0.7px;
+      color: #000000;
+      margin: 11px 0 2px;
+    }
+    &__amount-alt {
+      opacity: 0.45;
+      font-size: 16px;
+      font-weight: 600;
+      letter-spacing: -0.4px;
+      color: #000000;
+    }
+  }
+  .wallets-header {
+    margin: 20px 14px 0px;
+
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      color: $v-dark-gray;
+      margin-bottom: -12px;
+    }
+  }
+  .card {
+    font-size: 12px;
+    margin: 20px 14px 0px;
+
+    .item-heading {
+      .subtitle {
+        font-size: 12px;
+      }
+      font-weight: 600;
+
+    }
+
+    &-insufficient {
+      .wallet {
+        opacity: 0.4;
+
+      }
+      .item-heading {
+        font-size: 12px;
+        >div {
+          display: inline-block;
+          vertical-align: text-bottom;
+        }
+      }
+      &__dot {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background-color: #ec5959;
+        border-radius: 8px;
+        margin: 2px 6px 2px 2px;
+      }
+    }
+  }
+}