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 header style; Address comments

Browse Source
This commit is contained in:
Chi Kei Chan 2017-09-04 15:55:14 -07:00
parent 9213789c44
commit 75c3009f83
10 changed files with 75 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/app/app.js
View File

@ -214,7 +214,8 @@ App.prototype.renderAppBar = function () {
h('h1', {
style: {
position: 'relative',
left: '9px',
paddingLeft: '9px',
color: '#5B5D67',
},
}, 'MetaMask'),
@ -239,7 +240,7 @@ App.prototype.renderAppBar = function () {
}),
]),
])
]),
]),
])

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,

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

@ -181,7 +181,6 @@ class AccountDropdowns extends Component {
h('span', {
style: {
marginLeft: '20px',
fontSize: '18px',
fontFamily: 'DIN OT',
fontSize: '16px',
lineHeight: '23px',
@ -215,7 +214,6 @@ class AccountDropdowns extends Component {
h('span', {
style: {
marginLeft: '20px',
fontSize: '18px',
marginBottom: '5px',
fontFamily: 'DIN OT',
fontSize: '16px',
@ -231,6 +229,10 @@ class AccountDropdowns extends Component {
renderAccountOptions () {
const { actions, dropdownWrapperStyle, useCssTransition } = this.props
const { optionsMenuActive, menuItemStyles } = this.state
const dropdownMenuItemStyle = {
fontFamily: 'DIN OT',
fontSize: 16,
}
return h(
Dropdown,
@ -262,10 +264,7 @@ class AccountDropdowns extends Component {
this.props.actions.showAccountDetailModal()
},
style: Object.assign(
{
fontFamily: 'DIN OT',
fontSize: 16,
},
dropdownMenuItemStyle,
menuItemStyles,
),
},
@ -281,10 +280,7 @@ class AccountDropdowns extends Component {
global.platform.openWindow({ url })
},
style: Object.assign(
{
fontFamily: 'DIN OT',
fontSize: 16,
},
dropdownMenuItemStyle,
menuItemStyles,
),
},
@ -300,10 +296,7 @@ class AccountDropdowns extends Component {
copyToClipboard(checkSumAddress)
},
style: Object.assign(
{
fontFamily: 'DIN OT',
fontSize: 16,
},
dropdownMenuItemStyle,
menuItemStyles,
),
},
@ -317,10 +310,7 @@ class AccountDropdowns extends Component {
actions.requestAccountExport()
},
style: Object.assign(
{
fontFamily: 'DIN OT',
fontSize: 16,
},
dropdownMenuItemStyle,
menuItemStyles,
),
},
@ -334,10 +324,7 @@ class AccountDropdowns extends Component {
actions.showAddTokenPage()
},
style: Object.assign(
{
fontFamily: 'DIN OT',
fontSize: 16,
},
dropdownMenuItemStyle,
menuItemStyles,
),
},

11
ui/app/components/dropdowns/components/dropdown.js
View File

@ -8,7 +8,15 @@ const noop = () => {}
class Dropdown extends Component {
render () {
const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props
const {
containerClassName,
isOpen,
onClickOutside,
style,
innerStyle,
children,
useCssTransition,
} = this.props
const innerStyleDefaults = extend({
borderRadius: '4px',
@ -20,6 +28,7 @@ class Dropdown extends Component {
return h(
MenuDroppo,
{
containerClassName,
useCssTransition,
isOpen,
zIndex: 30,

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

@ -54,7 +54,7 @@ NetworkDropdown.prototype.render = function () {
fontFamily: 'DIN OT',
fontSize: '16px',
lineHeight: '20px',
};
}
return h(Dropdown, {
useCssTransition: true,
@ -72,10 +72,10 @@ NetworkDropdown.prototype.render = function () {
this.props.hideNetworkDropdown()
}
},
containerClassName: 'network-droppo',
zIndex: 11,
style: {
position: 'absolute',
right: '2px',
top: '38px',
minWidth: '309px',
},
@ -95,9 +95,9 @@ NetworkDropdown.prototype.render = function () {
[
providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
h('.menu-icon.diamond'),
h('span.network-name', {
h('span.network-name-item', {
style: {
color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b'
color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
},
}, 'Main Ethereum Network'),
]
@ -114,9 +114,9 @@ NetworkDropdown.prototype.render = function () {
[
providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
h('.menu-icon.red-dot'),
h('span.network-name', {
h('span.network-name-item', {
style: {
color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b'
color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
},
}, 'Ropsten Test Network'),
]
@ -133,9 +133,9 @@ NetworkDropdown.prototype.render = function () {
[
providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
h('.menu-icon.hollow-diamond'),
h('span.network-name', {
h('span.network-name-item', {
style: {
color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b'
color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
},
}, 'Kovan Test Network'),
]
@ -152,9 +152,9 @@ NetworkDropdown.prototype.render = function () {
[
providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
h('.menu-icon.golden-square'),
h('span.network-name', {
h('span.network-name-item', {
style: {
color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b'
color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
},
}, 'Rinkeby Test Network'),
]
@ -171,9 +171,9 @@ 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('span.network-name', {
h('span.network-name-item', {
style: {
color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b'
color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
},
}, 'Localhost 8545'),
]
@ -192,9 +192,9 @@ NetworkDropdown.prototype.render = function () {
[
activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'),
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
h('span.network-name', {
h('span.network-name-item', {
style: {
color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b'
color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
},
}, 'Custom RPC'),
]

4
ui/app/components/menu-droppo.js
View File

@ -13,6 +13,7 @@ function MenuDroppoComponent () {
}
MenuDroppoComponent.prototype.render = function () {
const { containerClassName = '' } = this.props
const speed = this.props.speed || '300ms'
const useCssTransition = this.props.useCssTransition
const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
@ -26,8 +27,9 @@ MenuDroppoComponent.prototype.render = function () {
style.zIndex = zIndex
return (
h('.menu-droppo-container', {
h('div', {
style,
className: `.menu-droppo-container ${containerClassName}`,
}, [
h('style', `
.menu-droppo-enter {

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

@ -10,7 +10,7 @@
.account-dropdown-edit-button {
color: $dusty-gray;
font-family: "DIN OT";
font-weight: 500;
&:hover {
color: $white;
}

26
ui/app/css/itcss/components/header.scss
View File

@ -2,11 +2,12 @@
align-items: center;
visibility: visible;
background: $gallery;
padding: 6px 8px;
height: 14.4vh;
max-height: 97px;
position: relative;
z-index: $header-z-index;
display: flex;
flex-flow: column nowrap;
@media screen and (max-width: 575px) {
position: fixed;
@ -19,13 +20,22 @@
.app-header-contents {
display: flex;
justify-content: inherit;
justify-content: space-between;
flex-flow: row nowrap;
width: 100%;
height: 6.9vh;
@media screen and (min-width: 576px) {
width: 85vw;
}
@media screen and (min-width: 769px) {
width: 80vw;
margin-left: 10vw;
margin-bottom: 15px;
height: 6.9vh;
}
@media screen and (min-width: 1281px) {
width: 65vw;
}
}
@ -47,18 +57,10 @@ h2.page-subtitle {
display: flex;
flex-direction: row;
align-items: center;
@media screen and (min-width: 576px) {
margin-bottom: 1.8em;
}
}
.left-menu-wrapper {
display: flex;
flex-direction: row;
align-items: center;
@media screen and (min-width: 576px) {
margin-bottom: 1.8em;
}
}

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

@ -5,15 +5,30 @@
}
.network-name {
width: 5.2em;
line-height: 9px;
text-rendering: geometricPrecision;
line-height: 12px;
padding: 0 4px;
font-family: 'DIN OT';
font-size: 10px;
flex: 1 0 auto;
}
.network-name {
.network-droppo {
right: 2px;
@media screen and (min-width: 576px) {
right: calc(((100% - 85vw) / 2) + 2px);
}
@media screen and (min-width: 769px) {
right: calc(((100% - 80vw) / 2) + 2px);
}
@media screen and (min-width: 1281px) {
right: calc(((100% - 65vw) / 2) + 2px);
}
}
.network-name-item {
font-weight: 100;
flex: 1 0 auto;
color: $dusty-gray;

2
ui/app/css/itcss/components/newui-sections.scss
View File

@ -97,7 +97,7 @@ $wallet-view-bg: $wild-sand;
}
.main-container {
margin-top: 35px;
margin-top: 6.9vh;
width: 85%;
height: 90vh;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);