merge master into jr-reverse-caching

js/src/ui/Actionbar/Search/search.js

@@ -71,15 +71,15 @@ export default class ActionbarSearch extends Component {
         key='searchAccount'>
         <div className={ inputContainerClasses.join(' ') }>
           <InputChip
+            addOnBlur
             className={ styles.input }
             hint='Enter search input...'
+            ref='inputChip'
             tokens={ tokens }
 
             onBlur={ this.handleSearchBlur }
             onInputChange={ this.handleInputChange }
             onTokensChange={ this.handleTokensChange }
-
-            addOnBlur
           />
         </div>
 
@@ -118,6 +118,10 @@ export default class ActionbarSearch extends Component {
   handleSearchClick = () => {
     const { showSearch } = this.state;
 
+    if (!showSearch) {
+      this.refs.inputChip.focus();
+    }
+
     this.handleOpenSearch(!showSearch);
   }
 

js/src/ui/Actionbar/actionbar.css

@@ -27,13 +27,14 @@
 }
 
 .toolbuttons {
-}
+  overflow: hidden;
 
-.toolbuttons button {
-  margin: 10px 0 10px 16px !important;
-  color: white !important;
-}
+  button {
+    margin: 10px 0 10px 16px !important;
+    color: white !important;
+  }
 
-.toolbuttons svg {
-  fill: white !important;
+  svg {
+    fill: white !important;
+  }
 }

js/src/ui/Balance/balance.css

@@ -23,7 +23,7 @@
 
 .empty {
   line-height: 24px;
-  margin: 0.75em 0.5em 0 0;
+  margin: 0 0.5em 0 0;
   opacity: 0.25;
 }
 

js/src/ui/Container/Title/title.css

@@ -14,7 +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/>.
 */
-.byline {
+.byline, .description {
   overflow: hidden;
   position: relative;
   line-height: 1.2em;
@@ -31,6 +31,11 @@
   }
 }
 
+.description {
+  font-size: 0.75em;
+  margin: 0.5em 0 0;
+}
+
 .title {
   text-transform: uppercase;
   margin: 0;

js/src/ui/Container/Title/title.js

@@ -22,13 +22,14 @@ import styles from './title.css';
 
 export default class Title extends Component {
   static propTypes = {
+    byline: nodeOrStringProptype(),
     className: PropTypes.string,
-    title: nodeOrStringProptype(),
-    byline: nodeOrStringProptype()
+    description: nodeOrStringProptype(),
+    title: nodeOrStringProptype()
   }
 
   render () {
-    const { className, title, byline } = this.props;
+    const { byline, className, title } = this.props;
 
     const byLine = typeof byline === 'string'
       ? (
@@ -46,6 +47,29 @@ export default class Title extends Component {
         <div className={ styles.byline }>
           { byLine }
         </div>
+        { this.renderDescription() }
+      </div>
+    );
+  }
+
+  renderDescription () {
+    const { description } = this.props;
+
+    if (!description) {
+      return null;
+    }
+
+    const desc = typeof description === 'string'
+      ? (
+        <span title={ description }>
+          { description }
+        </span>
+      )
+      : description;
+
+    return (
+      <div className={ styles.description }>
+        { desc }
       </div>
     );
   }

js/src/ui/Form/InputChip/inputChip.js

@@ -170,6 +170,10 @@ export default class InputChip extends Component {
       .filter(v => v !== value));
 
     this.handleTokensChange(newTokens);
+    this.focus();
+  }
+
+  focus = () => {
     this.refs.chipInput.focus();
   }
 

js/src/ui/MethodDecoding/methodDecoding.css

@@ -38,6 +38,10 @@
   justify-content: center;
 }
 
+.details {
+  line-height: 1.75em;
+}
+
 .details,
 .gasDetails {
   color: #aaa;

js/src/ui/MethodDecoding/methodDecoding.js

@@ -196,7 +196,7 @@ class MethodDecoding extends Component {
       : text.slice(0, 50) + '...';
 
     return (
-      <div>
+      <div className={ styles.details }>
         <span>with the </span>
         <span
           onClick={ this.toggleInputType }