add move to search transistion

app/components/ens/welcome.js

@@ -47,13 +47,13 @@ const WelcomeContent = () => (
   </div>
 );
 
-const Welcome = ({ classes }) => (
+const Welcome = ({ classes, toggleSearch }) => (
   <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
     <img src={StatusCards} />
     <Typography variant="title" style={textStyle}>
       Get a human-readable name instead of long addresses
     </Typography>
-    <Button size="large" className={classNames(classes.button)}>
+    <Button size="large" className={classNames(classes.button)} onClick={toggleSearch}>
       <div style={buttonText}>Let's Go</div>
     </Button>
     <WelcomeContent />

app/dapp.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import ReactDOM from 'react-dom';
 import 'typeface-roboto'
+import CssBaseline from '@material-ui/core/CssBaseline';
 import { Tabs, Tab } from 'react-bootstrap';
 import Toggle from 'react-toggle';
 import EmbarkJS from 'Embark/EmbarkJS';
@@ -17,6 +18,7 @@ import web3 from "Embark/web3";
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Welcome from './components/ens/welcome';
+import Fade from '@material-ui/core/Fade';
 
 import './dapp.css';
 
@@ -32,7 +34,7 @@ class App extends React.Component {
   constructor(props) {
     super(props)
   }
-  state = { admin: false };
+  state = { admin: false, searching: false };
 
   componentDidMount(){
     __embarkContext.execWhenReady(() => {
@@ -42,13 +44,24 @@ class App extends React.Component {
   }
 
   render() {
-    const { admin, network } = this.state;
+    const { admin, network, searching } = this.state;
+    const toggleSearch = () => { this.setState({ searching: !searching }) };
     return (
       <div>
+        <CssBaseline />
           <div style={{ display: admin ? 'block' : 'none' }} >
             <AdminMode style={{ display: admin ? 'block' : 'none' }}/>
           </div>
-        <Welcome />
+          {!searching && <Fade in={!searching}>
+            <div>
+              <Welcome toggleSearch={toggleSearch} />
+            </div>
+          </Fade>}
+          {searching && <Fade in={searching}>
+            <div>
+              <NameLookup />
+            </div>
+          </Fade>}
           {false &&
            <Fragment>
              <Paper elevation={4}>