m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Highlighted circle icons for the network menu.

Browse Source
This commit is contained in:
Dan 2017-09-06 20:07:48 -02:30 committed by Chi Kei Chan
parent 663cb758b3
commit 6a3c59e409
5 changed files with 99 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
ui/app/components/dropdowns/components/network-dropdown-icon.js Normal file
View File

@ -0,0 +1,32 @@
const inherits = require('util').inherits
const Component = require('react').Component
const h = require('react-hyperscript')
inherits(NetworkDropdownIcon, Component)
module.exports = NetworkDropdownIcon
function NetworkDropdownIcon () {
Component.call(this)
}
NetworkDropdownIcon.prototype.render = function () {
const {
backgroundColor,
isSelected,
innerBorder,
nonSelectBackgroundColor
} = this.props
return h('.menu-icon-circle-select', {
style: {
border: isSelected && '1px solid white',
background: isSelected ? 'rgba(100, 100, 100, 0.4)' : 'none',
},
}, h('.menu-icon-circle', {
style: {
background: isSelected ? backgroundColor : nonSelectBackgroundColor,
border: innerBorder ? innerBorder : 'none',
},
}))
}

35
ui/app/components/dropdowns/network-dropdown.js
View File

@ -5,6 +5,7 @@ const connect = require('react-redux').connect
const actions = require('../../actions')
const Dropdown = require('./components/dropdown').Dropdown
const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
const NetworkDropdownIcon = require('./components/network-dropdown-icon')
function mapStateToProps (state) {
return {
@ -94,7 +95,11 @@ NetworkDropdown.prototype.render = function () {
},
[
providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
h('.menu-icon.diamond'),
h(NetworkDropdownIcon, {
backgroundColor: '#038789', // $blue-lagoon
nonSelectBackgroundColor: '#15afb2',
isSelected: providerType === 'mainnet',
}),
h('span.network-name-item', {
style: {
color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
@ -113,7 +118,11 @@ NetworkDropdown.prototype.render = function () {
},
[
providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
h('.menu-icon.red-dot'),
h(NetworkDropdownIcon, {
backgroundColor: '#e91550', // $crimson
nonSelectBackgroundColor: '#ec2c50',
isSelected: providerType === 'ropsten',
}),
h('span.network-name-item', {
style: {
color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
@ -132,7 +141,11 @@ NetworkDropdown.prototype.render = function () {
},
[
providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
h('.menu-icon.hollow-diamond'),
h(NetworkDropdownIcon, {
backgroundColor: '#690496', // $purple
nonSelectBackgroundColor: '#b039f3',
isSelected: providerType === 'kovan',
}),
h('span.network-name-item', {
style: {
color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
@ -151,7 +164,11 @@ NetworkDropdown.prototype.render = function () {
},
[
providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
h('.menu-icon.golden-square'),
h(NetworkDropdownIcon, {
backgroundColor: '#ebb33f', // $tulip-tree
nonSelectBackgroundColor: '#ecb23e',
isSelected: providerType === 'rinkeby',
}),
h('span.network-name-item', {
style: {
color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
@ -170,7 +187,10 @@ NetworkDropdown.prototype.render = function () {
},
[
activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
h(NetworkDropdownIcon, {
isSelected: activeNetwork === 'http://localhost:8545',
innerBorder: '1px solid #9b9b9b',
}),
h('span.network-name-item', {
style: {
color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
@ -191,7 +211,10 @@ NetworkDropdown.prototype.render = function () {
},
[
activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'),
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
h(NetworkDropdownIcon, {
isSelected: activeNetwork === 'custom',
innerBorder: '1px solid #9b9b9b',
}),
h('span.network-name-item', {
style: {
color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',

21
ui/app/components/network.js
View File

@ -1,6 +1,7 @@
const Component = require('react').Component
const h = require('react-hyperscript')
const inherits = require('util').inherits
const NetworkDropdownIcon = require('./dropdowns/components/network-dropdown-icon')
module.exports = Network
@ -68,7 +69,10 @@ Network.prototype.render = function () {
switch (iconName) {
case 'ethereum-network':
return h('.network-indicator', [
h('.menu-icon.diamond'),
h(NetworkDropdownIcon, {
backgroundColor: '#038789', // $blue-lagoon
nonSelectBackgroundColor: '#15afb2'
}),
h('.network-name', {
style: {
color: '#039396',
@ -77,7 +81,10 @@ Network.prototype.render = function () {
])
case 'ropsten-test-network':
return h('.network-indicator', [
h('.menu-icon.red-dot'),
h(NetworkDropdownIcon, {
backgroundColor: '#e91550', // $crimson
nonSelectBackgroundColor: '#ec2c50',
}),
h('.network-name', {
style: {
color: '#ff6666',
@ -86,7 +93,10 @@ Network.prototype.render = function () {
])
case 'kovan-test-network':
return h('.network-indicator', [
h('.menu-icon.hollow-diamond'),
h(NetworkDropdownIcon, {
backgroundColor: '#690496', // $purple
nonSelectBackgroundColor: '#b039f3',
}),
h('.network-name', {
style: {
color: '#690496',
@ -95,7 +105,10 @@ Network.prototype.render = function () {
])
case 'rinkeby-test-network':
return h('.network-indicator', [
h('.menu-icon.golden-square'),
h(NetworkDropdownIcon, {
backgroundColor: '#ebb33f', // $tulip-tree
nonSelectBackgroundColor: '#ecb23e',
}),
h('.network-name', {
style: {
color: '#e7a218',

17
ui/app/css/itcss/components/network.scss
View File

@ -43,3 +43,20 @@
.network-check__transparent {
opacity: 0;
}
.menu-icon-circle {
height: 17px;
width: 17px;
border-radius: 17px;
}
.menu-icon-circle-select {
height: 23px;
width: 23px;
margin: 9px;
background: none;
border-radius: 22px;
display: flex;
justify-content: center;
align-items: center;
}

4
ui/app/css/itcss/settings/variables.scss
View File

@ -31,6 +31,10 @@ $tundora: #4d4d4d;
$nile-blue: #1b344d;
$scorpion: #5d5d5d;
$silver: #cdcdcd;
$crimson: #e91550;
$blue-lagoon: #038789;
$purple: #690496;
$tulip-tree: #ebb33f;
/*
Z-Indicies