Update Connect Request screen design (#5644)

* Parameterize NetworkDisplay background colour

* Update design for login request screen

* Pass siteTitle, siteImage through for calls to ethereum.enable()

* Bring the site images closer together

13 files changed, 302 insertions, 26 deletions

diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
index 72de6cb93..e27b0f182 100644
--- a/ui/app/components/index.scss
+++ b/ui/app/components/index.scss
@@ -32,6 +32,8 @@
 
 @import './pages/index';
 
+@import './provider-page-container/index';
+
 @import './selected-account/index';
 
 @import './sender-to-recipient/index';
diff --git a/ui/app/components/network-display/index.scss b/ui/app/components/network-display/index.scss
index 2085cff67..e9f2f2057 100644
--- a/ui/app/components/network-display/index.scss
+++ b/ui/app/components/network-display/index.scss
@@ -3,11 +3,14 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    background-color: lighten(rgb(125, 128, 130), 45%);
     padding: 0 10px;
     border-radius: 4px;
     height: 25px;
 
+    &--colored {
+      background-color: lighten(rgb(125, 128, 130), 45%);
+    }
+
     &--mainnet {
       background-color: lighten($blue-lagoon, 68%);
     }
diff --git a/ui/app/components/network-display/network-display.component.js b/ui/app/components/network-display/network-display.component.js
index 82f9ff9c3..22d617099 100644
--- a/ui/app/components/network-display/network-display.component.js
+++ b/ui/app/components/network-display/network-display.component.js
@@ -16,7 +16,12 @@ const networkToClassHash = {
 }
 
 export default class NetworkDisplay extends Component {
+  static defaultProps = {
+    colored: true,
+  }
+
   static propTypes = {
+    colored: PropTypes.bool,
     network: PropTypes.string,
     provider: PropTypes.object,
   }
@@ -41,14 +46,16 @@ export default class NetworkDisplay extends Component {
   }
 
   render () {
-    const { network, provider: { type, nickname } } = this.props
+    const { colored, network, provider: { type, nickname } } = this.props
     const networkClass = networkToClassHash[network]
 
     return (
-      <div className={classnames(
-        'network-display__container',
-        networkClass && ('network-display__container--' + networkClass)
-      )}>
+      <div
+        className={classnames('network-display__container', {
+          'network-display__container--colored': colored,
+          ['network-display__container--' + networkClass]: colored && networkClass,
+        })}
+      >
         {
           networkClass
             ? <div className={`network-display__icon network-display__icon--${networkClass}`} />
diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js
index 7b64ebc4e..b9ec3c258 100644
--- a/ui/app/components/pages/home/home.component.js
+++ b/ui/app/components/pages/home/home.component.js
@@ -67,7 +67,9 @@ export default class Home extends PureComponent {
     }
 
     if (providerRequests && providerRequests.length > 0) {
-      return <ProviderApproval origin={providerRequests[0].origin} />
+      return (
+        <ProviderApproval providerRequest={providerRequests[0]} />
+      )
     }
 
     return (
diff --git a/ui/app/components/pages/provider-approval/provider-approval.component.js b/ui/app/components/pages/provider-approval/provider-approval.component.js
index 67e8bdd4c..da98bc3fc 100644
--- a/ui/app/components/pages/provider-approval/provider-approval.component.js
+++ b/ui/app/components/pages/provider-approval/provider-approval.component.js
@@ -1,12 +1,12 @@
-import PageContainerContent from '../../page-container'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
+import ProviderPageContainer from '../../provider-page-container'
 
 export default class ProviderApproval extends Component {
   static propTypes = {
-    approveProviderRequest: PropTypes.func,
-    origin: PropTypes.string,
-    rejectProviderRequest: PropTypes.func,
+    approveProviderRequest: PropTypes.func.isRequired,
+    providerRequest: PropTypes.object.isRequired,
+    rejectProviderRequest: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -14,22 +14,15 @@ export default class ProviderApproval extends Component {
   };
 
   render () {
-    const { approveProviderRequest, origin, rejectProviderRequest } = this.props
+    const { approveProviderRequest, providerRequest, rejectProviderRequest } = this.props
     return (
-      <PageContainerContent
-        title={this.context.t('providerAPIRequest')}
-        subtitle={this.context.t('reviewProviderRequest')}
-        contentComponent={(
-          <div className="provider_approval_content">
-            {this.context.t('providerRequestInfo')}
-            <div className="provider_approval_origin">{origin}</div>
-          </div>
-        )}
-        submitText={this.context.t('approve')}
-        cancelText={this.context.t('reject')}
-        onSubmit={() => { approveProviderRequest(origin) }}
-        onCancel={() => { rejectProviderRequest(origin) }}
-        onClose={() => { rejectProviderRequest(origin) }} />
+      <ProviderPageContainer
+        approveProviderRequest={approveProviderRequest}
+        origin={providerRequest.origin}
+        rejectProviderRequest={rejectProviderRequest}
+        siteImage={providerRequest.siteImage}
+        siteTitle={providerRequest.siteTitle}
+      />
     )
   }
 }
diff --git a/ui/app/components/provider-page-container/index.js b/ui/app/components/provider-page-container/index.js
new file mode 100644
index 000000000..927c35940
--- /dev/null
+++ b/ui/app/components/provider-page-container/index.js
@@ -0,0 +1,3 @@
+export {default} from './provider-page-container.component'
+export {default as ProviderPageContainerContent} from './provider-page-container-content'
+export {default as ProviderPageContainerHeader} from './provider-page-container-header'
diff --git a/ui/app/components/provider-page-container/index.scss b/ui/app/components/provider-page-container/index.scss
new file mode 100644
index 000000000..a67d7f427
--- /dev/null
+++ b/ui/app/components/provider-page-container/index.scss
@@ -0,0 +1,120 @@
+.provider-approval-container {
+  display: flex;
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    border-bottom: 1px solid $geyser;
+    padding: 9px;
+  }
+
+  &__content {
+    display: flex;
+    overflow-y: auto;
+    flex: 1;
+    flex-direction: column;
+    justify-content: space-between;
+    color: #7C808E;
+
+    h1, h2 {
+      color: #4A4A4A;
+      display: flex;
+      justify-content: center;
+      text-align: center;
+    }
+
+    h2 {
+      font-size: 16px;
+      line-height: 18px;
+      padding: 20px;
+    }
+
+    h1 {
+      font-size: 22px;
+      line-height: 26px;
+      padding: 20px;
+    }
+
+    p {
+      padding: 0 40px;
+      text-align: center;
+      font-size: 12px;
+      line-height: 18px;
+    }
+
+    a, a:hover {
+      color: $dodger-blue;
+    }
+
+    .provider-approval-visual {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-evenly;
+      position: relative;
+      margin: 0 32px;
+
+      section {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+      }
+
+      h1 {
+        font-size: 14px;
+        line-height: 18px;
+        padding: 8px 0 0;
+      }
+
+      h2 {
+        font-size: 10px;
+        line-height: 14px;
+        padding: 0;
+        color: #A2A4AC;
+      }
+
+      &__check {
+        width: 40px;
+        height: 40px;
+        background: white url("/images/provider-approval-check.svg") no-repeat;
+        margin-top: 14px;
+      }
+
+      &__identicon {
+        width: 64px;
+        height: 64px;
+
+        &--default {
+          background-color: lightgray;
+          width: 64px;
+          height: 64px;
+          border-radius: 32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: bold;
+        }
+      }
+
+      &:before {
+        border-top: 2px dashed #CDD1E4;
+        content: "";
+        margin: 0 auto;
+        position: absolute;
+        top: 32px;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        width: 65%;
+        z-index: -1;
+      }
+    }
+
+    .secure-badge {
+      display: flex;
+      justify-content: center;
+      padding: 25px;
+    }
+  }
+}
diff --git a/ui/app/components/provider-page-container/provider-page-container-content/index.js b/ui/app/components/provider-page-container/provider-page-container-content/index.js
new file mode 100644
index 000000000..73e491adc
--- /dev/null
+++ b/ui/app/components/provider-page-container/provider-page-container-content/index.js
@@ -0,0 +1 @@
+export {default} from './provider-page-container-content.container'
diff --git a/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.component.js b/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.component.js
new file mode 100644
index 000000000..20fad5c6d
--- /dev/null
+++ b/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.component.js
@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types'
+import React, {PureComponent} from 'react'
+import Identicon from '../../identicon'
+
+export default class ProviderPageContainerContent extends PureComponent {
+  static propTypes = {
+    origin: PropTypes.string.isRequired,
+    selectedIdentity: PropTypes.string.isRequired,
+    siteImage: PropTypes.string,
+    siteTitle: PropTypes.string.isRequired,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  renderConnectVisual = () => {
+    const { origin, selectedIdentity, siteImage, siteTitle } = this.props
+
+    return (
+      <div className="provider-approval-visual">
+        <section>
+          {siteImage ? (
+            <img
+              className="provider-approval-visual__identicon"
+              src={siteImage}
+            />
+          ) : (
+            <i className="provider-approval-visual__identicon--default">
+              {siteTitle.charAt(0).toUpperCase()}
+            </i>
+          )}
+          <h1>{siteTitle}</h1>
+          <h2>{origin}</h2>
+        </section>
+        <span className="provider-approval-visual__check" />
+        <section>
+          <Identicon
+            className="provider-approval-visual__identicon"
+            address={selectedIdentity.address}
+            diameter={64}
+          />
+          <h1>{selectedIdentity.name}</h1>
+        </section>
+      </div>
+    )
+  }
+
+  render () {
+    const { siteTitle } = this.props
+    const { t } = this.context
+
+    return (
+      <div className="provider-approval-container__content">
+        <section>
+          <h2>{t('connectRequest')}</h2>
+          {this.renderConnectVisual()}
+          <h1>{t('providerRequest', [siteTitle])}</h1>
+          <p>
+            {t('providerRequestInfo')}
+            <br/>
+            <a href="#">{t('learnMore')}.</a>
+          </p>
+        </section>
+        <section className="secure-badge">
+          <img src="/images/mm-secure.svg" />
+        </section>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.container.js b/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.container.js
new file mode 100644
index 000000000..3ea1ce20e
--- /dev/null
+++ b/ui/app/components/provider-page-container/provider-page-container-content/provider-page-container-content.container.js
@@ -0,0 +1,11 @@
+import { connect } from 'react-redux'
+import ProviderPageContainerContent from './provider-page-container-content.component'
+import { getSelectedIdentity } from '../../../selectors'
+
+const mapStateToProps = (state) => {
+  return {
+    selectedIdentity: getSelectedIdentity(state),
+  }
+}
+
+export default connect(mapStateToProps)(ProviderPageContainerContent)
diff --git a/ui/app/components/provider-page-container/provider-page-container-header/index.js b/ui/app/components/provider-page-container/provider-page-container-header/index.js
new file mode 100644
index 000000000..430627d3a
--- /dev/null
+++ b/ui/app/components/provider-page-container/provider-page-container-header/index.js
@@ -0,0 +1 @@
+export {default} from './provider-page-container-header.component'
diff --git a/ui/app/components/provider-page-container/provider-page-container-header/provider-page-container-header.component.js b/ui/app/components/provider-page-container/provider-page-container-header/provider-page-container-header.component.js
new file mode 100644
index 000000000..41bf6c3dd
--- /dev/null
+++ b/ui/app/components/provider-page-container/provider-page-container-header/provider-page-container-header.component.js
@@ -0,0 +1,12 @@
+import React, {PureComponent} from 'react'
+import NetworkDisplay from '../../network-display'
+
+export default class ProviderPageContainerHeader extends PureComponent {
+  render () {
+    return (
+      <div className="provider-approval-container__header">
+        <NetworkDisplay colored={false} />
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/provider-page-container/provider-page-container.component.js b/ui/app/components/provider-page-container/provider-page-container.component.js
new file mode 100644
index 000000000..902733616
--- /dev/null
+++ b/ui/app/components/provider-page-container/provider-page-container.component.js
@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types'
+import React, {PureComponent} from 'react'
+import { ProviderPageContainerContent, ProviderPageContainerHeader } from './'
+import { PageContainerFooter } from '../page-container'
+
+export default class ProviderPageContainer extends PureComponent {
+  static propTypes = {
+    approveProviderRequest: PropTypes.func.isRequired,
+    origin: PropTypes.string.isRequired,
+    rejectProviderRequest: PropTypes.func.isRequired,
+    siteImage: PropTypes.string,
+    siteTitle: PropTypes.string.isRequired,
+  };
+
+  static contextTypes = {
+    t: PropTypes.func,
+  };
+
+  onCancel = () => {
+    const { origin, rejectProviderRequest } = this.props
+    rejectProviderRequest(origin)
+  }
+
+  onSubmit = () => {
+    const { approveProviderRequest, origin } = this.props
+    approveProviderRequest(origin)
+  }
+
+  render () {
+    const {origin, siteImage, siteTitle} = this.props
+
+    return (
+      <div className="page-container provider-approval-container">
+        <ProviderPageContainerHeader />
+        <ProviderPageContainerContent
+          origin={origin}
+          siteImage={siteImage}
+          siteTitle={siteTitle}
+        />
+        <PageContainerFooter
+          onCancel={() => this.onCancel()}
+          cancelText={this.context.t('cancel')}
+          onSubmit={() => this.onSubmit()}
+          submitText={this.context.t('connect')}
+          submitButtonType="confirm"
+        />
+      </div>
+    )
+  }
+}