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

Adjust popup size to 545x450; refactor wallet view to fit

Browse Source
This commit is contained in:
sdtsui 2017-07-31 20:22:15 -07:00
parent 0c1aea97c7
commit 3797b9921f
3 changed files with 29 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/popup.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<title>MetaMask Plugin</title> <title>MetaMask Plugin</title>
</head> </head>
<body style="width:800px; height:600px; font-size: 12px"> <body style="width:545px; height:450px; font-size: 12px">
<div id="app-content"></div> <div id="app-content"></div>
<script src="./scripts/popup.js" type="text/javascript" charset="utf-8"></script> <script src="./scripts/popup.js" type="text/javascript" charset="utf-8"></script>
</body> </body>

14
ui/app/components/wallet-content-display.js
View File

@ -10,13 +10,14 @@ function WalletContentDisplay () {
} }
WalletContentDisplay.prototype.render = function () { WalletContentDisplay.prototype.render = function () {
const { title, amount, fiatValue, active } = this.props const { title, amount, fiatValue, active, style } = this.props
// TODO: Separate component: wallet-content-account
return h('div.flex-column', { return h('div.flex-column', {
style: { style: {
marginLeft: '35px', marginLeft: '1.3em',
marginTop: '15px',
alignItems: 'flex-start', alignItems: 'flex-start',
...style,
} }
}, [ }, [
@ -29,7 +30,7 @@ WalletContentDisplay.prototype.render = function () {
h('span', { h('span', {
style: { style: {
fontSize: '1.8em', fontSize: '1.8em',
margin: '10px 0px', margin: '0.4em 0em',
}, },
}, amount), }, amount),
@ -42,13 +43,14 @@ WalletContentDisplay.prototype.render = function () {
active && h('div', { active && h('div', {
style: { style: {
position: 'absolute', position: 'absolute',
marginLeft: '-35px', marginLeft: '-1.3em',
height: '6em', height: '6em',
width: '4px', width: '0.3em',
background: '#D8D8D8', // TODO: add to resuable colors background: '#D8D8D8', // TODO: add to resuable colors
} }
}, [ }, [
]) ])
]) ])
} }

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

@ -37,9 +37,7 @@ WalletView.prototype.render = function () {
// TODO: Separate component: wallet account details // TODO: Separate component: wallet account details
h('div.flex-row.flex-center', { h('div.flex-row.flex-center', {
style: { style: {
marginLeft: '35px', margin: '1.8em 1.3em',
marginRight: '35px',
marginTop: '35px',
} }
}, [ }, [
@ -52,8 +50,8 @@ WalletView.prototype.render = function () {
h('span', { h('span', {
style: { style: {
fontSize: '1.5em', fontSize: '1.2em',
marginLeft: '10px', // TODO: switch all units for this component to em marginLeft: '0.6em', // TODO: switch all units for this component to em
} }
}, [ }, [
'Account 1' 'Account 1'
@ -63,7 +61,6 @@ WalletView.prototype.render = function () {
AccountDropdowns, AccountDropdowns,
{ {
style: { style: {
marginRight: '8px',
marginLeft: 'auto', marginLeft: 'auto',
cursor: 'pointer', cursor: 'pointer',
}, },
@ -75,49 +72,15 @@ WalletView.prototype.render = function () {
]), ]),
// TODO: Separate component: wallet-content-account h(Content, {
h('div.flex-column', { title: 'Wallet',
style: { amount: '1001.124 ETH',
marginLeft: '35px', fiatValue: '$300,000.00 USD',
marginTop: '15px', active: true,
alignItems: 'flex-start', }),
}
}, [
h('span', {
style: {
fontSize: '1.1em',
},
}, 'Wallet'),
h('span', {
style: {
fontSize: '1.8em',
margin: '10px 0px',
},
}, '1001.124 ETH'),
h('span', {
style: {
fontSize: '1.3em',
},
}, '$300,000.00 USD'),
h('div', {
style: {
position: 'absolute',
marginLeft: '-35px',
height: '6em',
width: '4px',
background: '#D8D8D8', // TODO: add to resuable colors
}
}, [
])
]),
// Buy Buttons // Buy Buttons
// for index.css // for index.css
//
// TODO: move into a class // TODO: move into a class
// div.wallet-btn { // div.wallet-btn {
// border: 1px solid rgb(91, 93, 103); // border: 1px solid rgb(91, 93, 103);
@ -131,32 +94,32 @@ WalletView.prototype.render = function () {
h('div.flex-row', { h('div.flex-row', {
style: { style: {
marginLeft: '35px', marginLeft: '1.3em',
marginTop: '10px', marginTop: '0.8em',
} }
}, [ }, [
h('div', { h('div', {
style: { style: {
border: '1px solid rgb(91, 93, 103)', border: '1px solid rgb(91, 93, 103)',
borderRadius: '2px', borderRadius: '2px',
height: '30px', height: '28px',
width: '75px', width: '70px',
fontSize: '0.8em', fontSize: '0.8em',
textAlign: 'center', textAlign: 'center',
lineHeight: '25px', lineHeight: '25px',
marginLeft: '.6em',
} }
}, 'BUY'), }, 'BUY'),
h('div.wallet-btn', { h('div.wallet-btn', {
style: { style: {
border: '1px solid rgb(91, 93, 103)', border: '1px solid rgb(91, 93, 103)',
borderRadius: '2px', borderRadius: '2px',
height: '30px', height: '28px',
width: '75px', width: '70px',
fontSize: '0.8em', fontSize: '0.8em',
textAlign: 'center', textAlign: 'center',
lineHeight: '25px', lineHeight: '25px',
// spacing... marginLeft: '.6em',
marginLeft: '15px',
} }
}, 'SEND'), }, 'SEND'),
]), ]),
@ -167,6 +130,9 @@ WalletView.prototype.render = function () {
amount: "45.439 ETH", amount: "45.439 ETH",
fiatValue: "$13,000.00 USD", fiatValue: "$13,000.00 USD",
active: false, active: false,
style: {
marginTop: '1.3em',
}
}) })
]) ])