mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Fix header style; Address comments
This commit is contained in:
parent
9213789c44
commit
75c3009f83
@ -214,7 +214,8 @@ App.prototype.renderAppBar = function () {
|
|||||||
h('h1', {
|
h('h1', {
|
||||||
style: {
|
style: {
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
left: '9px',
|
paddingLeft: '9px',
|
||||||
|
color: '#5B5D67',
|
||||||
},
|
},
|
||||||
}, 'MetaMask'),
|
}, 'MetaMask'),
|
||||||
|
|
||||||
@ -239,7 +240,7 @@ App.prototype.renderAppBar = function () {
|
|||||||
}),
|
}),
|
||||||
|
|
||||||
]),
|
]),
|
||||||
])
|
]),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
])
|
])
|
||||||
|
@ -15,7 +15,7 @@ module.exports = AccountSelectionDropdown
|
|||||||
// TODO: selectedAddress is not defined... should we use selected?
|
// TODO: selectedAddress is not defined... should we use selected?
|
||||||
AccountSelectionDropdown.prototype.render = function () {
|
AccountSelectionDropdown.prototype.render = function () {
|
||||||
const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
|
const { selected, network, identities, style, dropdownWrapperStyle, menuItemStyles } = this.props
|
||||||
console.log({style})
|
|
||||||
return h(AccountDropdowns, {
|
return h(AccountDropdowns, {
|
||||||
enableAccountOptions: false,
|
enableAccountOptions: false,
|
||||||
enableAccountsSelector: true,
|
enableAccountsSelector: true,
|
||||||
|
@ -181,7 +181,6 @@ class AccountDropdowns extends Component {
|
|||||||
h('span', {
|
h('span', {
|
||||||
style: {
|
style: {
|
||||||
marginLeft: '20px',
|
marginLeft: '20px',
|
||||||
fontSize: '18px',
|
|
||||||
fontFamily: 'DIN OT',
|
fontFamily: 'DIN OT',
|
||||||
fontSize: '16px',
|
fontSize: '16px',
|
||||||
lineHeight: '23px',
|
lineHeight: '23px',
|
||||||
@ -215,7 +214,6 @@ class AccountDropdowns extends Component {
|
|||||||
h('span', {
|
h('span', {
|
||||||
style: {
|
style: {
|
||||||
marginLeft: '20px',
|
marginLeft: '20px',
|
||||||
fontSize: '18px',
|
|
||||||
marginBottom: '5px',
|
marginBottom: '5px',
|
||||||
fontFamily: 'DIN OT',
|
fontFamily: 'DIN OT',
|
||||||
fontSize: '16px',
|
fontSize: '16px',
|
||||||
@ -231,6 +229,10 @@ class AccountDropdowns extends Component {
|
|||||||
renderAccountOptions () {
|
renderAccountOptions () {
|
||||||
const { actions, dropdownWrapperStyle, useCssTransition } = this.props
|
const { actions, dropdownWrapperStyle, useCssTransition } = this.props
|
||||||
const { optionsMenuActive, menuItemStyles } = this.state
|
const { optionsMenuActive, menuItemStyles } = this.state
|
||||||
|
const dropdownMenuItemStyle = {
|
||||||
|
fontFamily: 'DIN OT',
|
||||||
|
fontSize: 16,
|
||||||
|
}
|
||||||
|
|
||||||
return h(
|
return h(
|
||||||
Dropdown,
|
Dropdown,
|
||||||
@ -262,10 +264,7 @@ class AccountDropdowns extends Component {
|
|||||||
this.props.actions.showAccountDetailModal()
|
this.props.actions.showAccountDetailModal()
|
||||||
},
|
},
|
||||||
style: Object.assign(
|
style: Object.assign(
|
||||||
{
|
dropdownMenuItemStyle,
|
||||||
fontFamily: 'DIN OT',
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
menuItemStyles,
|
menuItemStyles,
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
@ -281,10 +280,7 @@ class AccountDropdowns extends Component {
|
|||||||
global.platform.openWindow({ url })
|
global.platform.openWindow({ url })
|
||||||
},
|
},
|
||||||
style: Object.assign(
|
style: Object.assign(
|
||||||
{
|
dropdownMenuItemStyle,
|
||||||
fontFamily: 'DIN OT',
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
menuItemStyles,
|
menuItemStyles,
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
@ -300,10 +296,7 @@ class AccountDropdowns extends Component {
|
|||||||
copyToClipboard(checkSumAddress)
|
copyToClipboard(checkSumAddress)
|
||||||
},
|
},
|
||||||
style: Object.assign(
|
style: Object.assign(
|
||||||
{
|
dropdownMenuItemStyle,
|
||||||
fontFamily: 'DIN OT',
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
menuItemStyles,
|
menuItemStyles,
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
@ -317,10 +310,7 @@ class AccountDropdowns extends Component {
|
|||||||
actions.requestAccountExport()
|
actions.requestAccountExport()
|
||||||
},
|
},
|
||||||
style: Object.assign(
|
style: Object.assign(
|
||||||
{
|
dropdownMenuItemStyle,
|
||||||
fontFamily: 'DIN OT',
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
menuItemStyles,
|
menuItemStyles,
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
@ -334,10 +324,7 @@ class AccountDropdowns extends Component {
|
|||||||
actions.showAddTokenPage()
|
actions.showAddTokenPage()
|
||||||
},
|
},
|
||||||
style: Object.assign(
|
style: Object.assign(
|
||||||
{
|
dropdownMenuItemStyle,
|
||||||
fontFamily: 'DIN OT',
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
menuItemStyles,
|
menuItemStyles,
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
@ -8,7 +8,15 @@ const noop = () => {}
|
|||||||
|
|
||||||
class Dropdown extends Component {
|
class Dropdown extends Component {
|
||||||
render () {
|
render () {
|
||||||
const { isOpen, onClickOutside, style, innerStyle, children, useCssTransition } = this.props
|
const {
|
||||||
|
containerClassName,
|
||||||
|
isOpen,
|
||||||
|
onClickOutside,
|
||||||
|
style,
|
||||||
|
innerStyle,
|
||||||
|
children,
|
||||||
|
useCssTransition,
|
||||||
|
} = this.props
|
||||||
|
|
||||||
const innerStyleDefaults = extend({
|
const innerStyleDefaults = extend({
|
||||||
borderRadius: '4px',
|
borderRadius: '4px',
|
||||||
@ -20,6 +28,7 @@ class Dropdown extends Component {
|
|||||||
return h(
|
return h(
|
||||||
MenuDroppo,
|
MenuDroppo,
|
||||||
{
|
{
|
||||||
|
containerClassName,
|
||||||
useCssTransition,
|
useCssTransition,
|
||||||
isOpen,
|
isOpen,
|
||||||
zIndex: 30,
|
zIndex: 30,
|
||||||
|
@ -54,7 +54,7 @@ NetworkDropdown.prototype.render = function () {
|
|||||||
fontFamily: 'DIN OT',
|
fontFamily: 'DIN OT',
|
||||||
fontSize: '16px',
|
fontSize: '16px',
|
||||||
lineHeight: '20px',
|
lineHeight: '20px',
|
||||||
};
|
}
|
||||||
|
|
||||||
return h(Dropdown, {
|
return h(Dropdown, {
|
||||||
useCssTransition: true,
|
useCssTransition: true,
|
||||||
@ -72,10 +72,10 @@ NetworkDropdown.prototype.render = function () {
|
|||||||
this.props.hideNetworkDropdown()
|
this.props.hideNetworkDropdown()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
containerClassName: 'network-droppo',
|
||||||
zIndex: 11,
|
zIndex: 11,
|
||||||
style: {
|
style: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
right: '2px',
|
|
||||||
top: '38px',
|
top: '38px',
|
||||||
minWidth: '309px',
|
minWidth: '309px',
|
||||||
},
|
},
|
||||||
@ -95,9 +95,9 @@ NetworkDropdown.prototype.render = function () {
|
|||||||
[
|
[
|
||||||
providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
|
providerType === 'mainnet' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
|
||||||
h('.menu-icon.diamond'),
|
h('.menu-icon.diamond'),
|
||||||
h('span.network-name', {
|
h('span.network-name-item', {
|
||||||
style: {
|
style: {
|
||||||
color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b'
|
color: providerType === 'mainnet' ? '#ffffff' : '#9b9b9b',
|
||||||
},
|
},
|
||||||
}, 'Main Ethereum Network'),
|
}, 'Main Ethereum Network'),
|
||||||
]
|
]
|
||||||
@ -114,9 +114,9 @@ NetworkDropdown.prototype.render = function () {
|
|||||||
[
|
[
|
||||||
providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
|
providerType === 'ropsten' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
|
||||||
h('.menu-icon.red-dot'),
|
h('.menu-icon.red-dot'),
|
||||||
h('span.network-name', {
|
h('span.network-name-item', {
|
||||||
style: {
|
style: {
|
||||||
color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b'
|
color: providerType === 'ropsten' ? '#ffffff' : '#9b9b9b',
|
||||||
},
|
},
|
||||||
}, 'Ropsten Test Network'),
|
}, 'Ropsten Test Network'),
|
||||||
]
|
]
|
||||||
@ -133,9 +133,9 @@ NetworkDropdown.prototype.render = function () {
|
|||||||
[
|
[
|
||||||
providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
|
providerType === 'kovan' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
|
||||||
h('.menu-icon.hollow-diamond'),
|
h('.menu-icon.hollow-diamond'),
|
||||||
h('span.network-name', {
|
h('span.network-name-item', {
|
||||||
style: {
|
style: {
|
||||||
color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b'
|
color: providerType === 'kovan' ? '#ffffff' : '#9b9b9b',
|
||||||
},
|
},
|
||||||
}, 'Kovan Test Network'),
|
}, 'Kovan Test Network'),
|
||||||
]
|
]
|
||||||
@ -152,9 +152,9 @@ NetworkDropdown.prototype.render = function () {
|
|||||||
[
|
[
|
||||||
providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
|
providerType === 'rinkeby' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
|
||||||
h('.menu-icon.golden-square'),
|
h('.menu-icon.golden-square'),
|
||||||
h('span.network-name', {
|
h('span.network-name-item', {
|
||||||
style: {
|
style: {
|
||||||
color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b'
|
color: providerType === 'rinkeby' ? '#ffffff' : '#9b9b9b',
|
||||||
},
|
},
|
||||||
}, 'Rinkeby Test Network'),
|
}, 'Rinkeby Test Network'),
|
||||||
]
|
]
|
||||||
@ -171,9 +171,9 @@ NetworkDropdown.prototype.render = function () {
|
|||||||
[
|
[
|
||||||
activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
|
activeNetwork === 'http://localhost:8545' ? h('.network-check', '✓') : h('.network-check__transparent', '✓'),
|
||||||
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
||||||
h('span.network-name', {
|
h('span.network-name-item', {
|
||||||
style: {
|
style: {
|
||||||
color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b'
|
color: activeNetwork === 'http://localhost:8545' ? '#ffffff' : '#9b9b9b',
|
||||||
},
|
},
|
||||||
}, 'Localhost 8545'),
|
}, 'Localhost 8545'),
|
||||||
]
|
]
|
||||||
@ -192,9 +192,9 @@ NetworkDropdown.prototype.render = function () {
|
|||||||
[
|
[
|
||||||
activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'),
|
activeNetwork === 'custom' ? h('.check', '✓') : h('.network-check__transparent', '✓'),
|
||||||
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
h('i.fa.fa-question-circle.fa-lg.menu-icon'),
|
||||||
h('span.network-name', {
|
h('span.network-name-item', {
|
||||||
style: {
|
style: {
|
||||||
color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b'
|
color: activeNetwork === 'custom' ? '#ffffff' : '#9b9b9b',
|
||||||
},
|
},
|
||||||
}, 'Custom RPC'),
|
}, 'Custom RPC'),
|
||||||
]
|
]
|
||||||
|
@ -13,6 +13,7 @@ function MenuDroppoComponent () {
|
|||||||
}
|
}
|
||||||
|
|
||||||
MenuDroppoComponent.prototype.render = function () {
|
MenuDroppoComponent.prototype.render = function () {
|
||||||
|
const { containerClassName = '' } = this.props
|
||||||
const speed = this.props.speed || '300ms'
|
const speed = this.props.speed || '300ms'
|
||||||
const useCssTransition = this.props.useCssTransition
|
const useCssTransition = this.props.useCssTransition
|
||||||
const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
|
const zIndex = ('zIndex' in this.props) ? this.props.zIndex : 0
|
||||||
@ -26,8 +27,9 @@ MenuDroppoComponent.prototype.render = function () {
|
|||||||
style.zIndex = zIndex
|
style.zIndex = zIndex
|
||||||
|
|
||||||
return (
|
return (
|
||||||
h('.menu-droppo-container', {
|
h('div', {
|
||||||
style,
|
style,
|
||||||
|
className: `.menu-droppo-container ${containerClassName}`,
|
||||||
}, [
|
}, [
|
||||||
h('style', `
|
h('style', `
|
||||||
.menu-droppo-enter {
|
.menu-droppo-enter {
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
.account-dropdown-edit-button {
|
.account-dropdown-edit-button {
|
||||||
color: $dusty-gray;
|
color: $dusty-gray;
|
||||||
font-family: "DIN OT";
|
font-family: "DIN OT";
|
||||||
font-weight: 500;
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
|
@ -2,11 +2,12 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
background: $gallery;
|
background: $gallery;
|
||||||
padding: 6px 8px;
|
|
||||||
height: 14.4vh;
|
height: 14.4vh;
|
||||||
max-height: 97px;
|
max-height: 97px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: $header-z-index;
|
z-index: $header-z-index;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
|
||||||
@media screen and (max-width: 575px) {
|
@media screen and (max-width: 575px) {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -19,13 +20,22 @@
|
|||||||
|
|
||||||
.app-header-contents {
|
.app-header-contents {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: inherit;
|
justify-content: space-between;
|
||||||
|
flex-flow: row nowrap;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 6.9vh;
|
||||||
|
|
||||||
@media screen and (min-width: 576px) {
|
@media screen and (min-width: 576px) {
|
||||||
|
width: 85vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 769px) {
|
||||||
width: 80vw;
|
width: 80vw;
|
||||||
margin-left: 10vw;
|
height: 6.9vh;
|
||||||
margin-bottom: 15px;
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1281px) {
|
||||||
|
width: 65vw;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,18 +57,10 @@ h2.page-subtitle {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@media screen and (min-width: 576px) {
|
|
||||||
margin-bottom: 1.8em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-menu-wrapper {
|
.left-menu-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@media screen and (min-width: 576px) {
|
|
||||||
margin-bottom: 1.8em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -5,15 +5,30 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.network-name {
|
.network-name {
|
||||||
width: 5.2em;
|
line-height: 12px;
|
||||||
line-height: 9px;
|
padding: 0 4px;
|
||||||
text-rendering: geometricPrecision;
|
|
||||||
font-family: 'DIN OT';
|
font-family: 'DIN OT';
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
flex: 1 0 auto;
|
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;
|
font-weight: 100;
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
color: $dusty-gray;
|
color: $dusty-gray;
|
||||||
|
@ -97,7 +97,7 @@ $wallet-view-bg: $wild-sand;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-top: 35px;
|
margin-top: 6.9vh;
|
||||||
width: 85%;
|
width: 85%;
|
||||||
height: 90vh;
|
height: 90vh;
|
||||||
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
|
box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
|
||||||
|
Loading…
Reference in New Issue
Block a user