resurface admin mode

update some styling and copy

app/components/ens/nameLookup.js

@@ -86,9 +86,10 @@ const RegisterInfoCard = ({ formattedDomain, domainPrice }) => (
           { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', height: '4em', color: '#ffffff', textAlign: 'center', margin: '10%' }
         }>
           <b>{formattedDomain.toLowerCase()}</b>
-          <div style={{ border: '1px solid', borderRadius: '9px', width: '5em' }}>
+          <div style={{ border: '1px solid', borderRadius: '25px', width: '5em', height: '2em', paddingTop: '0.1em', fontWeight: 300, marginTop: '0.5em' }}>
             {!!domainPrice && formatPrice(fromWei(domainPrice))} SNT
           </div>
+          <div style={{ fontWeight: 100, marginTop: '0.3em' }}>1 year</div>
         </Typography>
       </Info>
     </Hidden>

app/components/standard/TokenPermission.js

@@ -1,10 +1,10 @@
 import React, { Fragment, PureComponent } from 'react';
-import { Tooltip, OverlayTrigger } from 'react-bootstrap';
 import web3 from "Embark/web3"
 import Toggle from 'react-toggle';
 import { BigNumber } from './utils'
 import "react-toggle/style.css";
 import CircularProgress from '@material-ui/core/CircularProgress';
+import Tooltip from '@material-ui/core/Tooltip';
 
 // We set an allowance to be "unlimited" by setting it to
 // it's maximum possible value -- namely, 2^256 - 1.
@@ -74,17 +74,11 @@ class TokenHandle extends PureComponent {
   }
 }
 
-const tooltip = (
-  <Tooltip id="tooltip">
-    Turn on permissions for a token to enable its use with the ENS subdomain registry.
-  </Tooltip>
-);
-
 const TokenPermissions = (props) => (
   <Fragment>
-    <OverlayTrigger placement="top" overlay={tooltip}>
+    <Tooltip title="Turn on permissions for a token to enable its use with the ENS subdomain registry">
       <h3>Token Permissions</h3>
-    </OverlayTrigger>
+    </Tooltip>
     <hr/>
     <TokenHandle {...props} />
   </Fragment>

app/dapp.js

@@ -19,6 +19,7 @@ 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 Hidden from '@material-ui/core/Hidden';
 
 import './dapp.css';
 
@@ -49,36 +50,48 @@ class App extends React.Component {
     return (
       <div>
         <CssBaseline />
-          <div style={{ display: admin ? 'block' : 'none' }} >
-            <AdminMode style={{ display: admin ? 'block' : 'none' }}/>
+        <div style={{ display: admin ? 'block' : 'none' }} >
+          <AdminMode style={{ display: admin ? 'block' : 'none' }}/>
+        </div>
+        {!searching && <Fade in={!searching}>
+          <div>
+            <Welcome toggleSearch={toggleSearch} />
           </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>}
+        </Fade>}
+        {searching && <Fade in={searching}>
+          <div>
+            <NameLookup />
+            <Hidden mdDown>
+              <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>
+            </Hidden>
+          </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>
     );
   }