UI styling

2018-09-27 22:32:06 +02:00 · 2018-09-27 22:32:06 +02:00 · 5187000513
parent c6636fe6b9
commit 5187000513
8 changed files with 189 additions and 64 deletions
--- a/app/components/ens/EditOptions.js
+++ b/app/components/ens/EditOptions.js
@ -2,10 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import Avatar from '@material-ui/core/Avatar';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Dialog from '@material-ui/core/Dialog';
@ -16,6 +15,11 @@ import Typography from '@material-ui/core/Typography';
 import blue from '@material-ui/core/colors/blue';

 const styles = {
+  paper: {
+    margin: 0,
+    maxWidth: '100%',
+    borderRadius: '6px 6px 0 0',
+  },
  list: {
    width: '100%',
    position: 'absolute',
@ -37,22 +41,18 @@ class SimpleDialog extends React.Component {
    const { classes, onClose, selectedValue, ...other } = this.props;

    return (
-      <Dialog onClose={this.handleClose} aria-labelledby="simple-dialog-title" {...other}>
+      <Dialog classes={{paper: classes.paper,}} onClose={this.handleClose} fullWidth paperFullWidth style={{alignItems: 'flex-end'}} aria-labelledby="simple-dialog-title" {...other}>
        <List>
          <ListItem button onClick={() => this.handleListItemClick('edit')} key="edit">
-            <ListItemAvatar>
-              <Avatar>
+            <ListItemIcon>
                <EditIcon />
-              </Avatar>
-            </ListItemAvatar>
+            </ListItemIcon>
            <ListItemText primary="Edit Contact Code" />
          </ListItem>
          <ListItem button onClick={() => this.handleListItemClick('release')}>
-            <ListItemAvatar>
-              <Avatar>
+            <ListItemIcon>
                <DeleteOutline />
-              </Avatar>
-            </ListItemAvatar>
+            </ListItemIcon>
            <ListItemText primary="Release Name" />
          </ListItem>
        </List>
--- a/app/components/ens/ReleaseDomain.js
+++ b/app/components/ens/ReleaseDomain.js
@ -1,4 +1,5 @@
 import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
@ -6,14 +7,37 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Slide from '@material-ui/core/Slide';
+import classNames from "classnames";

 function Transition(props) {
  return <Slide direction="up" {...props} />;
 }

-const ReleaseDomainAlert = ({ open, handleClose }) => (
+const styles = theme => ({
+    dialog: {
+        textAlign: 'center',
+    },
+    actions: {
+        background: 'rgba(255, 255, 255, 0.8)',
+        margin: 0,
+        borderTop: 'solid 1px #ccc',
+    },
+    button: {
+        margin: '0',
+        fontSize: '17px',
+        color: '#007AFF',
+        width: '50%',
+        borderRight: 'solid 1px #ccc',
+        borderRadius: 0,
+        padding: '15px',
+    }
+});
+
+
+const ReleaseDomainAlert = ({ classes, open, handleClose }) => (
  <div>
    <Dialog
+        className={classNames(classes.dialog)}
      open={open}
      TransitionComponent={Transition}
      keepMounted
@ -29,11 +53,11 @@ const ReleaseDomainAlert = ({ open, handleClose }) => (
          Your SNT deposit will be returned and name will be available to other users.
        </DialogContentText>
      </DialogContent>
-      <DialogActions>
-        <Button onClick={() => handleClose(null)} color="primary">
-          Cancel
+      <DialogActions className={classNames(classes.actions)}>
+        <Button onClick={() => handleClose(null)} className={classNames(classes.button)} color="primary">
+          <strong>Cancel</strong>
        </Button>
-        <Button onClick={() => handleClose(true)} color="primary">
+        <Button onClick={() => handleClose(true)} className={classNames(classes.button)} color="primary">
          Yes
        </Button>
      </DialogActions>
@ -41,4 +65,5 @@ const ReleaseDomainAlert = ({ open, handleClose }) => (
  </div>
 );

-export default ReleaseDomainAlert;
+
+export default withStyles(styles)(ReleaseDomainAlert);
--- a/app/components/ens/nameLookup.js
+++ b/app/components/ens/nameLookup.js
@ -65,16 +65,26 @@ const validTimestamp = timestamp => Number(timestamp) > 99999999;
 const generatePrettyDate = timestamp => new Date(timestamp * 1000).toDateString();

 const DisplayBox = ({ displayType, pubKey }) => (
-  <div style={{ border: '1px solid #EEF2F5', borderRadius: '8px', margin: '1em', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', minHeight: '4em' }}>
-    <div style={{ margin: '3%', wordBreak: 'break-word' }}>
-      <div style={{ fontSize: '14px', color: '#939BA1' }}>{displayType}</div>
-      <Typography type='body1'>{pubKey}</Typography>
+  <div>
+    <div style={{ fontSize: '14px', color: '#939BA1', margin: '0 1em' }}>{displayType}</div>
+    <div style={{ border: '1px solid #EEF2F5', borderRadius: '8px', margin: '0.5 1em 1em', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', minHeight: '4em' }}>
+      <div style={{ margin: '3%', wordBreak: 'break-word' }}>
+        <Typography type='body1'>{pubKey}</Typography>
+      </div>
    </div>
  </div>
 );

 const MobileAddressDisplay = ({ domainName, address, statusAccount, releaseTime, defaultAccount, isOwner, edit, onSubmit }) => (
  <Fragment>
+    <MobileSearch
+        search
+        name="domainName"
+        placeholder='Search for available name'
+        // value={values.domainName}
+        // onChange={handleChange}
+        required
+        wide />
    <Info background={isOwner ? '#44D058' : '#000000'} style={{ margin: '0.4em', boxShadow: '0px 6px 10px rgba(0, 0, 0, 0.2)' }}>
      <Typography variant="title" style={
        { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', height: '4em', color: '#ffffff', textAlign: 'center', margin: '10%' }
@ -86,15 +96,13 @@ const MobileAddressDisplay = ({ domainName, address, statusAccount, releaseTime,
        </div>
      </Typography>
    </Info>
-    <Typography type='subheading' style={{ textAlign: 'center', fontSize: '17px', margin: '1em 0 0.3em 0' }}>
-      {isOwner
-       ? edit ? 'Edit Contact Code' : 'You\'re the owner of this name'
-       : 'Name is unavailable'}
+    <Typography type='subheading' style={{ textAlign: 'center', fontSize: '17px', fontWeight: '500', margin: '1.5em 0 0.3em 0' }}>
+        Registered {validTimestamp(expirationTime)}
    </Typography>
    <Typography type='body2' style={{ textAlign: 'center', margin: 10 }}>
      {edit
       ? 'The contact code connects the domain with a unique Status account'
-       : validAddress(address) ? 'registered to the addresses below' : 'Click \'Edit\' to add a valid address and contact code'}
+       : validAddress(address) ? 'to the addresses below' : 'Click \'Edit\' to add a valid address and contact code'}
    </Typography>
    {edit && <RegisterSubDomain
      subDomain={domainName}
@ -103,8 +111,8 @@ const MobileAddressDisplay = ({ domainName, address, statusAccount, releaseTime,
      editAccount={true}
      preRegisteredCallback={onSubmit}
      registeredCallbackFn={console.log} />}
-    {!edit && <DisplayBox displayType='Wallet Address' pubKey={address} />}
-    {!edit && validStatusAddress(statusAccount) && <DisplayBox displayType='Contact Code' pubKey={statusAccount} />}
+    {!edit && <DisplayBox displayType='Your wallet address' pubKey={address} />}
+    {!edit && validStatusAddress(statusAccount) && <DisplayBox displayType='Your contact code' pubKey={statusAccount} />}
  </Fragment>
 )

@ -148,7 +156,7 @@ class RenderAddresses extends PureComponent {
        </Hidden>
        <Hidden mdUp>
          {submitted ? <TransactionComplete type={editAction} setStatus={setStatus} /> : <MobileAddressDisplay {...this.props} isOwner={isOwner} edit={editAction === 'edit'} onSubmit={() => { this.setState({ submitted: true}) }}/>}
-          {isOwner && !editAction && <MobileButton text="Edit" style={{ marginLeft: '35%' }} onClick={onClickEdit}/>}
+          {isOwner && !editAction && <MobileButton text="Edit" style={{ margin: 'auto', display: 'block' }} onClick={onClickEdit}/>}
          <EditOptions open={editMenu} onClose={onClose} />
          <ReleaseDomainAlert open={editAction === 'release' && !submitted} handleClose={closeReleaseAlert} />
        </Hidden>
@ -171,17 +179,20 @@ const RegisterInfoCard = ({ formattedDomain, domainPrice, registryOwnsDomain })
        }>
          <img src={CheckCircle} style={{ maxWidth: '2.5em', marginBottom: '0.5em' }} />
          <b>{formattedDomain.toLowerCase()}</b>
-          <div style={{ fontWeight: 300 }}>
-            {!!domainPrice && formatPrice(fromWei(domainPrice))} SNT / 1 year
+          <div style={{ fontWeight: 300, fontSize: '15px' }}>
+            available
          </div>
        </Typography>
      </Info>
    </Hidden>
    <Hidden mdUp>
+      <Typography style={{ textAlign: 'center', fontSize: '17px', fontWeight: '500', margin: '1.5em 0 0.3em 0' }}>
+        {!!domainPrice && formatPrice(fromWei(domainPrice))} SNT to register
+      </Typography>
      <Typography style={{ textAlign: 'center', padding: '1.5em' }}>
        {registryOwnsDomain ?
-         'This name will be pointed to the wallet address and contact code below' :
-         'This domain is not owned by the registy'}
+         'Add your contact code to use your name in Status chat.' :
+         'This domain is not owned by the registry'}
      </Typography>
    </Hidden>
  </Fragment>
@ -336,15 +347,15 @@ const InnerForm = ({
       ownerAddress={status.ownerAddress}
       registryOwnsDomain={status.registryOwnsDomain}
       setStatus={setStatus} /> :
-     <div>
-       <LookupForm {...{ handleSubmit, values, handleChange }} justSearch />
-       <ConnectedRegister
-         style={{ position: 'relative' }}
-         setStatus={setStatus}
-         registryOwnsDomain={status.registryOwnsDomain}
-         ownerAddress={status.ownerAddress}
-         domainName={values.domainName}  />
-     </div>
+       <div>
+          <LookupForm {...{ handleSubmit, values, handleChange }} justSearch />
+          <ConnectedRegister
+            style={{ position: 'relative' }}
+            setStatus={setStatus}
+            registryOwnsDomain={status.registryOwnsDomain}
+            ownerAddress={status.ownerAddress}
+            domainName={values.domainName}  />
+       </div>
    }
  </div>
 )
--- a/app/components/ens/registerSubDomain.js
+++ b/app/components/ens/registerSubDomain.js
@ -13,12 +13,25 @@ import { zeroAddress, zeroBytes32, formatPrice } from './utils';
 import { getStatusContactCode, getSNTAllowance, getCurrentAccount } from '../../reducers/accounts';
 import FieldGroup from '../standard/FieldGroup';
 import LinearProgress from '@material-ui/core/LinearProgress';
+import Typography from '@material-ui/core/Typography';
 import TokenPermissions from '../standard/TokenPermissionConnect';
 import { generateXY } from '../../utils/ecdsa';
 import { getResolver } from './utils/domain';

 const { soliditySha3, fromWei } = web3.utils;

+
+const DisplayBox = ({ displayType, pubKey }) => (
+    <div>
+        <div style={{ fontSize: '14px', color: '#939BA1', margin: '0 1em' }}>{displayType}</div>
+        <div style={{ border: '1px solid #EEF2F5', borderRadius: '8px', margin: '0.5 1em 1em', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', minHeight: '4em' }}>
+            <div style={{ margin: '3%', wordBreak: 'break-word' }}>
+                <Typography type='body1'>{pubKey}</Typography>
+            </div>
+        </div>
+    </div>
+);
+
 const InnerForm = ({
  values,
  errors,
@ -102,28 +115,43 @@ const InnerForm = ({
        />
        {!isSubmitting ? <Button wide mode="strong" type="submit" disabled={isSubmitting || !!Object.keys(errors).length}>{!isSubmitting ? 'Submit' : 'Submitting to the Blockchain - (this may take awhile)'}</Button> : <LinearProgress />}
      </Hidden>
+
      <Hidden mdUp>
-        <Field label="Your Contact Code">
-          <MobileSearch
-            name="statusAddress"
-            style={{ marginTop: '10px' }}
-            placeholder="Status Messenger Address"
-            value={values.statusAddress}
-            onChange={handleChange}
-            onClick={() => setFieldValue('statusAddress', '')}
-            wide />
-        </Field>
-        <Field label="Your Wallet Address">
-          <MobileSearch
-            name="address"
-            style={{ marginTop: '10px' }}
-            placeholder="Ethereum Address"
-            value={values.address}
-            onChange={handleChange}
-            onClick={() => setFieldValue('address', '')}
-            required
-            wide />
-        </Field>
+
+        <DisplayBox displayType='Your wallet address' pubKey={values.address} />
+
+        <DisplayBox displayType='Your contact code' pubKey={values.statusAddress} />
+
+        {/*<div style={{ fontSize: '14px', color: '#939BA1', margin: '0 1em' }}>Your contact code</div>*/}
+        {/*<div style={{ border: '1px solid #EEF2F5', borderRadius: '8px', margin: '0.5 1em 1em', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', minHeight: '4em' }}>*/}
+            {/*<div style={{ margin: '3%', wordBreak: 'break-word' }}>*/}
+                {/*<Typography type='body1' onClick={() => setFieldValue('statusAddress', '')} style={{ textAlign: 'center', padding: '30px 0', color: 'blue', cursor: 'pointer'}}>*/}
+                  {/*Grant Access*/}
+                {/*</Typography>*/}
+            {/*</div>*/}
+        {/*</div>*/}
+
+        {/*<Field label="Your Wallet Address">*/}
+          {/*<MobileSearch*/}
+            {/*name="address"*/}
+            {/*style={{ marginTop: '10px' }}*/}
+            {/*placeholder="Your wallet address"*/}
+            {/*value={values.address}*/}
+            {/*onChange={handleChange}*/}
+            {/*onClick={() => setFieldValue('address', '')}*/}
+            {/*required*/}
+            {/*wide />*/}
+        {/*</Field>*/}
+        {/*<Field label="Your contact code">*/}
+          {/*<MobileSearch*/}
+            {/*name="statusAddress"*/}
+            {/*style={{ marginTop: '10px' }}*/}
+            {/*placeholder="Status Messenger Address"*/}
+            {/*value={values.statusAddress}*/}
+            {/*onChange={handleChange}*/}
+            {/*onClick={() => setFieldValue('statusAddress', '')}*/}
+            {/*wide />*/}
+        {/*</Field>*/}
        <div style={{ position: 'relative', left: 0, right: 0, bottom: 0 }}>
          {!isSubmitting ? <MobileButton type="submit" text={`${editAccount ? 'Save' : 'Register'} with transaction`} style={{ width: '100%' }} /> : <CircularProgress style={{ marginLeft: '45%' }} />}
        </div>
--- a/app/components/ens/terms.css
+++ b/app/components/ens/terms.css
@ -0,0 +1,10 @@
+.ens-terms__title {
+    padding: 40px 24px;
+    background: #EEF2F5;
+    border-radius: 4px;
+    margin-bottom: 30px;
+}
+
+.ens-terms li {
+
+}
--- a/app/components/ens/terms.js
+++ b/app/components/ens/terms.js
@ -0,0 +1,49 @@
+import React from 'react';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
+import './terms.css';
+
+const styles = theme => ({
+    button: {
+        margin: theme.spacing.unit,
+        borderRadius: '4px',
+        backgroundColor: 'rgba(67, 96, 223, 0.1)',
+    }
+});
+
+const buttonText = { color: '#4360df', margin: '0 20px', fontWeight: 300 };
+
+
+const Terms = ({ classes, toggleSearch }) => (
+    <div className="ens-terms">
+        <h2 className="ens-terms__title">Terms of name registration</h2>
+        <ul>
+            <li>Funds are deposited for 1 year. Your SNT   will be locked, but not spent.</li>
+            <li>After 1 year, you can release the name and get your deposit back, or take no action to keep the name.</li>
+            <li>If terms of the contract change — e.g. Status makes contract upgrades — user has the right to release the username regardless of time held.</li>
+            <li>The contract controller cannot access your deposited funds. They can only be moved back to the address that sent them.</li>
+            <li>Your address(es) will be publicly associated with your ENS name.</li>
+            <li>Usernames are created as subdomain nodes of stateofus.eth and are subject to the ENS smart contract terms.</li>
+            <li>You authorize the contract to transfer SNT on your behalf. This can only occur when you approve a transaction to authorize the transfer.</li>
+        </ul>
+
+        <p>These terms are guaranteed by the smart contract logic at addresses:</p>
+
+        <ul>
+            <li>0xb1C47B61CDaeee3fA85Fe8B93FcE6311165E6291 (ENSSubdomainRegistry — Status)</li>
+        </ul>
+
+
+        <ul>
+            <li>0x112234455C3a32FD11230C42E7Bccd4A84e02010 (ENS).</li>
+        </ul>
+
+        <Button size="large" className={classNames(classes.button)} onClick={toggleSearch}>
+            <div style={buttonText}>Let's Go</div>
+        </Button>
+    </div>
+);
+
+export default withStyles(styles)(Terms);
--- a/app/dapp.css
+++ b/app/dapp.css
@ -1,5 +1,6 @@
 body {
  font-family: 'Roboto', sans-serif;
+  margin: 0;
 }

 .accounts {
--- a/app/ui/components/MobileSearch.js
+++ b/app/ui/components/MobileSearch.js
@ -13,6 +13,7 @@ const searchWrapper = {
  alignItems: 'center',
  justifyContent: 'flex-start',
  paddingLeft: '11px',
+  boxSizing: 'border-box',
 };

 const pasteStyle = {
@ -23,7 +24,7 @@ const pasteStyle = {

 const MobileInput = styled.input`
  display: block;
-  border-radius: 4px;
+  border-radius: 0;
  background-color: #eef2f5;
  font-size: 16px;
  border: none;