Various styling fixes

ui/app/app.js

@@ -27,6 +27,7 @@ const Import = require('./accounts/import')
 const InfoScreen = require('./info')
 const Loading = require('./components/loading')
 const NetworkIndicator = require('./components/network')
+const Identicon = require('./components/identicon')
 const BuyView = require('./components/buy-button-subview')
 const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
 const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
@@ -60,6 +61,7 @@ function mapStateToProps (state) {
     noActiveNotices: state.metamask.noActiveNotices,
     isInitialized: state.metamask.isInitialized,
     isUnlocked: state.metamask.isUnlocked,
+    selectedAddress: state.metamask.selectedAddress,
     currentView: state.appState.currentView,
     activeAddress: state.appState.activeAddress,
     transForward: state.appState.transForward,
@@ -198,7 +200,7 @@ App.prototype.renderAppBar = function () {
   if (window.METAMASK_UI_TYPE === 'notification') {
     return null
   }
-
+  console.log(this.props)
   return (
 
     h('.full-width', {
@@ -230,24 +232,31 @@ App.prototype.renderAppBar = function () {
 
           ]),
 
-          h('div.network-component-wrapper', {
-            style: {},
-          }, [
-            // Network Indicator
-            h(NetworkIndicator, {
-              network: this.props.network,
-              provider: this.props.provider,
-              onClick: (event) => {
-                event.preventDefault()
-                event.stopPropagation()
-                if (this.props.networkDropdownOpen === false) {
-                  this.props.showNetworkDropdown()
-                } else {
-                  this.props.hideNetworkDropdown()
-                }
-              },
-            }),
+          h('div.header__right-actions', [
+            h('div.network-component-wrapper', {
+              style: {},
+            }, [
+              // Network Indicator
+              h(NetworkIndicator, {
+                network: this.props.network,
+                provider: this.props.provider,
+                onClick: (event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  if (this.props.networkDropdownOpen === false) {
+                    this.props.showNetworkDropdown()
+                  } else {
+                    this.props.hideNetworkDropdown()
+                  }
+                },
+              }),
 
+            ]),
+
+            h(Identicon, {
+              address: this.props.selectedAddress,
+              diameter: 32,
+            }),
           ]),
         ]),
       ]),

ui/app/components/dropdowns/network-dropdown.js

@@ -102,7 +102,7 @@ NetworkDropdown.prototype.render = function () {
         key: 'main',
         closeMenu: () => this.props.hideNetworkDropdown(),
         onClick: () => props.setProviderType('mainnet'),
-        style: dropdownMenuItemStyle,
+        style: { ...dropdownMenuItemStyle, borderColor: '#038789' },
       },
       [
         providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),

ui/app/components/network.js

@@ -1,5 +1,6 @@
 const Component = require('react').Component
 const h = require('react-hyperscript')
+const classnames = require('classnames');
 const inherits = require('util').inherits
 const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
 
@@ -61,7 +62,13 @@ Network.prototype.render = function () {
   }
 
   return (
-    h('.network-component.pointer', {
+    h('div.network-component.pointer', {
+      className: classnames('network-component pointer', {
+        'ethereum-network': providerName === 'mainnet',
+        'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
+        'kovan-test-network': providerName === 'kovan',
+        'rinkeby-test-network': providerName === 'rinkeby',
+      }),
       title: hoverText,
       onClick: (event) => this.props.onClick(event),
     }, [
@@ -71,7 +78,7 @@ Network.prototype.render = function () {
             return h('.network-indicator', [
               h(NetworkDropdownIcon, {
                 backgroundColor: '#038789', // $blue-lagoon
-                nonSelectBackgroundColor: '#15afb2'
+                nonSelectBackgroundColor: '#15afb2',
               }),
               h('.network-name', {
                 style: {

ui/app/css/itcss/components/account-dropdown.scss

@@ -1,5 +1,5 @@
 .account-dropdown-name {
-  font-family: 'DIN OT';
+  font-family: Roboto;
 }
 
 .account-dropdown-balance {
@@ -9,7 +9,7 @@
 
 .account-dropdown-edit-button {
   color: $dusty-gray;
-  font-family: "DIN OT";
+  font-family: Roboto;
 
   &:hover {
     color: $white;

ui/app/css/itcss/components/buttons.scss

@@ -52,7 +52,7 @@ button.primary {
   box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
   color: $white;
   font-size: 1.1em;
-  font-family: 'Montserrat Regular';
+  font-family: Roboto;
   text-transform: uppercase;
 }
 
@@ -62,7 +62,7 @@ button.primary {
   box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
   color: #585d67; // TODO: make reusable light button color
   font-size: 1.1em;
-  font-family: 'Montserrat Regular';
+  font-family: Roboto;
   text-transform: uppercase;
   text-align: center;
   line-height: 20px;

ui/app/css/itcss/components/confirm.scss

@@ -12,7 +12,7 @@
   }
 
   @media screen and (min-width: 576px) {
-    top: -26px;
+    // top: -26px;
   }
 }
 

ui/app/css/itcss/components/header.scss

@@ -8,15 +8,24 @@
   flex-flow: column nowrap;
 
   @media screen and (max-width: 575px) {
-    padding: 0 12px;
+    padding: 12px;
     width: 100%;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
     z-index: $mobile-header-z-index;
   }
 
   @media screen and (min-width: 576px) {
-    height: 14.4vh;
-    max-height: 97px;
+    height: 75px;
+    justify-content: center;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 32px;
+      background: $gallery;
+      bottom: -32px;
+    }
   }
 }
 
@@ -45,13 +54,13 @@
 }
 
 .app-header h1 {
-  font-family: 'Montserrat Regular';
+  font-family: Roboto;
   text-transform: uppercase;
+  font-weight: 400;
   color: #22232c; // $shark
 }
 
 h2.page-subtitle {
-  font-family: 'Montserrat Regular';
   text-transform: uppercase;
   color: #aeaeae;
   font-size: 1em;
@@ -62,6 +71,7 @@ h2.page-subtitle {
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin-right: 20px;
 }
 
 .left-menu-wrapper {
@@ -69,3 +79,9 @@ h2.page-subtitle {
   flex-direction: row;
   align-items: center;
 }
+
+.header__right-actions {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+}

ui/app/css/itcss/components/modal.scss

@@ -8,7 +8,7 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  font-family: 'DIN OT';
+  font-family: Roboto;
   padding: 0 16px;
 }
 
@@ -20,7 +20,7 @@
 .qr-ellip-address, .ellip-address {
   width: 247px;
   border: none;
-  font-family: 'Montserrat Light';
+  font-family: Roboto;
   font-size: 14px;
 }
 
@@ -192,7 +192,7 @@
   padding: 5px 0 31px 0;
   border: 1px solid $silver;
   border-radius: 4px;
-  font-family: 'Montserrat UltraLight';
+  font-family: Roboto;
 
   button {
     cursor: pointer;
@@ -208,7 +208,7 @@
 
   &__text {
     margin-top: 2px;
-    font-family: 'DIN OT';
+    font-family: Roboto;
     font-size: 14px;
     line-height: 18px;
   }
@@ -252,7 +252,7 @@
     justify-content: center;
     border: 1px solid $alto;
     padding: 5px 10px;
-    font-family: 'Montserrat Light';
+    font-family: Roboto;
     margin-top: 7px;
     width: 286px;
   }
@@ -269,7 +269,7 @@
     padding: 10px 22px;
     height: 44px;
     width: 235px;
-    font-family: 'Montserrat Light';
+    font-family: Roboto;
   }
 }
 
@@ -320,7 +320,7 @@
 
 .private-key-password::-webkit-input-placeholder {
   color: $dusty-gray;
-  font-family: 'Montserrat UltraLight';
+  font-family: Roboto;
 }
 
 .private-key-password-warning {
@@ -333,7 +333,7 @@
   width: 292px;
   padding: 9px 15px;
   margin-top: 18px;
-  font-family: 'Montserrat Regular';
+  font-family: Roboto;
 }
 
 .export-private-key-buttons {
@@ -362,7 +362,7 @@
 
 .private-key-password-display-textarea {
   color: $crimson;
-  font-family: "DIN OT"; 
+  font-family: Roboto; 
   font-size: 16px; 
   line-height: 21px;
   border: none;
@@ -384,7 +384,7 @@
   position: relative;
   border: 1px solid $alto;
   box-shadow: 0 0 2px 2px $alto;
-  font-family: 'Montserrat Light';
+  font-family: Roboto;
 }
 
 .new-account-modal-header {
@@ -439,7 +439,7 @@
   width: 100%;
   font-size: 1em;
   color: $dusty-gray;
-  font-family: Montserrat Light;
+  font-family: Roboto;
   font-size: 17px;
   margin: 0 60px;
 }
@@ -506,7 +506,7 @@
 
   &__symbol {
     color: $tundora;
-    font-family: 'DIN OT';
+    font-family: Roboto;
     font-size: 16px;
     line-height: 24px;
     text-align: center;
@@ -517,7 +517,7 @@
     height: 30px;
     width: 271.28px;
     color: $tundora;
-    font-family: 'DIN OT';
+    font-family: Roboto;
     font-size: 22px;
     line-height: 30px;
     text-align: center;
@@ -528,7 +528,7 @@
     height: 41px;
     width: 318px;
     color: $scorpion;
-    font-family: 'DIN OT';
+    font-family: Roboto;
     font-size: 14px;
     line-height: 18px;
     text-align: center;
@@ -547,7 +547,7 @@
       border: 1px solid $scorpion;
       border-radius: 2px;
       color: $tundora;
-      font-family: 'DIN OT';
+      font-family: Roboto;
       font-size: 14px;
       line-height: 20px;
       text-align: center;

ui/app/css/itcss/components/network.scss

@@ -1,14 +1,65 @@
+.network-component.pointer {
+  border: 1px solid $shark;
+  border-radius: 82px;
+  padding: 6px;
+
+  &.ethereum-network {
+    border-color: rgb(3, 135, 137);
+
+    .menu-icon-circle div {
+      background-color: rgba(3, 135, 137, .7) !important;
+    }
+  }
+
+  &.ropsten-test-network {
+    border-color: rgb(233, 21, 80);
+
+    .menu-icon-circle div {
+      background-color: rgba(233, 21, 80, .7) !important;
+    }
+  }
+
+  &.kovan-test-network {
+    border-color: rgb(105, 4, 150);
+
+    .menu-icon-circle div {
+      background-color: rgba(105, 4, 150, .7) !important;
+    }
+  }
+
+  &.rinkeby-test-network {
+    border-color: rgb(235, 179, 63);
+
+    .menu-icon-circle div {
+      background-color: rgba(235, 179, 63, .7) !important;
+    }
+  }
+}
+
+.dropdown-menu-item {
+  .menu-icon-circle,
+  .menu-icon-circle--active {
+    margin: 0 16px;
+  }
+}
+
 .network-indicator {
   display: flex;
   align-items: center;
   font-size: .6em;
+
+  .fa-caret-down {
+    line-height: 15px;
+    font-size: 12px;
+    padding: 0 4px;
+  }
 }
 
 .network-name {
-  line-height: 12px;
+  line-height: 15px;
   padding: 0 4px;
-  font-family: 'DIN OT';
-  font-size: 10px;
+  font-family: Roboto;
+  font-size: 12px;
   flex: 1 0 auto;
 }
 
@@ -46,29 +97,27 @@
   margin: 0;
 }
 
-.menu-icon-circle, .menu-icon-circle--active {
-  height: 23px;
-  width: 23px;
-  margin: 9px;
+.menu-icon-circle,
+.menu-icon-circle--active {
   background: none;
   border-radius: 22px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid transparent;
-  background: none;
+  margin: 0 4px;
 }
 
 .menu-icon-circle--active {
-  border: 1px solid white;
-  background: rgba(100, 100, 100, 0.4);
+  border: 1px solid $white;
+  background: rgba(100, 100, 100, .4);
 }
 
-.menu-icon-circle div, .menu-icon-circle--active div {
+.menu-icon-circle div,
+.menu-icon-circle--active div {
   height: 17px;
   width: 17px;
   border-radius: 17px;
-  opacity: 0.7;
 }
 
 .menu-icon-circle--active div {
@@ -93,7 +142,7 @@
   height: 25px;
   width: 75px;
   color: $white;
-  font-family: 'DIN OT';
+  font-family: Roboto;
   font-size: 18px;
   line-height: 25px;
   text-align: center;
@@ -103,7 +152,7 @@
   height: 36px;
   width: 265px;
   color: $dusty-gray;
-  font-family: 'DIN OT';
+  font-family: Roboto;
   font-size: 14px;
   line-height: 18px;
 }

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

@@ -8,9 +8,9 @@ $wallet-view-bg: $wild-sand;
 
 // Main container
 .main-container {
-  position: absolute;
+  // position: absolute;
   z-index: $main-container-z-index;
-  font-family: "DIN OT Light";
+  font-family: Roboto;
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
@@ -70,7 +70,7 @@ $wallet-view-bg: $wild-sand;
   background: rgb(250, 250, 250);
   z-index: $sidebar-z-index;
   position: fixed;
-  top: 41px;
+  // top: 41px;
   left: 0;
   right: 0;
   bottom: 0;
@@ -86,7 +86,9 @@ $wallet-view-bg: $wild-sand;
 .sidebar-overlay {
   z-index: $sidebar-overlay-z-index;
   position: fixed;
-  top: 41px;
+  // top: 41px;
+  height: 100%;
+  width: 100%;
   left: 0;
   right: 0;
   bottom: 0;
@@ -107,7 +109,7 @@ $wallet-view-bg: $wild-sand;
   }
 
   .main-container {
-    margin-top: 6.9vh;
+    // margin-top: 6.9vh;
     width: 85%;
     height: 90vh;
     box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
@@ -116,7 +118,7 @@ $wallet-view-bg: $wild-sand;
 
 @media screen and (min-width: 769px) {
   .main-container {
-    margin-top: 6.9vh;
+    // margin-top: 6.9vh;
     width: 80%;
     height: 82vh;
     box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
@@ -125,7 +127,7 @@ $wallet-view-bg: $wild-sand;
 
 @media screen and (min-width: 1281px) {
   .main-container {
-    margin-top: 6.9vh;
+    // margin-top: 6.9vh;
     width: 65%;
     height: 82vh;
     box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
@@ -142,8 +144,8 @@ $wallet-view-bg: $wild-sand;
   }
 
   .main-container {
-    margin-top: 41px;
-    height: calc(100% - 41px);
+    // margin-top: 41px;
+    height: 100%;
     width: 100%;
     overflow-y: auto;
     background-color: $white;

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

@@ -295,7 +295,7 @@ textarea.twelve-word-phrase {
 
 /* Info screen */
 .info-gray {
-  font-family: 'Montserrat Regular';
+  font-family: Roboto;
   text-transform: uppercase;
   color: $silver-chalice;
 }
@@ -305,7 +305,7 @@ textarea.twelve-word-phrase {
 }
 
 .info {
-  font-family: 'Montserrat Regular', Arial;
+  font-family: Roboto, Arial;
   padding-bottom: 10px;
   display: inline-block;
   padding-left: 5px;
@@ -354,7 +354,7 @@ textarea.twelve-word-phrase {
 }
 
 .buy-inputs {
-  font-family: 'Montserrat Light';
+  font-family: Roboto;
   font-size: 13px;
   height: 20px;
   background: transparent;
@@ -398,7 +398,7 @@ textarea.twelve-word-phrase {
 }
 
 .ex-coins {
-  font-family: 'Montserrat Regular';
+  font-family: Roboto;
   text-transform: uppercase;
   text-align: center;
   font-size: 33px;
@@ -409,7 +409,7 @@ textarea.twelve-word-phrase {
 }
 
 .marketinfo {
-  font-family: 'Montserrat light';
+  font-family: Roboto;
   color: $silver-chalice;
   font-size: 15px;
   line-height: 17px;

ui/app/css/itcss/components/send.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-flow: column nowrap;
   z-index: 25;
-  font-family: 'DIN OT';
+  font-family: Roboto;
 
   @media screen and (max-width: $break-small) {
     width: 100%;
@@ -19,7 +19,7 @@
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
   padding: 46px 40.5px 26px;
   position: relative;
-  top: -26px;
+  // top: -26px;
   align-items: center;
   display: flex;
   flex-flow: column nowrap;
@@ -77,7 +77,7 @@
     margin: 4px 0 20px;
     font-size: 16px;
     line-height: 22.4px;
-    font-family: "DIN OT";
+    font-family: Roboto;
   }
 
   .send-screen-gas-input {
@@ -316,7 +316,7 @@
   display: flex;
   flex-flow: column nowrap;
   z-index: 25;
-  font-family: "Montserrat Light";
+  font-family: Roboto;
 
   &__content {
     width: 498px;
@@ -325,7 +325,7 @@
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
     padding: 46px 40.5px 26px;
     position: relative;
-    top: -26px;
+    // top: -26px;
     align-items: center;
     display: flex;
     flex-flow: column nowrap;
@@ -404,20 +404,18 @@
     width: 380px;
     border-radius: 8px;
     background-color: $white;
-    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08);
     display: flex;
     flex-flow: column nowrap;
     z-index: 25;
     align-items: center;
     font-family: Roboto;
     position: relative;
-    top: -26px;
 
     @media screen and (max-width: $break-small) {
       width: 100%;
       overflow-y: auto;
       top: 0;
-      width: 100%;
       box-shadow: none;
     }
   }

ui/app/css/itcss/components/token-list.scss

@@ -91,7 +91,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
 
   &__option {
     color: $white;
-    font-family: "DIN OT";
+    font-family: Roboto;
     font-size: 16px;
     line-height: 21px;
     text-align: center;

ui/app/css/itcss/components/transaction-list.scss

@@ -132,7 +132,7 @@
 .tx-list-date {
   color: $dusty-gray;
   font-size: 12px;
-  font-family: "Montserrat UltraLight";
+  font-family: Roboto;
 }
 
 .tx-list-identicon-wrapper {

ui/app/css/itcss/generic/index.scss

@@ -10,7 +10,7 @@
 
 html,
 body {
-  font-family: 'Montserrat Regular', Arial;
+  font-family: Roboto, Arial;
   color: #4d4d4d;
   font-weight: 300;
   line-height: 1.4em;

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

@@ -71,3 +71,7 @@ $sidebar-overlay-z-index: 25;
 $break-small: 575px;
 $break-midpoint: 780px;
 $break-large: 576px;
+
+
+$primary-font-type: Roboto;
+