Apply UI PRs after master merge (#2690)

js/src/index.js

@@ -37,7 +37,7 @@ import ContractInstances from './contracts';
 
 import { initStore } from './redux';
 import { ContextProvider, muiTheme } from './ui';
-import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, Dapp, Dapps, Settings, SettingsBackground, SettingsViews, Signer, Status } from './views';
+import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, Dapp, Dapps, Settings, SettingsBackground, SettingsProxy, SettingsViews, Signer, Status } from './views';
 
 import './environment';
 
@@ -79,6 +79,7 @@ ReactDOM.render(
         <Route path='contract/:address' component={ Contract } />
         <Route path='settings' component={ Settings }>
           <Route path='background' component={ SettingsBackground } />
+          <Route path='proxy' component={ SettingsProxy } />
           <Route path='views' component={ SettingsViews } />
         </Route>
         <Route path='signer' component={ Signer } />

js/src/ui/Modal/modal.css

@@ -35,13 +35,11 @@
 
 .content {
   transform: translate(0px, 0px) !important;
+  transition: none !important;
 }
 
 .content>div {
   background: rgba(0, 0, 0, 0.5) !important;
-}
-
-.content div {
   transition: none !important;
 }
 

js/src/views/Connection/connection.css

@@ -88,8 +88,9 @@
 }
 
 .console {
-  font-family: 'Roboto Mono';
+  font-family: 'Roboto Mono', monospace;
   background: rgba(0, 0, 0, 0.25);
+  font-size: 16px;
   padding: 0 0.25em;
 }
 

js/src/views/Settings/Background/background.js

@@ -57,8 +57,8 @@ class Background extends Component {
         <ContainerTitle title='Background Pattern' />
         <div className={ layout.layout }>
           <div className={ layout.overview }>
-            <p><strong>The background pattern you can see right now is unique to your Parity installation. It will change every time you create a new Signer token.</strong> This is so that decentralized applications cannot pretend to be trustworthy.</p>
-            <p>Pick a pattern you like and memorize it. This Pattern will always be shown from now on, unless you clear your browser's cache or use a new Signer token.</p>
+            <div>The background pattern you can see right now is unique to your Parity installation. It will change every time you create a new Signer token. This is so that decentralized applications cannot pretend to be trustworthy.</div>
+            <div>Pick a pattern you like and memorize it. This Pattern will always be shown from now on, unless you clear your browser cache or use a new Signer token.</div>
           </div>
           <div className={ layout.details }>
             <div className={ styles.bgcontainer }>

js/src/views/Settings/Proxy/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './proxy';

js/src/views/Settings/Proxy/proxy.css

@@ -0,0 +1,24 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.details {
+  line-height: 1.5em;
+}
+
+.details div+div {
+  padding-top: 1.25em;
+}

js/src/views/Settings/Proxy/proxy.js

@@ -0,0 +1,46 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component } from 'react';
+
+import { Container, ContainerTitle } from '../../../ui';
+
+import layout from '../layout.css';
+import styles from './proxy.css';
+
+export default class Proxy extends Component {
+  render () {
+    const proxyurl = 'http://127.0.0.1:8080/proxy/proxy.pac';
+
+    return (
+      <Container>
+        <ContainerTitle title='Proxy' />
+        <div className={ layout.layout }>
+          <div className={ layout.overview }>
+            <div>The proxy setup allows you to access Parity and all associated decentralized applications via memororable addresses.</div>
+          </div>
+          <div className={ layout.details }>
+            <div className={ styles.details }>
+              <div>Instead of accessing Parity via the IP address and port, you will be able to access it via the .parity subdomain, by visiting <span className={ layout.console }>http://home.parity/</span>. To setup subdomain-based routing, you need to add the relevant proxy entries to your browser,</div>
+              <div className={ layout.center }><a href={ proxyurl } target='_blank'>{ proxyurl }</a></div>
+              <div>To learn how to configure the proxy, instructions are provided for <a href='https://blogs.msdn.microsoft.com/ieinternals/2013/10/11/understanding-web-proxy-configuration/' target='_blank'>Windows</a>, <a href='https://support.apple.com/kb/PH18553?locale=en_US' target='_blank'>Max OS X</a> or <a href='http://xmodulo.com/how-to-set-up-proxy-auto-config-on-ubuntu-desktop.html' target='_blank'>Ubuntu</a>.</div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    );
+  }
+}

js/src/views/Settings/index.js

@@ -17,12 +17,14 @@
 import settingsReducer from './reducers';
 import { toggleView, updateBackground } from './actions';
 import SettingsBackground from './Background';
+import SettingsProxy from './Proxy';
 import SettingsViews, { defaultViews } from './Views';
 
 export default from './settings';
 
 export {
   SettingsBackground,
+  SettingsProxy,
   SettingsViews,
   defaultViews,
   settingsReducer,

js/src/views/Settings/layout.css

@@ -41,6 +41,10 @@
   opacity: 0.5;
 }
 
+.overview div {
+  line-height: 1.5em;
+}
+
 .overview>div+div {
   padding-top: 1.25em;
 }
@@ -52,3 +56,14 @@
   width: calc(100% / 12 * 8);
   padding-left: 3em;
 }
