Added content-frame, item and ion-content components, added dummy wallet interfaces

src/sass/components/components.scss

@@ -1 +1,4 @@
 @import "header";
+@import "content-frame";
+@import "item";
+@import "ion-content";

src/sass/components/content-frame.scss

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

src/sass/components/ion-content.scss

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

src/sass/components/item.scss

@@ -0,0 +1,39 @@
+/*
+* Extends Ionic v1 item
+*/
+
+.item {
+  &.item-compact {
+    padding: 11px 13px;
+  }
+  &.item-gutterless {
+    padding: 0;
+  }
+
+  .item-content {
+    &.item-content-compact {
+      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%);
+        }
+      }
+    }
+
+    .highlight {
+      color: #FAB915;
+    }
+  }
+}

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,8 @@
+#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 */
+  }
+}

src/sass/views/views.scss

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

www/css/main.css

@@ -10037,6 +10037,11 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
     .big-icon-svg.theme-circle > .bg.icon-faucet {
       background-image: url("../img/icon-faucet.svg");
       background-size: 70%; }
+    .big-icon-svg.theme-circle > .bg.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; }
   .big-icon-svg.theme-circle-services > .bg {
     border: 1px solid #191919; }
   .big-icon-svg.theme-circle-community > .bg {
@@ -15062,6 +15067,14 @@ log-options #check-bar .checkbox-icon {
 #cash-scan a {
   cursor: pointer; }
 
+#view-review {
+  background-color: #494949; }
+  #view-review slide-to-accept, #view-review slide-to-accept-success {
+    margin-bottom: constant(safe-area-inset-bottom);
+    /* iOS 11.0 */
+    margin-bottom: env(safe-area-inset-bottom);
+    /* iOS 11.2 */ }
+
 .gravatar {
   border-radius: 3px;
   display: inline-block; }
@@ -15090,6 +15103,48 @@ log-options #check-bar .checkbox-icon {
       .header .content p + p {
         margin-top: 8px; }
 
+.content-frame.negative-top {
+  margin-top: -20px; }
+  .content-frame.negative-top .card:first-child {
+    margin-top: 0; }
+
+/*
+* Extends Ionic v1 item
+*/
+.item.item-compact {
+  padding: 11px 13px; }
+
+.item.item-gutterless {
+  padding: 0; }
+
+.item .item-content.item-content-compact {
+  min-height: 69px;
+  padding: 13px 11px 13px 68px; }
+  .item .item-content.item-content-compact > img:first-child,
+  .item .item-content.item-content-compact > 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 .item-content .highlight {
+  color: #FAB915; }
+
+/*
+* Extends Ionic v1 ion-content
+*/
+ion-content.bg-neutral {
+  background-color: #F2F2F2; }
+
+ion-content.padded-bottom-cta {
+  bottom: 92px; }
+
 /* This is for rules that don't yet have a home.
  * Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/
  */

www/views/review.html

@@ -1,4 +1,4 @@
-<ion-view id="view-confirm" hide-tabs>
+<ion-view id="view-review" hide-tabs>
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>
       {{'Review'|translate}}
@@ -7,7 +7,7 @@
     </ion-nav-back-button>
   </ion-nav-bar>
 
-  <ion-content class="add-bottom-for-cta">
+  <ion-content class="padded-bottom-cta bg-neutral">
     <div class="header">
       <h1 class="title" translate>You are sending</h1>
       <div class="content" translate>
@@ -15,6 +15,46 @@
         <p>0.014 BCH</p>
       </div>
     </div>
+
+    <div class="content-frame negative-top">
+      <div class="card">
+        <div class="item item-compact">From:</div>
+        <div class="item item-gutterless item-complex item-avatar">
+          <div class="item-content item-content-compact">
+            <i class="icon big-icon-svg theme-circle theme-circle-services">
+                <div class="bg icon-wallet"
+                  ng-style="{'background-color': '#eeb640'}"
+                ></div>
+            </i>
+            <h2>Personal Wallet <span class="highlight" ng-style="{'color': '#eeb640'}">(BCH)</span></h2>
+            <p>128.67</p>
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="item item-compact">From:</div>
+        <div class="item item-gutterless item-complex item-avatar">
+          <div class="item-content item-content-compact">
+            <i class="icon big-icon-svg theme-circle theme-circle-services">
+              <div class="bg icon-wallet"
+                ng-style="{'background-color': '#535353'}"></div>
+            </i>
+            <h2>Personal Wallet <span class="highlight" ng-style="{'color': '#535353'}">(BTC)</span></h2>
+            <p>128.67</p>
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="item item-compact">To:</div>
+        <div class="item item-gutterless item-complex item-avatar">
+          <div class="item-content item-content-compact">
+            <img src="img/contact-placeholder.svg" class="bg">
+            <h2>Satoshi Nakamoto</h2>
+            <p>128.67</p>
+          </div>
+        </div>
+      </div>
+    </div>
   </ion-content>
   <click-to-accept
     ng-click="approve(tx, wallet, statusChangeHandler)"