Align list displays with SectionList (UI consistency)

js/src/index.ejs

@@ -6,12 +6,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <style>
+      html {
+        background: white;
+      }
+
       html, body, #container {
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
-        background: white;
         font-family: 'Roboto', sans-serif;
         font-size: 16px;
         font-weight: 300;

js/src/modals/AddDapps/addDapps.css

@@ -19,10 +19,6 @@
   flex-direction: column;
 }
 
-.container {
-  overflow-y: auto;
-}
-
 .description {
   margin-top: .5em !important;
 }

js/src/modals/AddDapps/addDapps.js

@@ -48,45 +48,43 @@ export default class AddDapps extends Component {
           />
         }
       >
-        <div className={ styles.container }>
-          <div className={ styles.warning } />
-          {
-            this.renderList(store.sortedLocal, store.displayApps,
-              <FormattedMessage
-                id='dapps.add.local.label'
-                defaultMessage='Applications locally available'
-              />,
-              <FormattedMessage
-                id='dapps.add.local.desc'
-                defaultMessage='All applications installed locally on the machine by the user for access by the Parity client.'
-              />
-            )
-          }
-          {
-            this.renderList(store.sortedBuiltin, store.displayApps,
-              <FormattedMessage
-                id='dapps.add.builtin.label'
-                defaultMessage='Applications bundled with Parity'
-              />,
-              <FormattedMessage
-                id='dapps.add.builtin.desc'
-                defaultMessage='Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.'
-              />
-            )
-          }
-          {
-            this.renderList(store.sortedNetwork, store.displayApps,
-              <FormattedMessage
-                id='dapps.add.network.label'
-                defaultMessage='Applications on the global network'
-              />,
-              <FormattedMessage
-                id='dapps.add.network.desc'
-                defaultMessage='These applications are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.'
-              />
-            )
-          }
-        </div>
+        <div className={ styles.warning } />
+        {
+          this.renderList(store.sortedLocal, store.displayApps,
+            <FormattedMessage
+              id='dapps.add.local.label'
+              defaultMessage='Applications locally available'
+            />,
+            <FormattedMessage
+              id='dapps.add.local.desc'
+              defaultMessage='All applications installed locally on the machine by the user for access by the Parity client.'
+            />
+          )
+        }
+        {
+          this.renderList(store.sortedBuiltin, store.displayApps,
+            <FormattedMessage
+              id='dapps.add.builtin.label'
+              defaultMessage='Applications bundled with Parity'
+            />,
+            <FormattedMessage
+              id='dapps.add.builtin.desc'
+              defaultMessage='Experimental applications developed by the Parity team to show off dapp capabilities, integration, experimental features and to control certain network-wide client behaviour.'
+            />
+          )
+        }
+        {
+          this.renderList(store.sortedNetwork, store.displayApps,
+            <FormattedMessage
+              id='dapps.add.network.label'
+              defaultMessage='Applications on the global network'
+            />,
+            <FormattedMessage
+              id='dapps.add.network.desc'
+              defaultMessage='These applications are not affiliated with Parity nor are they published by Parity. Each remain under the control of their respective authors. Please ensure that you understand the goals for each application before interacting.'
+            />
+          )
+        }
       </Portal>
     );
   }

js/src/ui/Balance/balance.css

@@ -14,23 +14,30 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 .balances {
   display: flex;
   flex-wrap: wrap;
   margin: 1em 0 0 0;
   vertical-align: top;
 }
 
