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

Fix menu style

Browse Source
This commit is contained in:
Jacky Chan 2017-08-31 04:08:11 -07:00 committed by Chi Kei Chan
parent 0d6e64bfbe
commit b1fc290bed
7 changed files with 114 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/app/app.js
View File

@ -79,9 +79,10 @@ function mapStateToProps (state) {
function mapDispatchToProps (dispatch, ownProps) {
return {
hideSidebar: () => { dispatch(actions.hideSidebar()) },
showNetworkDropdown: () => { dispatch(actions.showNetworkDropdown()) },
hideNetworkDropdown: () => { dispatch(actions.hideNetworkDropdown()) },
dispatch,
hideSidebar: () => dispatch(actions.hideSidebar()),
showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()),
hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()),
}
}

2
ui/app/components/dropdowns/account-selection-dropdown.js
View File

@ -15,7 +15,7 @@ module.exports = AccountSelectionDropdown
// TODO: selectedAddress is not defined... should we use selected?
AccountSelectionDropdown.prototype.render = function () {
const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
console.log({style})
return h(AccountDropdowns, {
enableAccountOptions: false,
enableAccountsSelector: true,

38
ui/app/components/dropdowns/components/account-dropdowns.js
View File

@ -101,6 +101,8 @@ class AccountDropdowns extends Component {
h('span.account-dropdown-balance', {
style: {
fontSize: '14px',
fontFamily: 'Avenir',
fontWeight: 500,
},
}, formattedBalance),
]),
@ -177,7 +179,13 @@ class AccountDropdowns extends Component {
},
),
h('span', {
style: { marginLeft: '20px', fontSize: '18px' },
style: {
marginLeft: '20px',
fontSize: '18px',
fontFamily: 'DIN OT',
fontSize: '16px',
lineHeight: '23px',
},
onClick: () => {
actions.showNewAccountModal()
},
@ -209,6 +217,9 @@ class AccountDropdowns extends Component {
marginLeft: '20px',
fontSize: '18px',
marginBottom: '5px',
fontFamily: 'DIN OT',
fontSize: '16px',
lineHeight: '23px',
},
}, 'Import Account'),
]
@ -251,7 +262,10 @@ class AccountDropdowns extends Component {
this.props.actions.showAccountDetailModal()
},
style: Object.assign(
{},
{
fontFamily: 'DIN OT',
fontSize: 16,
},
menuItemStyles,
),
},
@ -267,7 +281,10 @@ class AccountDropdowns extends Component {
global.platform.openWindow({ url })
},
style: Object.assign(
{},
{
fontFamily: 'DIN OT',
fontSize: 16,
},
menuItemStyles,
),
},
@ -283,7 +300,10 @@ class AccountDropdowns extends Component {
copyToClipboard(checkSumAddress)
},
style: Object.assign(
{},
{
fontFamily: 'DIN OT',
fontSize: 16,
},
menuItemStyles,
),
},
@ -297,7 +317,10 @@ class AccountDropdowns extends Component {
actions.requestAccountExport()
},
style: Object.assign(
{},
{
fontFamily: 'DIN OT',
fontSize: 16,
},
menuItemStyles,
),
},
@ -311,7 +334,10 @@ class AccountDropdowns extends Component {
actions.showAddTokenPage()
},
style: Object.assign(
{},
{
fontFamily: 'DIN OT',
fontSize: 16,
},
menuItemStyles,
),
},

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

