aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ui/app/app.js45
-rw-r--r--ui/app/components/dropdowns/network-dropdown.js2
-rw-r--r--ui/app/components/network.js11
-rw-r--r--ui/app/css/itcss/components/account-dropdown.scss4
-rw-r--r--ui/app/css/itcss/components/buttons.scss4
-rw-r--r--ui/app/css/itcss/components/confirm.scss2
-rw-r--r--ui/app/css/itcss/components/header.scss26
-rw-r--r--ui/app/css/itcss/components/modal.scss30
-rw-r--r--ui/app/css/itcss/components/network.scss77
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss20
-rw-r--r--ui/app/css/itcss/components/sections.scss10
-rw-r--r--ui/app/css/itcss/components/send.scss14
-rw-r--r--ui/app/css/itcss/components/token-list.scss2
-rw-r--r--ui/app/css/itcss/components/transaction-list.scss2
-rw-r--r--ui/app/css/itcss/generic/index.scss2
-rw-r--r--ui/app/css/itcss/settings/variables.scss4
16 files changed, 170 insertions, 85 deletions
diff --git a/ui/app/app.js b/ui/app/app.js
index fb57775b6..360ba04cf 100644
--- a/ui/app/app.js
+++ b/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,
}),
-
]),
]),
]),
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 4c578fbeb..567bf07a0 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/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', '✓'),
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 8424a479a..b24505750 100644
--- a/ui/app/components/network.js
+++ b/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: {
diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss
index 42f02d84d..9966c7f3f 100644
--- a/ui/app/css/itcss/components/account-dropdown.scss
+++ b/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;
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 2c5e6cf57..8ba084b4a 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/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;
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 3576da377..15c752923 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -12,7 +12,7 @@
}
@media screen and (min-width: 576px) {
- top: -26px;
+ // top: -26px;
}
}
diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
index f750ec014..4fa80f047 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/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;
+}
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index aa18ed37d..556f14389 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/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;
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index 012b1faf6..bf699ac57 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/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;
}
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 5ce4f281c..fc1dba87c 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/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;
diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss
index 5c32976a7..bc89fdccc 100644
--- a/ui/app/css/itcss/components/sections.scss
+++ b/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;
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 752d6ffea..80aacf1ab 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/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;
}
}
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index d04f3a9b1..bbc64c324 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/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;
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index e3fe1a8b3..76fac09e2 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/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 {
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 51b7cf789..9d55324e3 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/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;
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 7433df81f..387d14b5f 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/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;
+
generated by cgit (git 2.34.1) at 2024-12-27 19:12:36 +0800