Merge pull request #2639 from alextsg/cb-372

[NewUI] Update font weights to 300, remove animation from network dropdown, f…
feature/default_network_editable
Chi Kei Chan 7 years ago committed by GitHub
commit 8defb365b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 27
      ui/app/components/dropdowns/network-dropdown.js
  2. 14
      ui/app/components/network.js
  3. 6
      ui/app/css/itcss/components/account-menu.scss
  4. 2
      ui/app/css/itcss/components/menu.scss
  5. 2
      ui/app/css/itcss/components/newui-sections.scss

@ -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()
}
},

@ -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'),
])
}
})(),

@ -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;
}
}

@ -11,8 +11,8 @@
flex-flow: row nowrap;
align-items: center;
position: relative;
font-weight: 300;
z-index: 201;
font-weight: 200;
@media screen and (max-width: 575px) {
padding: 14px;

@ -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;

Loading…
Cancel
Save