[beta] UI backports (#4818)

* Update the key (#4817)

* Adjust selection colours/display (#4811)

* Adjust selection colours to match with mui

* allow -> disable (simplify selections)

* Only use top-border

* Overlay selection line

* Slightly more muted unselected

* Restore address icon

* Fix default values for contract queries

js/src/ui/AccountCard/accountCard.css

@@ -110,12 +110,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 0.9em;
-
-    .address {
-      &:hover {
-        cursor: text;
-      }
-    }
   }
 
   .accountName {

js/src/ui/AccountCard/accountCard.js

@@ -28,15 +28,15 @@ import styles from './accountCard.css';
 export default class AccountCard extends Component {
   static propTypes = {
     account: PropTypes.object.isRequired,
-    allowAddressClick: PropTypes.bool,
     balance: PropTypes.object,
     className: PropTypes.string,
+    disableAddressClick: PropTypes.bool,
     onClick: PropTypes.func,
     onFocus: PropTypes.func
   };
 
   static defaultProps = {
-    allowAddressClick: false
+    disableAddressClick: false
   };
 
   state = {
@@ -138,14 +138,14 @@ export default class AccountCard extends Component {
   }
 
   handleAddressClick = (event) => {
-    const { allowAddressClick } = this.props;
+    const { disableAddressClick } = this.props;
 
-    // Don't stop the event if address click is allowed
+    // Stop the event if address click is disallowed
-    if (allowAddressClick) {
+    if (disableAddressClick) {
-      return this.onClick(event);
+      return this.preventEvent(event);
     }
 
-    return this.preventEvent(event);
+    return this.onClick(event);
   }
 
   handleKeyDown = (event) => {

js/src/ui/Form/AddressSelect/addressSelect.js

@@ -348,7 +348,6 @@ class AddressSelect extends Component {
     return (
       <AccountCard
         account={ account }
-        allowAddressClick
         balance={ balance }
         className={ styles.account }
         key={ `account_${index}` }

js/src/ui/SelectionList/selectionList.css

@@ -16,7 +16,6 @@
 */
 
 .item {
-  border: 2px solid transparent;
   cursor: pointer;
   display: flex;
   flex: 1;
@@ -25,7 +24,6 @@
   width: 100%;
 
   &:hover {
-    border-color: transparent;
     filter: none;
     opacity: 1;
   }
@@ -35,7 +33,7 @@
     width: 100%;
 
     &:hover {
-      background-color: rgba(255, 255, 255, 0.5);
+      background-color: rgba(255, 255, 255, 0.15);
     }
   }
 
@@ -68,15 +66,24 @@
 }
 
 .selected {
-  border-color: rgba(255, 255, 255, 0.25);
   filter: none;
 
-  &.default {
+  &::after {
-    border-color: rgba(255, 255, 255, 0.75);
+    background: rgb(0, 151, 167);
+    content: '';
+    height: 4px;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  &.default::after {
+    background: rgb(167, 151, 0);
   }
 }
 
 .unselected {
-  filter: grayscale(10%);
+  filter: grayscale(50%);
   opacity: 0.75;
 }

js/src/views/Contract/Queries/inputQuery.js

@@ -14,6 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import { isEqual } from 'lodash';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import LinearProgress from 'material-ui/LinearProgress';
@@ -24,6 +25,7 @@ import { bindActionCreators } from 'redux';
 import { newError } from '~/redux/actions';
 import { Button, TypedInput } from '~/ui';
 import { arrayOrObjectProptype } from '~/util/proptypes';
+import { parseAbiType } from '~/util/abi';
 
 import styles from './queries.css';
 
@@ -44,11 +46,35 @@ class InputQuery extends Component {
   };
 
   state = {
+    inputs: [],
     isValid: true,
     results: [],
     values: {}
   };
 
+  componentWillMount () {
+    this.parseInputs();
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const prevInputTypes = this.props.inputs.map((input) => input.type);
+    const nextInputTypes = nextProps.inputs.map((input) => input.type);
+
+    if (!isEqual(prevInputTypes, nextInputTypes)) {
+      this.parseInputs(nextProps);
+    }
+  }
+
+  parseInputs (props = this.props) {
+    const inputs = props.inputs.map((input) => ({ ...input, parsed: parseAbiType(input.type) }));
+    const values = inputs.reduce((values, input, index) => {
+      values[index] = input.parsed.default;
+      return values;
+    }, {});
+
+    this.setState({ inputs, values });
+  }
+
   render () {
     const { name, className } = this.props;
 
@@ -64,10 +90,9 @@ class InputQuery extends Component {
   }
 
   renderContent () {
-    const { inputs } = this.props;
+    const { inputs } = this.state;
 
     const { isValid } = this.state;
-
     const inputsFields = inputs
       .map((input, index) => this.renderInput(input, index));
 
@@ -190,15 +215,15 @@ class InputQuery extends Component {
   }
 
   onClick = () => {
-    const { values } = this.state;
+    const { inputs, values } = this.state;
-    const { inputs, contract, name, outputs, signature } = this.props;
+    const { contract, name, outputs, signature } = this.props;
 
     this.setState({
       isLoading: true,
       results: []
     });
 
-    const inputValues = inputs.map((input, index) => values[index] || '');
+    const inputValues = inputs.map((input, index) => values[index]);
 
     contract
       .instance[signature]