[#22]: Redesign error screen for user not on mainnet

app/components/ens/nameLookup.js

@@ -23,7 +23,7 @@ import StatusLogo from '../../ui/icons/components/StatusLogo'
 import EnsLogo from '../../ui/icons/logos/ens.png';
 import { formatPrice } from '../ens/utils';
 import CheckCircle from '../../ui/icons/components/baseline_check_circle_outline.png';
-import WarningIcon from '../../ui/icons/svg/warning.svg';
+import Warning from '../../ui/components/Warning';
 const { getPrice, getExpirationTime, release } = UsernameRegistrar.methods;
 import NotInterested from '@material-ui/icons/NotInterested';
 import Face from '@material-ui/icons/Face';
@@ -297,12 +297,7 @@ const LookupForm = ({ handleSubmit, values, handleChange, justSearch }) => (
           onChange={handleChange}
           required
           wide />
-        {!justSearch &&
+        {!justSearch && <Warning>Names are made with<br/>letters and numbers only</Warning>}
-          <div style={{ textAlign: 'center', marginTop: '40vh' }}>
-            <img style={{ display: 'block', margin: '0 auto 15px' }} src={WarningIcon} />
-            Names are made with<br/>letters and numbers only
-          </div>
-        }
       </Hidden>
       <Hidden mdDown>
         <Button mode="strong" type="submit" style={{ marginLeft: '3%', maxWidth: '95%' }} wide>

app/components/standard/NoConnection.js

@@ -1,96 +0,0 @@
-import React from 'react';
-import styles from './style.js';
-import EthereumLogo from './../assets/ethereum-logo.svg';
-import MetamaskLogo from './../assets/metamask-logo.svg';
-
-function capitalize(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-const NoConnection = ({ network }) => console.log(network) || (
-  <div style={styles.NoEthereumSection}>
-    <img style={styles.ImgHeaderLogo} alt="Status" src="images/logo.png" />
-    <hr />
-    <img
-      style={styles.ImgEthereumLogo}
-      alt="Ethereum"
-      src={EthereumLogo}
-    />
-    <h2>NOT CONNECTED TO ETHEREUM {network.toUpperCase()}</h2>
-    <p style={styles.PNotFound}>
-      This application requires an Ethereum client to be running and connected to {capitalize(network)}. A client
-      could not be detected which probably means it&#39;s not
-      installed, running or is misconfigured.
-    </p>
-    <p style={styles.PUseClients}>
-      Please use one of the following clients to connect to Ethereum:
-    </p>
-    <div style={styles.DivClients}>
-      <div style={styles.DivSubClients}>
-        <img style={styles.ImgLogo} alt="Metamask" src={MetamaskLogo} />
-        <h2>METAMASK</h2>
-        <p>
-          <span style={styles.AlignNumber}>
-            <span style={styles.NumberCircle}>1</span>
-          </span>Install
-          <a
-            href="https://metamask.io/"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            {" "}
-            Metamask
-          </a>
-        </p>
-        <p>
-          <span style={styles.AlignNumber}>
-            <span style={styles.NumberCircle}>2</span>
-          </span>Use Chrome to browse
-          <a
-            rel="noopener noreferrer"
-            href="https://vote.status.im"
-            target="_blank"
-          >
-            {" "}
-            https://vote.status.im
-          </a>
-        </p>
-      </div>
-      <div style={styles.DivSubClients}>
-        <img style={styles.ImgLogo} alt="Mist" src="images/mist.png" />
-        <h2>MIST</h2>
-        <p>
-          <span style={styles.AlignNumber}>
-            <span style={styles.NumberCircle}>1</span>
-          </span>Install and run
-          <a
-            rel="noopener noreferrer"
-            href="https://github.com/ethereum/mist/releases"
-            target="_blank"
-          >
-            {" "}
-            Mist
-          </a>
-        </p>
-        <p>
-          <span style={styles.AlignNumber}>
-            <span style={styles.NumberCircle}>2</span>
-          </span>
-          Use Mist to browse
-          <a
-            rel="noopener noreferrer"
-            href="https://vote.status.im"
-            target="_blank"
-          >
-            {" "}
-            https://vote.status.im
-          </a>
-        </p>
-      </div>
-    </div>
-  </div>
-);
-
-NoConnection.displayName = 'NoConnection';
-
-export default NoConnection;

app/components/standard/Web3Render.js

@@ -1,9 +1,9 @@
 import React, { Fragment } from 'react';
-import NoConnection from './NoConnection';
+import Warning from '../../ui/components/Warning';
 
 const Web3Render = ({ ready, children, network }) => (
   <Fragment>
-    {ready ? <Fragment>{children}</Fragment> : <NoConnection network={network} />}
+    {ready ? <Fragment>{children}</Fragment> : <Warning>Please connect to Ethereum {network}<br />to continue.</Warning>}
   </Fragment>
 );
 

app/components/standard/style.js

@@ -1,68 +0,0 @@
-export default {
-  NoEthereumSection: {
-  maxWidth: '980px',
-  margin: '0 auto',
-  textAlign: 'center',
-  fontSize: '24px'
-  },
-  ImgHeaderLogo: {
-    width: '264px',
-    paddingBottom: '30px'
-  },
-  ImgEthereumLogo: {
-    width: '61px',
-    paddingTop: '30px',
-    marginBottom: '40px'
-  },
-  PNotFound: {
-    opacity: 0.50,
-    display: 'inline-block',
-    letterSpacing: '0.6px',
-    margin: 10
-  },
-  PUseClients: {
-    display: 'inline-block',
-    color: '#546979',
-    fontWeight: 700
-  },
-  DivClients: {
-    height: '360px',
-    display: 'flex',
-    justifyContent: 'center',
-    fontSize: '21px',
-    marginBottom: '50px',
-    marginTop: '50px'
-  },
-  ImgLogo: {
-    width: '85px'
-  },
-  AlignNumber: {
-    display: 'table-cell',
-    verticalAlign: 'middle',
-    paddingRight: '20px'
-  },
-  NumberCircle: {
-    display: 'inline-block',
-    borderRadius: '50%',
-    height: '28px',
-    width: '28px',
-    lineHeight: '28px',
-    textAlign: 'center',
-    border: 'solid 1px #CFD8DC',
-    fontSize: '18px',
-    color: '#222228',
-    opacity: 0.68
-  },
-  DivSubClients: {
-    backgroundColor: 'white',
-    width: '340px',
-    height: '360px',
-    padding: '33px 10px 33px 27px',
-    opacity: 0.89,
-    border: '2px solid #EFF1F3',
-    boxShadow: '0px 2px 6px 0px rgba(0, 0, 0, 0.13)',
-    borderRadius: '4px',
-    margin: '0 20px'
-  }
-
-}

app/ui/components/Warning.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import WarningIcon from '../../ui/icons/svg/warning.svg';
+import styled from "styled-components";
+
+const StyledContainer = styled.div`
+  text-align: center;
+  margin-top: 40vh;
+`
+
+const StyledIcon = styled.img`
+  display: block;
+  margin: 0 auto 15px;
+`
+
+const Warning = ({ text, ...props }) => (
+  <StyledContainer>
+    <StyledIcon src={WarningIcon} />
+    {props.children}
+  </StyledContainer>
+)
+
+export default Warning;