Merge branch 'master' into i18n

1 files changed, 59 insertions, 50 deletions

diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 6c593e4e5..1aa0e9247 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -83,7 +83,7 @@ DepositEtherModal.prototype.renderRow = function ({
 
     ]),
 
-    h('div.deposit-ether-modal__buy-row__logo', [logo]),
+    h('div.deposit-ether-modal__buy-row__logo-container', [logo]),
 
       h('div.deposit-ether-modal__buy-row__description', [
 
@@ -109,17 +109,17 @@ DepositEtherModal.prototype.render = function () {
   const isTestNetwork = ['3', '4', '42'].find(n => n === network)
   const networkName = networkNames[network]
 
-  return h('div.deposit-ether-modal', {}, [
+  return h('div.page-container.page-container--full-width', {}, [
 
-    h('div.deposit-ether-modal__header', [
+    h('div.page-container__header', [
 
-      h('div.deposit-ether-modal__header__title', [t('depositEther')]),
+      h('div.page-container__title', [t('depositEther')]),
 
-      h('div.deposit-ether-modal__header__description', [
+      h'div.page-container__subtitle', [
         t('needEtherInWallet'),
       ]),
 
-      h('div.deposit-ether-modal__header__close', {
+      h('div.page-container__header-close', {
         onClick: () => {
           this.setState({ buyingWithShapeshift: false })
           this.props.hideWarning()
@@ -128,55 +128,64 @@ DepositEtherModal.prototype.render = function () {
       }),
 
     ]),
+    
+    h('.page-container__content', {}, [
+    
+      h('div.deposit-ether-modal__buy-rows', [
+
+        this.renderRow({
+          logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
+          title: DIRECT_DEPOSIT_ROW_TITLE,
+          text: DIRECT_DEPOSIT_ROW_TEXT,
+          buttonLabel: t('viewAccount'),
+          onButtonClick: () => this.goToAccountDetailsModal(),
+          hide: buyingWithShapeshift,
+        }),
 
-    h('div.deposit-ether-modal__buy-rows', [
-
-      this.renderRow({
-        logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
-        title: DIRECT_DEPOSIT_ROW_TITLE,
-        text: DIRECT_DEPOSIT_ROW_TEXT,
-        buttonLabel: t('viewAccount'),
-        onButtonClick: () => this.goToAccountDetailsModal(),
-        hide: buyingWithShapeshift,
-      }),
-
-      this.renderRow({
-        logo: h('i.fa.fa-tint.fa-2x'),
-        title: FAUCET_ROW_TITLE,
-        text: facuetRowText(networkName),
-        buttonLabel: t('getEther'),
-        onButtonClick: () => toFaucet(network),
-        hide: !isTestNetwork || buyingWithShapeshift,
-      }),
-
-      this.renderRow({
-        logo: h('img.deposit-ether-modal__buy-row__coinbase-logo', {
-          src: '../../../images/coinbase logo.png',
+        this.renderRow({
+          logo: h('i.fa.fa-tint.fa-2x'),
+          title: FAUCET_ROW_TITLE,
+          text: facuetRowText(networkName),
+          buttonLabel: t('getEther'),
+          onButtonClick: () => toFaucet(network),
+          hide: !isTestNetwork || buyingWithShapeshift,
         }),
-        title: COINBASE_ROW_TITLE,
-        text: COINBASE_ROW_TEXT,
-        buttonLabel: t('continueToCoinbase'),
-        onButtonClick: () => toCoinbase(address),
-        hide: isTestNetwork || buyingWithShapeshift,
-      }),
 
-      this.renderRow({
-        logo: h('img.deposit-ether-modal__buy-row__shapeshift-logo', {
-          src: '../../../images/shapeshift logo.png',
+        this.renderRow({
+          logo: h('div.deposit-ether-modal__logo', {
+            style: {
+              backgroundImage: 'url(\'../../../images/coinbase logo.png\')',
+              height: '40px',
+            },
+          }),
+          title: COINBASE_ROW_TITLE,
+          text: COINBASE_ROW_TEXT,
+          buttonLabel: t('continueToCoinbase'),
+          onButtonClick: () => toCoinbase(address),
+          hide: isTestNetwork || buyingWithShapeshift,
+        }),
+        
+        this.renderRow({
+          logo: h('div.deposit-ether-modal__logo', {
+            style: {
+              backgroundImage: 'url(\'../../../images/shapeshift logo.png\')',
+            },
+          }),
+          title: SHAPESHIFT_ROW_TITLE,
+          text: SHAPESHIFT_ROW_TEXT,
+          buttonLabel: t('shapeshiftBuy'),
+          onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
+          hide: isTestNetwork,
+          hideButton: buyingWithShapeshift,
+          hideTitle: buyingWithShapeshift,
+          onBackClick: () => this.setState({ buyingWithShapeshift: false }),
+          showBackButton: this.state.buyingWithShapeshift,
+          className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
         }),
-        title: SHAPESHIFT_ROW_TITLE,
-        text: SHAPESHIFT_ROW_TEXT,
-        buttonLabel: t('shapeshiftBuy'),
-        onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
-        hide: isTestNetwork,
-        hideButton: buyingWithShapeshift,
-        hideTitle: buyingWithShapeshift,
-        onBackClick: () => this.setState({ buyingWithShapeshift: false }),
-        showBackButton: this.state.buyingWithShapeshift,
-        className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
-      }),
 
-      buyingWithShapeshift && h(ShapeshiftForm),
+        buyingWithShapeshift && h(ShapeshiftForm),
+
+      ]),
 
     ]),
   ])