+.balance,
+.empty {
+  margin: 0.75em 0.5em 0 0;
+}
+
 .empty {
   line-height: 24px;
-  margin: 0 0.5em 0 0;
   opacity: 0.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .balance {
   background: rgba(255, 255, 255, 0.07);
   border-radius: 16px;
-  margin: 0.75em 0.5em 0 0;
   max-height: 24px;
   max-width: 100%;
   display: flex;

js/src/ui/Certifications/certifications.js

@@ -27,18 +27,19 @@ class Certifications extends Component {
   static propTypes = {
     address: PropTypes.string.isRequired,
     certifications: PropTypes.array.isRequired,
+    className: PropTypes.string,
     dappsUrl: PropTypes.string.isRequired
   }
 
   render () {
-    const { certifications } = this.props;
+    const { certifications, className } = this.props;
 
     if (certifications.length === 0) {
       return null;
     }
 
     return (
-      <div className={ styles.certifications }>
+      <div className={ [styles.certifications, className].join(' ') }>
         { certifications.map(this.renderCertification) }
       </div>
     );

js/src/ui/Container/container.css

@@ -25,21 +25,24 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
   height: 100%;
   padding: 0em;
   position: relative;
-  transition: $transitionAll;
+  /*transform: translateZ(0);
+  transition: $transitionAll;*/
   width: 100%;
 
   .hoverOverlay {
     background: $background;
     left: 0;
     margin-top: -1.5em;
+    margin-bottom: 3em;
     opacity: inherit;
     padding: 0 1.5em 1.5em 1.5em;
     position: absolute;
     right: 0;
     top: 100%;
-    transition: $transitionAll;
-    transform: scale(0.5, 0);
-    transform-origin: top center;
+    /*transition: $transitionAll;*/
+    opacity: 0;
+    /*transform: scale(0.5, 0);
+    transform-origin: top center;*/
     z-index: 100;
   }
 
@@ -48,7 +51,8 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
 
     .hoverOverlay {
       background: $backgroundHover;
-      transform: scale(1, 1);
+      /*transform: scale(1, 1);*/
+      opacity: 1;
     }
   }
 }
@@ -74,3 +78,8 @@ $transitionAll: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
 .light .padded {
   background: rgba(0, 0, 0, 0.5) !important;
 }
+
+.link {
+  width: 100%;
+  height: 100%;
+}

js/src/ui/Container/container.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
 import { Card } from 'material-ui/Card';
 
 import { nodeOrStringProptype } from '~/util/proptypes';
@@ -30,20 +31,35 @@ export default class Container extends Component {
     compact: PropTypes.bool,
     hover: PropTypes.node,
     light: PropTypes.bool,
+    link: PropTypes.string,
     onClick: PropTypes.func,
     style: PropTypes.object,
     tabIndex: PropTypes.number,
     title: nodeOrStringProptype()
   }
 
   render () {
-    const { children, className, compact, light, onClick, style, tabIndex } = this.props;
+    const { children, className, compact, light, link, onClick, style, tabIndex } = this.props;
     const props = {};
 
     if (Number.isInteger(tabIndex)) {
       props.tabIndex = tabIndex;
     }
 
+    const card = (
+      <Card
+        className={
+          compact
+            ? styles.compact
+            : styles.padded
+        }
+        onClick={ onClick }
+      >
+        { this.renderTitle() }
+        { children }
+      </Card>
+    );
+
     return (
       <div
         className={
@@ -58,17 +74,18 @@ export default class Container extends Component {
         style={ style }
         { ...props }
       >
-        <Card
-          className={
-            compact
-              ? styles.compact
-              : styles.padded
-          }
-          onClick={ onClick }
-        >
-          { this.renderTitle() }
-          { children }
-        </Card>
+        {
+          link
+            ? (
+              <Link
+                className={ styles.link }
+                to={ link }
+              >
+                { card }
+              </Link>
+            )
+            : card
+        }
         { this.renderHover() }
       </div>
     );

js/src/ui/DappCard/dappCard.css

@@ -18,6 +18,12 @@
 .container {
   height: 100%;
   position: relative;
+
+  &:not(:hover) {
+    .tags {
+      display: none;
+    }
+  }
 }
 
 .image {
@@ -26,16 +32,20 @@
   top: 1.5em;
 }
 
+.author,
 .description {
   margin-left: 72px;
 }
 
 .title {
-  mragin-bottom: 0.5em;
 }
 
-.author, .version {
+.titleLink {
+  color: rgb(0, 151, 167);
+}
+
+.author {
   font-size: 0.75em;
   opacity: 0.5;
-  margin-top: 0.5em;
+  margin-top: 1em;
 }