Merge branch 'ui-2-styling' into ui-2

js/src/ui/AccountCard/accountCard.css

@@ -17,7 +17,6 @@
 
 .account {
   align-items: stretch;
-  background-color: rgba(0, 0, 0, 0.8);
   display: flex;
   flex-direction: row;
   height: 100%;
@@ -32,7 +31,6 @@
 
   &:focus {
     transform: scale(0.99);
-    background-color: rgba(0, 0, 0, 0.6);
   }
 
   &:first-child {
@@ -45,7 +43,6 @@
 
   &:hover {
     cursor: pointer;
-    background-color: rgba(0, 0, 0, 0.4);
   }
 }
 

js/src/ui/AccountCard/accountCard.js

@@ -19,6 +19,7 @@ import ReactDOM from 'react-dom';
 import keycode from 'keycode';
 
 import Balance from '~/ui/Balance';
+import Container from '~/ui/Container';
 import IdentityIcon from '~/ui/IdentityIcon';
 import IdentityName from '~/ui/IdentityName';
 import Tags from '~/ui/Tags';
@@ -60,7 +61,7 @@ export default class AccountCard extends Component {
       : {};
 
     return (
-      <div
+      <Container
         key={ address }
         className={ classes.join(' ') }
         onClick={ this.onClick }
@@ -108,7 +109,7 @@ export default class AccountCard extends Component {
           ) : null
         }
 
-      </div>
+      </Container>
     );
   }
 

js/src/ui/Container/container.js

@@ -35,13 +35,14 @@ export default class Container extends Component {
     light: PropTypes.bool,
     link: PropTypes.string,
     onClick: PropTypes.func,
+    onFocus: PropTypes.func,
     style: PropTypes.object,
     tabIndex: PropTypes.number,
     title: nodeOrStringProptype()
   }
 
   render () {
-    const { children, className, compact, light, link, onClick, style, tabIndex } = this.props;
+    const { children, className, compact, light, link, onClick, onFocus, style, tabIndex } = this.props;
     const props = {};
 
     if (Number.isInteger(tabIndex)) {
@@ -56,6 +57,7 @@ export default class Container extends Component {
             : styles.padded
         }
         onClick={ onClick }
+        onFocus={ onFocus }
       >
         { this.renderTitle() }
         { children }

js/src/ui/Portal/portal.css

@@ -34,7 +34,7 @@ $popoverRight: $modalMargin;
 $popoverTop: 20vh;
 $popoverZ: 3600;
 
-$backgroundFade: rgba(255, 255, 255, 0.35);
+$backgroundFade: rgba(0, 0, 0, 0.35);
 $backgroundOverlay: rgba(255, 255, 255, 0.95);
 
 .backOverlay {

js/src/views/ContractDevelop/contractDevelop.css

@@ -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/>.
 */
+
 .outer, .page, .editor {
   flex: 1;
   display: flex;
@@ -108,7 +109,6 @@
   overflow: auto;
 
   .panel {
-    background-color: rgba(0, 0, 0, 0.5);
     padding: 1em;
     flex: 1;
     display: flex;