Better terms and conditions

app/actions/accounts.js

@@ -30,9 +30,9 @@ export const checkAndDispatchStatusContactCode = dispatch => {
           dispatch(receiveStatusContactCode(data));
         })
         .catch(err => {
-          console.log('Error:', err);
+          console.warn('Error:', err);
         })
-}
+};
 
 export const fetchAndDispatchSNTAllowance = dispatch => {
   const { methods: { allowance } } = TestToken;
@@ -43,4 +43,4 @@ export const fetchAndDispatchSNTAllowance = dispatch => {
     .then(allowance => {
       dispatch(receiveSntAllowance(allowance))
     })
-}
+};

app/components/ens/DisplayBox.js

@@ -23,11 +23,11 @@ const DisplayBox = styled.div`
 `;
 
 const WrappedDisplayBox = ({displayType, pubKey, getStatusContactCode}) => (
-  <div onClick={() => getStatusContactCode(displayType, pubKey)}>
+  <div>
     <DisplayLabel>
       {displayType}
     </DisplayLabel>
-    <DisplayBox>
+    <DisplayBox onClick={() => getStatusContactCode(displayType, pubKey)}>
       <div style={{margin: '16px'}}>
         <Typography type='body1'>{pubKey}</Typography>
       </div>

app/components/ens/terms.css

@@ -1,10 +0,0 @@
-.ens-terms__title {
-    padding: 40px 24px;
-    background: #EEF2F5;
-    border-radius: 4px;
-    margin-bottom: 30px;
-}
-
-.ens-terms li {
-
-}

app/components/ens/terms.js

@@ -1,55 +1,95 @@
 import React from 'react';
 import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
+import {withStyles} from '@material-ui/core/styles';
 import Dialog from '@material-ui/core/Dialog';
+import {Button} from '../../ui/components';
+import styled from "styled-components";
 
-import './terms.css';
+const TermsContainer = styled.div`
+  word-wrap: break-word;
+`;
 
-const styles = theme => ({
-  button: {
-    margin: theme.spacing.unit,
-    borderRadius: '4px',
-    backgroundColor: 'rgba(67, 96, 223, 0.1)',
+const TermsDescription = styled.div`
+  padding: 24px;
+  font-size: 14px;
+  line-height: 20.5px;
+`;
+
+const InfoHeading = styled.h2`
+  line-height: 26px;
+  font-size: 22px;
+  text-align: center;
+  letter-spacing: -0.275px;
+  padding: 40px 24px;
+  background: #EEF2F5;
+  margin: 0;
+  color: #000000;
+`;
+
+const ListContainer = styled.ul`
+  padding-left: 16px;
+
+  li {
+    margin-bottom: 16px;
+    padding-left: 12px;
   }
-});
+`;
+
+const StyledButton = styled(Button)`
+  background-color: rgba(67, 96, 223, 0.1);
+  
+  div {
+    color: #4360df;
+    margin: 0 20px;
+    font-weight: 400;
+    text-transform: uppercase;
+  }
+`;
 
 const buttonText = { color: '#4360df', margin: '0 20px', fontWeight: 300 };
 
-
 const Terms = ({ classes, open, onSubmit }) => (
-  <Dialog
-    fullScreen
-    open={open}
-  >
-    <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>
+  <Dialog fullScreen open={open}>
+    <TermsContainer>
+      <InfoHeading className="ens-terms__title">Terms of name registration</InfoHeading>
 
-      <p>These terms are guaranteed by the smart contract logic at addresses:</p>
+      <TermsDescription>
+        <ListContainer>
+          <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>
+        </ListContainer>
 
-      <ul>
-        <li>0xb1C47B61CDaeee3fA85Fe8B93FcE6311165E6291 (ENSSubdomainRegistry — Status)</li>
-      </ul>
+        <p>These terms are guaranteed by the smart contract logic at addresses:</p>
 
+        <ListContainer>
+          <li>0xb1C47B61CDaeee3fA85Fe8B93FcE6311165E6291 (ENSSubdomainRegistry — Status)</li>
+        </ListContainer>
 
-      <ul>
-        <li>0x112234455C3a32FD11230C42E7Bccd4A84e02010 (ENS).</li>
-      </ul>
+        <ListContainer>
+          <li>0x112234455C3a32FD11230C42E7Bccd4A84e02010 (ENS).</li>
+        </ListContainer>
 
-      <Button type="submit" size="large" className={classNames(classes.button)} onClick={onSubmit}>
-        <div style={buttonText}>Let's Go</div>
-      </Button>
-    </div>
+        <div style={{textAlign: 'center'}}>
+          <StyledButton type="submit" onClick={onSubmit}>
+            <div>Let's Go</div>
+          </StyledButton>
+        </div>
+      </TermsDescription>
+    </TermsContainer>
   </Dialog>
 );
 
-export default withStyles(styles)(Terms);
+export default Terms;

app/dapp.js

@@ -60,7 +60,7 @@ class App extends React.Component {
     const { admin, network } = this.state;
 
     return (
-      <HashRouter>
+      <HashRouter hashType="noslash">
         <div>
           <Hidden mdDown>
             <StatusOptimized/>

app/reducers/accounts.js

@@ -56,12 +56,12 @@ export default function(state = { loading: true, accounts: [] }, action) {
     }
   }
   case types.RECEIVE_STATUS_CONTACT_CODE: {
-    const { statusContactCode } = action.payload
-    return { ...state, statusContactCode }
+    const { statusContactCode } = action.payload;
+    return { ...state, statusContactCode };
   }
   case types.RECEIVE_SNT_ALLOWANCE: {
-    const { SNTAllowance } = action.payload
-    return { ...state, SNTAllowance }
+    const { SNTAllowance } = action.payload;
+    return { ...state, SNTAllowance };
   }
   default:
     return state;