Update styles to new Polkadot identity (#124)

packages/frontend/src/components/Chain/Chain.css

@@ -28,7 +28,7 @@
   width: 100%;
   min-width: 1350px;
   min-height: 100%;
-  background: #222;
+  background: #2C2B2B;
   color: #fff;
   box-shadow: rgba(0,0,0,0.5) 0 3px 30px;
 }

packages/frontend/src/components/Chain/Tab.css

@@ -19,6 +19,6 @@
 }
 
 .Chain-Tab-on .Icon, .Chain-Tab-on:hover .Icon {
-  background: #d64ca8;
+  background: #E6007A;
   color: #fff;
 }

packages/frontend/src/components/Chains.css

@@ -1,5 +1,5 @@
 .Chains {
-  background: #ccc;
+  background: #B5AEAE;
   color: #000;
   padding: 0 16px;
   height: 40px;
@@ -9,19 +9,22 @@
 
 .Chains-chain {
   padding: 0 12px;
-  background: #bbb;
+  background: #B5AEAE;
   color: #444;
   display: inline-block;
-  margin: 0 0 0 1px;
+  border-right: 1px solid rgba(255,255,255,0.5);
   height: 40px;
   line-height: 40px;
   cursor: pointer;
-  font-family: monospace, sans-serif;
   font-size: 0.8em;
   font-weight: bold;
   position: relative;
 }
 
+.Chains-chain:first-child {
+  border-left: 1px solid rgba(255,255,255,0.5);
+}
+
 .Chains-fork-me {
   display: block;
   padding: 0;
@@ -40,11 +43,16 @@
 }
 
 .Chains-node-count {
-  padding: 0.2em 0.5em;
-  border-radius: 0.3em;
-  background: #888;
+  display: inline-block;
+  padding: 0 0.5em 0.1em;
+  border-radius: 1em;
+  background: #8C8787;
   color: #fff;
+  font-weight: normal;
   text-shadow: rgba(0,0,0,0.5) 0 1px 0;
+  font-size: 0.9em;
+  line-height: 1.4em;
+  margin: 0 -0.3em 0 0.3em;
 }
 
 .Chains-chain-selected {
@@ -54,5 +62,5 @@
 }
 
 .Chains-chain-selected .Chains-node-count {
-  background: #d64ca8;
+  background: #E6007A;
 }

packages/frontend/src/components/List/List.css

@@ -11,7 +11,7 @@
 }
 
 .List thead {
-  background: #3c3c3b;
+  background: #393838;
 }
 
 .List tbody {

packages/frontend/src/components/List/Row.css

@@ -38,21 +38,21 @@
 }
 
 .Row-pinned td:first-child {
-  border-left: 3px solid #d64ca8;
+  border-left: 3px solid #E6007A;
   padding-left: 10px;
 }
 
 .Row-pinned td:last-child {
-  border-right: 3px solid #d64ca8;
+  border-right: 3px solid #E6007A;
   padding-right: 10px;
 }
 
 .Row-pinned.Row-synced {
-  color: #d64ca8;
+  color: #E6007A;
 }
 
 .Row:hover {
-  background-color: #161616;
+  background-color: #1E1E1E;
 }
 
 .Row-validator {

packages/frontend/src/components/Map/Location.css

@@ -37,7 +37,7 @@
 
 .Location-synced {
   z-index: 3;
-  border-color: #d64ca8;
+  border-color: #E6007A;
 }
 
 .Location-synced .Location-ping {

packages/frontend/src/components/Settings/Setting.css

@@ -25,8 +25,8 @@
 }
 
 .Setting-on .Setting-switch {
-  background: #d64ca8;
-  border-color: #d64ca8;
+  background: #E6007A;
+  border-color: #E6007A;
 }
 
 .Setting-knob {

packages/frontend/src/components/Tile.css

@@ -32,6 +32,6 @@
   font-size: .8em;
   padding: 0.5em;
   border-radius: 1.25em;
-  border: 2px solid #d64ca8;
-  color: #d64ca8;
+  border: 2px solid #E6007A;
+  color: #E6007A;
 }