Improve positioning of caret and add reusable color for wallet view

ui/app/components/wallet-view.js

@@ -57,7 +57,10 @@ WalletView.prototype.render = function () {
       ]),
 
       h('div.flex-column.flex-center', {
-
+        style: {
+         // constrains size of absolutely positioned wrappers
+          position: 'relative',
+        },
       }, [
 
         h('.identicon-wrapper.select-none', {
@@ -77,31 +80,19 @@ WalletView.prototype.render = function () {
           'Account 1'
         ]),
 
-        //  h(AccountDropdowns, {
-        //   style: {
-        //     // position: 'absolute',
-        //     // left: '58.5%',
-        //     // top: '10.25%',
-        //   },
-        //   selected,
-        //   network,
-        //   identities,
-        //   enableAccountsSelector: true,
-        // }, []),
-        h('div.flex-column.flex-center,', {
+        h(AccountDropdowns, {
           style: {
             position: 'absolute',
-            marginLeft: '42px',
-            marginTop: '-10px',
+            left: '66.5%',
+            top: '19.5%',
           },
-        }, h('i.fa.fa-angle-down', {}, [])),
-
+          selected,
+          network,
+          identities,
+          enableAccountsSelector: true,
+        }, []),
       ]),
 
-      // position: absolute;
-      // left: 58.5%;
-      // top: 10.25%;
-
       h(
         AccountDropdowns,
         {

ui/app/css/itcss/components/newui-sections.scss

@@ -18,7 +18,7 @@
 
 .tx-view {
   flex: 63.5 0 66.5%;
-  background: #FFFFFF; // TODO: add to resuable colors
+  background: $white; // TODO: add to resuable colors
 }
 
 
@@ -26,7 +26,7 @@
 
 .wallet-view {
   flex: 33.5 0 33.5%;
-  background: #FAFAFA, // TODO: add to reusable colors
+  background: $wild-sand,
 }
 
 .account-options-menu {

ui/app/css/itcss/settings/variables.scss

@@ -11,3 +11,4 @@ $gallery: #EFEFEF;
 $alabaster: #F7F7F7;
 $shark: #22232C;
 $wild-sand: #F6F6F6;
+$white: #FFFFFF;