aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@gmail.com>2017-12-02 06:19:53 +0800
committerAlexander Tseung <alextsg@gmail.com>2017-12-02 06:19:53 +0800
commit7dba114feb428f7f2f78fee5611377b04bff5be6 (patch)
tree1518258a74392a4c79ec1957d65816ba610d1168 /ui
parent2b1f2557c7dbd589724fd690ec72f789f9650e3c (diff)
downloadtangerine-wallet-browser-7dba114feb428f7f2f78fee5611377b04bff5be6.tar.gz
tangerine-wallet-browser-7dba114feb428f7f2f78fee5611377b04bff5be6.tar.zst
tangerine-wallet-browser-7dba114feb428f7f2f78fee5611377b04bff5be6.zip
Update font weights to 300, remove animation from network dropdown, fix network dropdown not closing from certain click-areas
Diffstat (limited to 'ui')
-rw-r--r--ui/app/components/dropdowns/network-dropdown.js27
-rw-r--r--ui/app/components/network.js14
-rw-r--r--ui/app/css/itcss/components/account-menu.scss6
-rw-r--r--ui/app/css/itcss/components/menu.scss2
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss2
5 files changed, 28 insertions, 23 deletions
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 0908faf01..dfaa6b22c 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -6,6 +6,16 @@ const actions = require('../../actions')
const Dropdown = require('./components/dropdown').Dropdown
const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
const NetworkDropdownIcon = require('./components/network-dropdown-icon')
+const R = require('ramda')
+
+// classes from nodes of the toggle element.
+const notToggleElementClassnames = [
+ 'menu-icon',
+ 'network-name',
+ 'network-indicator',
+ 'network-caret',
+ 'network-component',
+]
function mapStateToProps (state) {
return {
@@ -32,8 +42,8 @@ function mapDispatchToProps (dispatch) {
showConfigPage: () => {
dispatch(actions.showConfigPage())
},
- showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) },
- hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) },
+ showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
+ hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
}
}
@@ -59,18 +69,13 @@ NetworkDropdown.prototype.render = function () {
}
return h(Dropdown, {
- useCssTransition: true,
isOpen,
onClickOutside: (event) => {
const { classList } = event.target
- const isNotToggleElement = [
- classList.contains('menu-icon'),
- classList.contains('network-name'),
- classList.contains('network-indicator'),
- ].filter(bool => bool).length === 0
- // classes from three constituent nodes of the toggle element
-
- if (isNotToggleElement) {
+ const isInClassList = className => classList.contains(className)
+ const notToggleElementIndex = R.findIndex(isInClassList)(notToggleElementClassnames)
+
+ if (notToggleElementIndex === -1) {
this.props.hideNetworkDropdown()
}
},
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 915818009..5a8d0763d 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -39,7 +39,7 @@ Network.prototype.render = function () {
},
src: 'images/loading.svg',
}),
- h('i.fa.fa-caret-down'),
+ h('i.fa.fa-caret-down.network-caret'),
])
} else if (providerName === 'mainnet') {
hoverText = 'Main Ethereum Network'
@@ -63,7 +63,7 @@ Network.prototype.render = function () {
return (
h('div.network-component.pointer', {
- className: classnames('network-component pointer', {
+ className: classnames({
'network-component--disabled': this.props.disabled,
'ethereum-network': providerName === 'mainnet',
'ropsten-test-network': providerName === 'ropsten' || parseInt(networkNumber) === 3,
@@ -90,7 +90,7 @@ Network.prototype.render = function () {
color: '#039396',
}},
'Main Network'),
- h('i.fa.fa-caret-down.fa-lg'),
+ h('i.fa.fa-caret-down.fa-lg.network-caret'),
])
case 'ropsten-test-network':
return h('.network-indicator', [
@@ -103,7 +103,7 @@ Network.prototype.render = function () {
color: '#ff6666',
}},
'Ropsten Test Net'),
- h('i.fa.fa-caret-down.fa-lg'),
+ h('i.fa.fa-caret-down.fa-lg.network-caret'),
])
case 'kovan-test-network':
return h('.network-indicator', [
@@ -116,7 +116,7 @@ Network.prototype.render = function () {
color: '#690496',
}},
'Kovan Test Net'),
- h('i.fa.fa-caret-down.fa-lg'),
+ h('i.fa.fa-caret-down.fa-lg.network-caret'),
])
case 'rinkeby-test-network':
return h('.network-indicator', [
@@ -129,7 +129,7 @@ Network.prototype.render = function () {
color: '#e7a218',
}},
'Rinkeby Test Net'),
- h('i.fa.fa-caret-down.fa-lg'),
+ h('i.fa.fa-caret-down.fa-lg.network-caret'),
])
default:
return h('.network-indicator', [
@@ -145,7 +145,7 @@ Network.prototype.render = function () {
color: '#AEAEAE',
}},
'Private Network'),
- h('i.fa.fa-caret-down.fa-lg'),
+ h('i.fa.fa-caret-down.fa-lg.network-caret'),
])
}
})(),
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index e40e5a8c0..e16d2e024 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -40,7 +40,7 @@
font-size: 12px;
line-height: 23px;
padding: 0 24px;
- font-weight: 200;
+ font-weight: 300;
}
img {
@@ -113,7 +113,7 @@
&__name {
color: $white;
font-size: 18px;
- font-weight: 200;
+ font-weight: 300;
line-height: 16px;
}
@@ -126,7 +126,7 @@
&__action {
font-size: 16px;
line-height: 18px;
- font-weight: 200;
+ font-weight: 300;
cursor: pointer;
}
}
diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss
index 17e24de98..7953834ee 100644
--- a/ui/app/css/itcss/components/menu.scss
+++ b/ui/app/css/itcss/components/menu.scss
@@ -12,7 +12,7 @@
align-items: center;
position: relative;
z-index: 200;
- font-weight: 200;
+ font-weight: 300;
@media screen and (max-width: 575px) {
padding: 14px;
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 244de2ba0..43a59c4da 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -248,7 +248,7 @@ $wallet-view-bg: $wild-sand;
// wallet view
.account-name {
font-size: 24px;
- font-weight: 200;
+ font-weight: 300;
line-height: 20px;
color: $scorpion;
margin-top: 8px;