@ -22,8 +22,7 @@ function mapDispatchToProps (dispatch) {
setProviderType: (type) => {
dispatch(actions.setProviderType(type))
},
setDefaultRpcTarget: () => {
// TODO: type is not defined. Is it needed?
setDefaultRpcTarget: type => {
dispatch(actions.setDefaultRpcTarget(type))
},
setRpcTarget: (target) => {
@ -51,6 +50,11 @@ NetworkDropdown.prototype.render = function () {
const { provider: { type: providerType, rpcTarget: activeNetwork } } = props
const rpcList = props.frequentRpcList
const isOpen = this.props.networkDropdownOpen
const dropdownMenuItemStyle = {
fontFamily: 'DIN OT',
fontSize: '16px',
lineHeight: '20px',
};
return h(Dropdown, {
useCssTransition: true,
@ -73,9 +77,10 @@ NetworkDropdown.prototype.render = function () {
position: 'absolute',
right: '2px',
top: '38px',
minWidth: '309px',
},
innerStyle: {
padding: '2px 16px 2px 0px',
padding: '10px 8px',
},
}, [
@ -85,14 +90,16 @@ NetworkDropdown.prototype.render = function () {
key: 'main',
closeMenu: () => this.props.hideNetworkDropdown(),
onClick: () => props.setProviderType('mainnet'),
style: {
fontSize: '18px',
},
style: dropdownMenuItemStyle,
},
[
providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
h('.menu-icon.diamond'),
'Main Ethereum Network',
providerType === 'mainnet' ? h('.check', '✓') : null,
h('span.network-name', {
style: {
color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b'
},
}, 'Main Ethereum Network'),
]
),
@ -102,14 +109,16 @@ NetworkDropdown.prototype.render = function () {
key: 'ropsten',
closeMenu: () => this.props.hideNetworkDropdown(),
onClick: () => props.setProviderType('ropsten'),
style: {
fontSize: '18px',
},
style: dropdownMenuItemStyle,
},
[
providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
h('.menu-icon.red-dot'),
'Ropsten Test Network',
providerType === 'ropsten' ? h('.check', '✓') : null,
h('span.network-name', {
style: {
color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b'
},
}, 'Ropsten Test Network'),
]
),
@ -119,14 +128,16 @@ NetworkDropdown.prototype.render = function () {
key: 'kovan',
closeMenu: () => this.props.hideNetworkDropdown(),
onClick: () => props.setProviderType('kovan'),
style: {
fontSize: '18px',
},
style: dropdownMenuItemStyle,
},
[
providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
h('.menu-icon.hollow-diamond'),
'Kovan Test Network',
providerType === 'kovan' ? h('.check', '✓') : null,
h('span.network-name', {
style: {
color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b'
},
}, 'Kovan Test Network'),
]
),
@ -136,14 +147,22 @@ NetworkDropdown.prototype.render = function () {
key: 'rinkeby',
closeMenu: () => this.props.hideNetworkDropdown(),
onClick: () => props.setProviderType('rinkeby'),
<<<<<<< HEAD
style: {
fontSize: '18px',
},
=======
style: dropdownMenuItemStyle,
>>>>>>> Fix menu style
},
[
providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
h('.menu-icon.golden-square'),
'Rinkeby Test Network',
providerType === 'rinkeby' ? h('.check', '✓') : null,
h('span.network-name', {
style: {
color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b'
},
}, 'Rinkeby Test Network'),
]
),
@ -153,14 +172,16 @@ NetworkDropdown.prototype.render = function () {
key: 'default',
closeMenu: () => this.props.hideNetworkDropdown(),
onClick: () => props.setDefaultRpcTarget(),
style: {
fontSize: '18px',
},
style: dropdownMenuItemStyle,
},
[
activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
'Localhost 8545',
activeNetwork === 'http://localhost:8545' ? h('.check', '✓') : null,
h('span.network-name', {
style: {
color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b'
},
}, 'Localhost 8545'),
]
),
@ -172,14 +193,16 @@ NetworkDropdown.prototype.render = function () {
{
closeMenu: () => this.props.hideNetworkDropdown(),
onClick: () => this.props.showConfigPage(),
style: {
fontSize: '18px',
},
style: dropdownMenuItemStyle,
},
[
activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'),
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
'Custom RPC',
activeNetwork === 'custom' ? h('.check', '✓') : null,
h('span.network-name', {
style: {
color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b'
},
}, 'Custom RPC'),
]
),

2
ui/app/components/wallet-view.js
View File

@ -90,7 +90,7 @@ WalletView.prototype.render = function () {
top: '14px',
},
innerStyle: {
padding: '2px 16px',
padding: '10px 16px',
},
useCssTransition: true,
selected: selectedAddress,

8
ui/app/css/itcss/components/account-dropdown.scss
View File

@ -1,10 +1,16 @@
.account-dropdown-name {
font-family: 'DIN OT';
}
.account-dropdown-balance {
color: $dusty-gray;
line-height: 19px;
}
.account-dropdown-edit-button {
color: $dusty-gray;
font-family: "DIN OT";
font-weight: 500;
&:hover {
color: $white;
}

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

@ -12,3 +12,19 @@
font-size: 10px;
flex: 1 0 auto;
}
.network-name {
font-weight: 100;
flex: 1 0 auto;
color: $dusty-gray;
}
.network-check,
.network-check__transparent {
color: $white;
margin-left: 7px;
}
.network-check__transparent {
opacity: 0;
}