+
+.console {
+  font-family: 'Roboto Mono', monospace;
+  background: rgba(255, 255, 255, 0.1);
+  font-size: 16px;
+  padding: 0 0.25em;
+}
+
+.center {
+  text-align: center;
+}

js/src/views/Settings/settings.css

@@ -34,6 +34,7 @@
 .tabactive {
   padding: 16px 2em !important;
   line-height: 24px !important;
+  width: auto !important;
 }
 
 .tabactive {

js/src/views/Settings/settings.js

@@ -18,6 +18,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import { Tab, Tabs } from 'material-ui';
+import ActionSettingsEthernet from 'material-ui/svg-icons/action/settings-ethernet';
 import ImageBlurOn from 'material-ui/svg-icons/image/blur-on';
 import ImageRemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye';
 
@@ -51,6 +52,20 @@ export default class Settings extends Component {
 
   renderTabs () {
     const hash = (window.location.hash || '').split('?')[0].split('/')[2];
+    const isProxied = window.location.hostname.indexOf('.parity') !== -1;
+    let proxy = null;
+
+    if (!isProxied) {
+      proxy = (
+        <Tab
+          className={ hash === 'proxy' ? styles.tabactive : styles.tab }
+          value='proxy'
+          key='proxy'
+          icon={ <ActionSettingsEthernet /> }
+          label={ <div className={ styles.menu }>proxy</div> }
+          onActive={ this.onActivate('proxy') } />
+      );
+    }
 
     return (
       <Tabs className={ styles.tabs } value={ hash }>
@@ -68,6 +83,7 @@ export default class Settings extends Component {
           icon={ <ImageBlurOn /> }
           label={ <div className={ styles.menu }>background</div> }
           onActive={ this.onActivate('background') } />
+        { proxy }
       </Tabs>
     );
   }

js/src/views/Signer/components/TransactionPendingForm/TransactionPendingFormReject/TransactionPendingFormReject.js

@@ -18,35 +18,16 @@ import React, { Component, PropTypes } from 'react';
 
 import RaisedButton from 'material-ui/RaisedButton';
 
-import { REJECT_COUNTER_TIME } from '../../constants/constants';
 import styles from './TransactionPendingFormReject.css';
 
 export default class TransactionPendingFormReject extends Component {
 
   static propTypes = {
     onReject: PropTypes.func.isRequired,
-    className: PropTypes.string,
-    rejectCounterTime: PropTypes.number
+    className: PropTypes.string
   };
 
-  static defaultProps = {
-    rejectCounterTime: REJECT_COUNTER_TIME
-  };
-
-  state = {
-    rejectCounter: this.props.rejectCounterTime
-  }
-
-  componentWillMount () {
-    this.onInitCounter();
-  }
-
-  componentWillUnmount () {
-    this.onResetCounter();
-  }
-
   render () {
-    const { rejectCounter } = this.state;
     const { onReject } = this.props;
 
     return (
@@ -58,36 +39,10 @@ export default class TransactionPendingFormReject extends Component {
         <RaisedButton
           onClick={ onReject }
           className={ styles.rejectButton }
-          disabled={ rejectCounter > 0 }
           fullWidth
-          label={ `Reject Transaction ${this.renderCounter()}` }
+          label={ 'Reject Transaction' }
         />
       </div>
     );
   }
-
-  renderCounter () {
-    const { rejectCounter } = this.state;
-    if (!rejectCounter) {
-      return '';
-    }
-    return `(${rejectCounter})`;
-  }
-
-  onInitCounter () {
-    this.rejectInterval = setInterval(() => {
-      let { rejectCounter } = this.state;
-      if (rejectCounter === 0) {
-        return clearInterval(this.rejectInterval);
-      }
-      this.setState({ rejectCounter: rejectCounter - 1 });
-    }, 1000);
-  }
-
-  onResetCounter () {
-    clearInterval(this.rejectInterval);
-    this.setState({
-      rejectCounter: this.props.rejectCounterTime
-    });
-  }
 }

js/src/views/Signer/components/constants/constants.js

@@ -14,11 +14,6 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-// after user clicks 'reject' for the first time,
-// a second reject button is rendered and disabled
-// for a few seconds to avoid accidential double clicks
-export const REJECT_COUNTER_TIME = 3;
-
 // links to chain explorers
 export const BASE_LINK_ACCOUNT_MORDEN = 'https://testnet.etherscan.io/address/';
 export const BASE_LINK_ACCOUNT_HOMESTEAD = 'https://etherscan.io/address/';

js/src/views/index.js

@@ -24,7 +24,7 @@ import Contracts from './Contracts';
 import Dapp from './Dapp';
 import Dapps from './Dapps';
 import ParityBar from './ParityBar';
-import Settings, { SettingsBackground, SettingsViews } from './Settings';
+import Settings, { SettingsBackground, SettingsProxy, SettingsViews } from './Settings';
 import Signer from './Signer';
 import Status from './Status';
 
@@ -41,6 +41,7 @@ export {
   ParityBar,
   Settings,
   SettingsBackground,
+  SettingsProxy,
   SettingsViews,
   Signer,
   Status