Update with recent @parity/ui

js/package.json

@@ -151,6 +151,7 @@
     "@parity/dapp-contracts": "paritytech/dapp-contracts",
     "@parity/dapp-dapp-accounts": "paritytech/dapp-dapp-accounts",
     "@parity/dapp-dapp-methods": "paritytech/dapp-dapp-methods",
+    "@parity/dapp-dapp-visible": "paritytech/dapp-dapp-visible",
     "@parity/dapp-dappreg": "paritytech/dapp-dappreg",
     "@parity/dapp-develop": "paritytech/dapp-develop",
     "@parity/dapp-githubhint": "paritytech/dapp-githubhint",

js/src/Connection/connection.css

@@ -15,6 +15,8 @@
 /* along with Parity.  If not; see <http://www.gnu.org/licenses/>.
 */
 
+@import '../ParityBar/_colors.css';
+
 .overlay {
   position: fixed;
   top: 0;
@@ -35,13 +37,14 @@
 }
 
 .body {
+  background: $backgroundColor;
+  background: $backgroundGradient;
+  box-shadow: rgba(0, 0, 0, 0.25) 0 14px 45px, rgba(0, 0, 0, 0.22) 0 10px 18px;
+  color: rgb(208, 208, 208);
   margin: 0 auto;
+  max-width: 40em;
   padding: 2em 4em;
   text-align: center;
-  max-width: 40em;
-  background: rgba(25, 25, 25, 0.75);
-  color: rgb(208, 208, 208);
-  box-shadow: rgba(0, 0, 0, 0.25) 0 14px 45px, rgba(0, 0, 0, 0.22) 0 10px 18px;
 }
 
 .header {

js/src/ParityBar/_colors.css

@@ -0,0 +1,21 @@
+/* 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/>.
+*/
+
+$backgroundFrom: #405161;
+$backgroundTo: #2c3742;
+$backgroundGradient: linear-gradient(to bottom, $backgroundFrom 0%, $backgroundTo 100%);
+$backgroundColor: $backgroundFrom;

js/src/ParityBar/parityBar.css

@@ -15,6 +15,8 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+@import './_colors.css';
+
 $overlayZ: 10000;
 $modalZ: 10001;
 
@@ -110,11 +112,11 @@ $modalZ: 10001;
   width: 960px;
 
   .content {
-    flex: 1;
-    overflow: auto;
-    display: flex;
     background: rgba(255, 255, 255, 0.95);
+    display: flex;
+    flex: 1;
     max-width: calc(100vw - 2em);
+    overflow: auto;
   }
 }
 
@@ -123,10 +125,11 @@ $modalZ: 10001;
 }
 
 .cornercolor {
-  background: rgba(0, 0, 0, 0.75);
-  padding: 0.5em 1em;
-  display: flex;
   align-items: center;
+  background: $backgroundColor;
+  background: $backgroundGradient;
+  display: flex;
+  padding: 0.5em 1em;
 }
 
 .link {
@@ -192,7 +195,8 @@ $modalZ: 10001;
 .header {
   /* height: 2em; */
   padding: 0.5em 1em;
-  background: #444;
+  background: $backgroundColor;
+  background: $backgroundGradient;
   margin-bottom: 0;
 
   &::after {
@@ -204,13 +208,7 @@ $modalZ: 10001;
 .corner {
   button {
     background-color: transparent !important;
-    margin: 0 !important;
+    padding: 0.5em 1.5em !important;
-    padding: 0 0.5em !important;
-
-    i {
-      font-size: 24px !important;
-      height: 24px !important;
-    }
   }
 }
 
@@ -221,11 +219,16 @@ $modalZ: 10001;
 .title {
   color: white;
   float: left;
+
+  h3 {
+    background: transparent !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
 }
 
 .actions {
   float: right;
-  margin-top: -2px;
 
   div {
     margin-left: 1em;

js/src/Status/status.css

@@ -15,17 +15,19 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-$backgroundColor: rgba(0, 0, 0, 0.8);
+@import '../ParityBar/_colors.css';
+
 $textColor: #ccc;
 
 .status {
   align-items: center;
-  background-color: $backgroundColor;
+  background: $backgroundColor;
+  background: $backgroundGradient;
   bottom: 0;
   color: $textColor;
   display: flex;
   left: 0;
-  padding: 0.4em 0.5em;
+  padding: 0.5em 0.75em;
   position: fixed;
   right: 0;
   z-index: 1000;