UI for send screen container without form rows.

4 files changed, 214 insertions, 1 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index f1a671ab1..ac017da05 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -9,6 +9,7 @@ const NewKeyChainScreen = require('./new-keychain')
 // accounts
 const MainContainer = require('./main-container')
 const SendTransactionScreen = require('./send')
+const SendTransactionScreen2 = require('./send-v2.js')
 const SendTokenScreen = require('./components/send-token')
 const ConfirmTxScreen = require('./conf-tx')
 // notice
@@ -333,7 +334,15 @@ App.prototype.renderPrimary = function () {
 
     case 'sendTransaction':
       log.debug('rendering send tx screen')
-      return h(SendTransactionScreen, {key: 'send-transaction'})
+      // Below param and ternary operator used for feature toggle
+      // Remove before merged to master
+      const windowParam = window.location.search.substr(1).split('=')
+      
+      const SendComponentToRender = windowParam[0] === "ft" && windowParam[1] === "send-v2"
+        ? SendTransactionScreen2
+        : SendTransactionScreen
+
+      return h(SendComponentToRender, {key: 'send-transaction'})
 
     case 'sendToken':
       log.debug('rendering send token screen')
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index dee8157ef..72a01dc89 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -397,3 +397,143 @@
     width: 100%;
   }
 }
+
+.send-v2 {
+  &__container {
+    height: 701px;
+    width: 380px;
+    border-radius: 8px;
+    background-color: $white;
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
+    display: flex;
+    flex-flow: column nowrap;
+    z-index: 25;
+    align-items: center;
+    font-family: Roboto;
+    position: relative;
+    top: -26px;
+
+    @media screen and (max-width: $break-small) {
+      width: 100%;
+      overflow-y: auto;
+      top: 0;
+      width: 100%;
+      box-shadow: none;
+    }
+  }
+
+  &__send-eth-icon {
+    border-radius: 50%;
+    width: 48px;
+    height: 48px;
+    border: 1px solid $alto;
+    z-index: 25;
+    padding: 4px;
+    background-color: $white;
+
+    @media screen and (max-width: $break-small) {
+      position: relative;
+      top: 0;
+    }
+  }
+
+  &__send-arrow-icon {
+    color: #f28930;
+    transform: rotate(-45deg);
+    position: absolute;
+    top: -2px;
+    left: 0;
+    font-size: 1.12em;
+  }
+
+  &__arrow-background {
+    background-color: $white;
+    height: 14px;
+    width: 14px;
+    position: absolute;
+    top: 52px;
+    left: 199px;
+    border-radius: 50%;
+    z-index: 100;
+  }
+
+  &__header {
+    height: 88px;
+    width: 380px;
+    background-color: $athens-grey;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__header-tip {
+    height: 25px;
+    width: 25px;
+    background: $athens-grey;
+    position: absolute;
+    transform: rotate(45deg);
+    left: 178px;
+    top: 71px;
+  }
+
+  &__title {
+    color: $scorpion;
+    font-size: 22px;
+    line-height: 29px;
+    text-align: center;
+    margin-top: 25px;
+  }
+
+  &__copy {
+    color: $gray;
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 19px;
+    text-align: center;
+    margin-top: 10px;
+    width: 287px;
+  }
+
+  &__footer {
+    height: 92px;
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    border-top: 1px solid $alto;
+    position: absolute;
+    bottom: 0;
+  }
+
+  &__next-btn,
+  &__cancel-btn {
+    width: 163px;
+    text-align: center;
+    height: 55px;
+    width: 163px;
+    border-radius: 2px;
+    background-color: $white;
+    font-family: Roboto;
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 21px;
+    text-align: center;
+    border: 1px solid;
+  }
+
+  &__next-btn__disabled {
+    opacity: .5;
+    cursor: auto;
+  }
+
+  &__next-btn {
+    color: $curious-blue;
+    border-color: $curious-blue;
+  }
+
+  &__cancel-btn {
+    color: $dusty-gray;
+    border-color: $dusty-gray;
+  }
+}
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 103a7ffe0..b0ef86075 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -7,6 +7,7 @@ $white: #fff;
 $black: #000;
 $orange: #ffa500;
 $red: #f00;
+$gray: #808080;
 
 /*
   Colors
@@ -39,6 +40,8 @@ $blue-lagoon: #038789;
 $purple: #690496;
 $tulip-tree: #ebb33f;
 $malibu-blue: #7ac9fd;
+$athens-grey: #e9edf0;
+$jaffa: #f28930;
 
 /*
   Z-Indicies
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
new file mode 100644
index 000000000..f423b90ff
--- /dev/null
+++ b/ui/app/send-v2.js
@@ -0,0 +1,61 @@
+const { inherits } = require('util')
+const PersistentForm = require('../lib/persistent-form')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const Identicon = require('./components/identicon')
+
+module.exports = connect(mapStateToProps)(SendTransactionScreen)
+
+function mapStateToProps (state) {
+  return {}
+}
+
+inherits(SendTransactionScreen, PersistentForm)
+function SendTransactionScreen () {
+  PersistentForm.call(this)
+
+  this.state = {
+    newTx: {
+      from: '',
+      to: '',
+      amountToSend: '0x0',
+      gasPrice: null,
+      gas: null,
+      amount: '0x0', 
+      txData: null,
+      memo: '',
+    },
+  }
+}
+
+SendTransactionScreen.prototype.render = function () {
+  return (
+
+    h('div.send-v2__container', [
+      h('div.send-v2__header', {}, [
+
+        h('img.send-v2__send-eth-icon', { src: '../images/eth_logo.svg' }),
+
+        h('div.send-v2__arrow-background', [
+          h('i.fa.fa-lg.fa-arrow-circle-right.send-v2__send-arrow-icon'),
+        ]),
+
+        h('div.send-v2__header-tip'),
+
+      ]),
+
+      h('div.send-v2__title', 'Send Funds'),
+
+      h('div.send-v2__copy', 'Only send ETH to an Ethereum address.'),
+
+      h('div.send-v2__copy', 'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'),
+
+      // Buttons underneath card
+      h('div.send-v2__footer', [
+        h('button.send-v2__cancel-btn', {}, 'Cancel'),
+        h('button.send-v2__next-btn', {}, 'Next'),
+      ]),
+    ])
+
+  )
+}