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

2 files changed, 16 insertions, 6 deletions

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}`} />