resurface admin mode

update some styling and copy
This commit is contained in:
Barry Gitarts 2018-07-11 13:31:33 -04:00
parent e9093ef0b5
commit 93f70a30b0
3 changed files with 47 additions and 39 deletions

View File

@ -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%' } { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', height: '4em', color: '#ffffff', textAlign: 'center', margin: '10%' }
}> }>
<b>{formattedDomain.toLowerCase()}</b> <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 {!!domainPrice && formatPrice(fromWei(domainPrice))} SNT
</div> </div>
<div style={{ fontWeight: 100, marginTop: '0.3em' }}>1 year</div>
</Typography> </Typography>
</Info> </Info>
</Hidden> </Hidden>

View File

@ -1,10 +1,10 @@
import React, { Fragment, PureComponent } from 'react'; import React, { Fragment, PureComponent } from 'react';
import { Tooltip, OverlayTrigger } from 'react-bootstrap';
import web3 from "Embark/web3" import web3 from "Embark/web3"
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
import { BigNumber } from './utils' import { BigNumber } from './utils'
import "react-toggle/style.css"; import "react-toggle/style.css";
import CircularProgress from '@material-ui/core/CircularProgress'; 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 // We set an allowance to be "unlimited" by setting it to
// it's maximum possible value -- namely, 2^256 - 1. // 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) => ( const TokenPermissions = (props) => (
<Fragment> <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> <h3>Token Permissions</h3>
</OverlayTrigger> </Tooltip>
<hr/> <hr/>
<TokenHandle {...props} /> <TokenHandle {...props} />
</Fragment> </Fragment>

View File

@ -19,6 +19,7 @@ import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import Welcome from './components/ens/welcome'; import Welcome from './components/ens/welcome';
import Fade from '@material-ui/core/Fade'; import Fade from '@material-ui/core/Fade';
import Hidden from '@material-ui/core/Hidden';
import './dapp.css'; import './dapp.css';
@ -49,36 +50,48 @@ class App extends React.Component {
return ( return (
<div> <div>
<CssBaseline /> <CssBaseline />
<div style={{ display: admin ? 'block' : 'none' }} > <div style={{ display: admin ? 'block' : 'none' }} >
<AdminMode style={{ display: admin ? 'block' : 'none' }}/> <AdminMode style={{ display: admin ? 'block' : 'none' }}/>
</div>
{!searching && <Fade in={!searching}>
<div>
<Welcome toggleSearch={toggleSearch} />
</div> </div>
{!searching && <Fade in={!searching}> </Fade>}
<div> {searching && <Fade in={searching}>
<Welcome toggleSearch={toggleSearch} /> <div>
</div> <NameLookup />
</Fade>} <Hidden mdDown>
{searching && <Fade in={searching}> <div style={{ textAlign: 'center' }}>
<div> <TokenPermissions
<NameLookup /> symbol={symbols[network] || 'SNT'}
</div> spender={ENSSubdomainRegistry._address}
</Fade>} methods={TestToken.methods} />
{false && <hr/>
<Fragment> <Toggle onChange={() => { this.setState({ admin: !admin })}} />
<Paper elevation={4}> <br/>
<Typography style={{ fontSize: '2.5rem', padding: '0.5%', textAlign: 'center' }} variant="headline" component="h3"><i style={{ fontSize: '1rem' }}>network </i>{network}</Typography> <span>Admin Mode</span>
</Paper> </div>
<NameLookup /> </Hidden>
<div style={{ textAlign: 'center' }}> </div>
<TokenPermissions </Fade>}
symbol={symbols[network] || 'SNT'} {false &&
spender={ENSSubdomainRegistry._address} <Fragment>
methods={TestToken.methods} /> <Paper elevation={4}>
<hr/> <Typography style={{ fontSize: '2.5rem', padding: '0.5%', textAlign: 'center' }} variant="headline" component="h3"><i style={{ fontSize: '1rem' }}>network </i>{network}</Typography>
<Toggle onChange={() => { this.setState({ admin: !admin })}} /> </Paper>
<br/> <NameLookup />
<span>Admin Mode</span> <div style={{ textAlign: 'center' }}>
</div> <TokenPermissions
</Fragment>} 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> </div>
); );
} }