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,30 +44,41 @@ 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>
-        <div style={{ display: admin ? 'block' : 'none' }} >
-          <AdminMode style={{ display: admin ? 'block' : 'none' }}/>
-        </div>
-        <Welcome />
-        {false &&
-         <Fragment>
-           <Paper elevation={4}>
-             <Typography style={{ fontSize: '2.5rem', padding: '0.5%', textAlign: 'center' }} variant="headline" component="h3"><i style={{ fontSize: '1rem' }}>network </i>{network}</Typography>
-           </Paper>
-           <NameLookup />
-           <div style={{ textAlign: 'center' }}>
-             <TokenPermissions
-               symbol={symbols[network] || 'SNT'}
-               spender={ENSSubdomainRegistry._address}
-               methods={TestToken.methods} />
-             <hr/>
-             <Toggle onChange={() => { this.setState({ admin: !admin })}} />
-             <br/>
-             <span>Admin Mode</span>
-           </div>
-         </Fragment>}
+        <CssBaseline />
+          <div style={{ display: admin ? 'block' : 'none' }} >
+            <AdminMode style={{ display: admin ? 'block' : 'none' }}/>
+          </div>
+          {!searching && <Fade in={!searching}>
+            <div>
+              <Welcome toggleSearch={toggleSearch} />
+            </div>
+          </Fade>}
+          {searching && <Fade in={searching}>
+            <div>
+              <NameLookup />
+            </div>
+          </Fade>}
+          {false &&
+           <Fragment>
+             <Paper elevation={4}>
+               <Typography style={{ fontSize: '2.5rem', padding: '0.5%', textAlign: 'center' }} variant="headline" component="h3"><i style={{ fontSize: '1rem' }}>network </i>{network}</Typography>
+             </Paper>
+             <NameLookup />
+             <div style={{ textAlign: 'center' }}>
+               <TokenPermissions
+                 symbol={symbols[network] || 'SNT'}
+                 spender={ENSSubdomainRegistry._address}
+                 methods={TestToken.methods} />
+               <hr/>
+               <Toggle onChange={() => { this.setState({ admin: !admin })}} />
+               <br/>
+               <span>Admin Mode</span>
+             </div>
+           </Fragment>}
       </div>
     );
   }