Fix dappIcon & Fix Signer Pending (#7338)

* Move signerPending inside this repo

* Use latest version of dappIcon

* Tell babel to ignore node_modules in tests

js/src/Dapps/DappCard/dappCard.css

@@ -47,14 +47,8 @@
     }
 
     .image {
-      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
-      border-radius: 0.125em;
-      display: block;
-      width: 2em;
-      height: 2em;
       margin-left: auto;
       margin-right: auto;
-      padding: 0.125em;
     }
   }
 }

js/src/ParityBar/SignerPending/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (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 './signerPending';

js/src/ParityBar/SignerPending/signerPending.js

@@ -0,0 +1,52 @@
+// Copyright 2015-2017 Parity Technologies (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 from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+
+import Badge from '@parity/ui/lib/Badge';
+
+import Store from '../../Signer/pendingStore';
+
+function SignerPending ({ className, onClick }, { api }) {
+  const store = Store.get(api);
+  const pendingCount = store.pending.length;
+
+  if (!pendingCount) {
+    return null;
+  }
+
+  return (
+    <Badge
+      color='red'
+      className={ className }
+      onClick={ onClick }
+      value={ pendingCount }
+    />
+  );
+}
+
+SignerPending.contextTypes = {
+  api: PropTypes.object.isRequired
+};
+
+SignerPending.propTypes = {
+  className: PropTypes.string,
+  onClick: PropTypes.func
+};
+
+export default observer(SignerPending);

js/src/ParityBar/parityBar.js

@@ -30,11 +30,11 @@ import ContainerTitle from '@parity/ui/lib/Container/Title';
 import IdentityIcon from '@parity/ui/lib/IdentityIcon';
 import GradientBg from '@parity/ui/lib/GradientBg';
 import SelectionList from '@parity/ui/lib/SelectionList';
-import SignerPending from '@parity/ui/lib/SignerPending';
 import { CancelIcon } from '@parity/ui/lib/Icons';
 
 import DappsStore from '@parity/shared/lib/mobx/dappsStore';
 import Signer from '../Signer/Embedded';
+import SignerPending from './SignerPending';
 
 import AccountStore from './accountStore';
 import Store, { DISPLAY_ACCOUNTS, DISPLAY_SIGNER } from './store';
@@ -151,8 +151,8 @@ class ParityBar extends Component {
     const { moving, position } = this.state;
 
     const containerClassNames = this.store.isOpen
-      ? [ styles.overlay ]
-      : [ styles.bar ];
+      ? [styles.overlay]
+      : [styles.bar];
 
     if (!this.store.isOpen && moving) {
       containerClassNames.push(styles.moving);
@@ -255,13 +255,13 @@ class ParityBar extends Component {
           label={ this.renderSignerLabel() }
           onClick={ this.toggleSignerDisplay }
         />
-        { this.renderDrag() }
+        {this.renderDrag()}
       </GradientBg>
     );
   }
 
   renderDrag () {
-    const dragButtonClasses = [ styles.dragButton ];
+    const dragButtonClasses = [styles.dragButton];
 
     if (this.state.moving) {
       dragButtonClasses.push(styles.moving);
@@ -286,7 +286,7 @@ class ParityBar extends Component {
     if (!externalLink) {
       return (
         <Link to='/'>
-          { button }
+          {button}
         </Link>
       );
     }
@@ -296,7 +296,7 @@ class ParityBar extends Component {
         href={ externalLink }
         target='_parent'
       >
-        { button }
+        {button}
       </a>
     );
   }
@@ -380,9 +380,9 @@ class ParityBar extends Component {
     return (
       <div className={ styles.label }>
         <div className={ styles.labelText }>
-          { name }
+          {name}
         </div>
-        { bubble }
+        {bubble}
       </div>
     );
   }