Merge remote-tracking branch 'origin/wallet/task/440' into wallet/task/514

# Conflicts:
#	i18n/po/template.pot
#	src/js/controllers/amount.js
#	www/css/main.css

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.scss

@@ -0,0 +1,27 @@
+.address {
+  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/card.scss

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

src/sass/components/components.scss

@@ -1 +1,11 @@
+@import "item";
+@import "ion-content";
+@import "card";
+
+@import "header";
+@import "content-frame";
+@import "address";
+@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,33 @@
+.fee-summary {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  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%);
+  }
+
+  .fee-fiat {
+    &.positive {
+      color: #70955F;
+    }
+
+    &.negative {
+      color: #C24633;
+    }
+  }
+
+  .fee-crypto {
+    color: #A7A7A7;
+  }
+}

src/sass/components/header.scss

@@ -0,0 +1,36 @@
+.header {
+  padding: 29px 12px 61px;
+  background-color: #FAB915;
+  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/views/review.scss

@@ -0,0 +1,13 @@
+#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;
+  }
+}

src/sass/views/views.scss

@@ -50,3 +50,4 @@
 @import "includes/logOptions";
 @import "includes/checkBar";
 @import "cashScan";
+@import "review";