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

Change styling for network dropdown

Browse Source
This commit is contained in:
Alexander Tseung 2018-01-11 16:59:00 -08:00
parent 376e136572
commit b0a6bfdeec
2 changed files with 25 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,7 +39,6 @@ Network.prototype.render = function () {
}, },
src: 'images/loading.svg', src: 'images/loading.svg',
}), }),
h('i.fa.fa-caret-down.network-caret'),
]) ])
} else if (providerName === 'mainnet') { } else if (providerName === 'mainnet') {
hoverText = 'Main Ethereum Network' hoverText = 'Main Ethereum Network'
@ -85,12 +84,8 @@ Network.prototype.render = function () {
backgroundColor: '#038789', // $blue-lagoon backgroundColor: '#038789', // $blue-lagoon
nonSelectBackgroundColor: '#15afb2', nonSelectBackgroundColor: '#15afb2',
}), }),
h('.network-name', { h('.network-name', 'Main Network'),
style: { h('i.fa.fa-chevron-down.fa-lg.network-caret'),
color: '#039396',
}},
'Main Network'),
h('i.fa.fa-caret-down.fa-lg.network-caret'),
]) ])
case 'ropsten-test-network': case 'ropsten-test-network':
return h('.network-indicator', [ return h('.network-indicator', [
@ -98,12 +93,8 @@ Network.prototype.render = function () {
backgroundColor: '#e91550', // $crimson backgroundColor: '#e91550', // $crimson
nonSelectBackgroundColor: '#ec2c50', nonSelectBackgroundColor: '#ec2c50',
}), }),
h('.network-name', { h('.network-name', 'Ropsten Test Net'),
style: { h('i.fa.fa-chevron-down.fa-lg.network-caret'),
color: '#ff6666',
}},
'Ropsten Test Net'),
h('i.fa.fa-caret-down.fa-lg.network-caret'),
]) ])
case 'kovan-test-network': case 'kovan-test-network':
return h('.network-indicator', [ return h('.network-indicator', [
@ -111,12 +102,8 @@ Network.prototype.render = function () {
backgroundColor: '#690496', // $purple backgroundColor: '#690496', // $purple
nonSelectBackgroundColor: '#b039f3', nonSelectBackgroundColor: '#b039f3',
}), }),
h('.network-name', { h('.network-name', 'Kovan Test Net'),
style: { h('i.fa.fa-chevron-down.fa-lg.network-caret'),
color: '#690496',
}},
'Kovan Test Net'),
h('i.fa.fa-caret-down.fa-lg.network-caret'),
]) ])
case 'rinkeby-test-network': case 'rinkeby-test-network':
return h('.network-indicator', [ return h('.network-indicator', [
@ -124,12 +111,8 @@ Network.prototype.render = function () {
backgroundColor: '#ebb33f', // $tulip-tree backgroundColor: '#ebb33f', // $tulip-tree
nonSelectBackgroundColor: '#ecb23e', nonSelectBackgroundColor: '#ecb23e',
}), }),
h('.network-name', { h('.network-name', 'Rinkeby Test Net'),
style: { h('i.fa.fa-chevron-down.fa-lg.network-caret'),
color: '#e7a218',
}},
'Rinkeby Test Net'),
h('i.fa.fa-caret-down.fa-lg.network-caret'),
]) ])
default: default:
return h('.network-indicator', [ return h('.network-indicator', [
@ -140,12 +123,8 @@ Network.prototype.render = function () {
}, },
}), }),
h('.network-name', { h('.network-name', 'Private Network'),
style: { h('i.fa.fa-chevron-down.fa-lg.network-caret'),
color: '#AEAEAE',
}},
'Private Network'),
h('i.fa.fa-caret-down.fa-lg.network-caret'),
]) ])
} }
})(), })(),

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

@ -8,41 +8,25 @@
} }
.network-component.pointer { .network-component.pointer {
border: 1px solid $shark; border: 2px solid $silver;
border-radius: 82px; border-radius: 82px;
padding: 6px; padding: 3px;
flex: 0 0 auto; flex: 0 0 auto;
&.ethereum-network { &.ethereum-network .menu-icon-circle div {
border-color: rgb(3, 135, 137); background-color: rgba(3, 135, 137, .7) !important;
.menu-icon-circle div {
background-color: rgba(3, 135, 137, .7) !important;
}
} }
&.ropsten-test-network { &.ropsten-test-network .menu-icon-circle div {
border-color: rgb(233, 21, 80); background-color: rgba(233, 21, 80, .7) !important;
.menu-icon-circle div {
background-color: rgba(233, 21, 80, .7) !important;
}
} }
&.kovan-test-network { &.kovan-test-network .menu-icon-circle div {
border-color: rgb(105, 4, 150); background-color: rgba(105, 4, 150, .7) !important;
.menu-icon-circle div {
background-color: rgba(105, 4, 150, .7) !important;
}
} }
&.rinkeby-test-network { &.rinkeby-test-network .menu-icon-circle div {
border-color: rgb(235, 179, 63); background-color: rgba(235, 179, 63, .7) !important;
.menu-icon-circle div {
background-color: rgba(235, 179, 63, .7) !important;
}
} }
} }
@ -66,11 +50,12 @@
} }
.network-name { .network-name {
line-height: 15px;
padding: 0 4px; padding: 0 4px;
font-family: Roboto; font-family: Roboto;
font-size: 12px; font-size: 12px;
flex: 1 0 auto; flex: 1 0 auto;
color: $tundora;
font-weight: 500;
} }
.network-droppo { .network-droppo {
@ -167,3 +152,6 @@
line-height: 18px; line-height: 18px;
} }
.network-caret {
margin: 0 8px 2px;
}