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

Center action buttons, add minor style adjustments

Browse Source
This commit is contained in:
sdtsui 2017-07-29 19:37:08 -07:00
parent 9709881679
commit 25259cc2cd
2 changed files with 83 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
ui/app/css/index.css
View File

@ -69,46 +69,48 @@ input:focus, textarea:focus {
flex-direction: column;
}
button, input[type="submit"] {
font-family: 'Montserrat Bold';
outline: none;
cursor: pointer;
padding: 8px 12px;
border: none;
color: white;
transform-origin: center center;
transition: transform 50ms ease-in;
/* default orange */
background: rgba(247, 134, 28, 1);
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
}
// TODO: remove/refactor for new design
.btn-green, input[type="submit"].btn-green {
background: rgba(106, 195, 96, 1);
box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36);
}
// button, input[type="submit"] {
// font-family: 'Montserrat Bold';
// outline: none;
// cursor: pointer;
// padding: 8px 12px;
// border: none;
// color: white;
// transform-origin: center center;
// transition: transform 50ms ease-in;
// /* default orange */
// background: rgba(247, 134, 28, 1);
// box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
// }
.btn-red {
background: rgba(254, 35, 17, 1);
box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
}
// .btn-green, input[type="submit"].btn-green {
// background: rgba(106, 195, 96, 1);
// box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36);
// }
button[disabled], input[type="submit"][disabled] {
cursor: not-allowed;
background: rgba(197, 197, 197, 1);
box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
}
// .btn-red {
// background: rgba(254, 35, 17, 1);
// box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
// }
button.spaced {
margin: 2px;
}
// button[disabled], input[type="submit"][disabled] {
// cursor: not-allowed;
// background: rgba(197, 197, 197, 1);
// box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
// }
button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
transform: scale(1.1);
}
button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
transform: scale(0.95);
}
// button.spaced {
// margin: 2px;
// }
// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover {
// transform: scale(1.1);
// }
// button:not([disabled]):active, input[type="submit"]:not([disabled]):active {
// transform: scale(0.95);
// }
a {
text-decoration: none;
@ -137,6 +139,22 @@ button.primary {
text-transform: uppercase;
}
button.light {
padding: 8px 12px;
// background: #FFFFFF; // $bg-white
box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
color: #585D67; // TODO: make reusable light button color
font-size: 1.1em;
font-family: 'Montserrat Regular';
text-transform: uppercase;
text-align: center;
line-height: 20px;
border-radius: 2px;
border: 1px solid #979797; // #TODO: make reusable light border color
opacity: 0.5;
}
// TODO: cleanup: not used anywhere
button.btn-thin {
border: 1px solid;
border-color: #4D4D4D;

48
ui/app/send.js
View File

@ -72,6 +72,7 @@ SendTransactionScreen.prototype.render = function () {
marginLeft: '3.5%',
marginRight: '3.5%',
background: '#FFFFFF', // $background-white
boxShadow: '0 2px 4px 0 rgba(0,0,0,0.08)',
}
}, [
h('section.flex-center.flex-row', {
@ -92,7 +93,7 @@ SendTransactionScreen.prototype.render = function () {
h('h3.flex-center', {
style: {
marginTop: '-15px',
marginTop: '-18px',
fontSize: '16px',
},
}, [
@ -111,6 +112,7 @@ SendTransactionScreen.prototype.render = function () {
h('h3.flex-center', {
style: {
textAlign: 'center',
marginTop: '2px',
fontSize: '12px',
},
}, [
@ -121,6 +123,7 @@ SendTransactionScreen.prototype.render = function () {
style: {
textAlign: 'center',
fontSize: '36px',
marginTop: '8px',
},
}, [
'2.34',
@ -130,6 +133,7 @@ SendTransactionScreen.prototype.render = function () {
style: {
textAlign: 'center',
fontSize: '12px',
marginTop: '4px',
},
}, [
'ANT',
@ -156,7 +160,6 @@ SendTransactionScreen.prototype.render = function () {
// 'amount' and send button
h('section.flex-column.flex-center', [
h('div.flex-row.flex-center', {
style: {
fontSize: '12px',
@ -184,7 +187,6 @@ SendTransactionScreen.prototype.render = function () {
]),
h('section.flex-column.flex-center', [
h('div.flex-row.flex-center', {
style: {
fontSize: '12px',
@ -215,8 +217,11 @@ SendTransactionScreen.prototype.render = function () {
// Optional Fields
//
h('section.flex-column.flex-center', [
h('section.flex-column.flex-center', {
style: {
marginBottom: '10px',
},
}, [
h('div.flex-row.flex-center', {
style: {
fontSize: '12px',
@ -225,7 +230,6 @@ SendTransactionScreen.prototype.render = function () {
}
},[
h('span', { style: {} }, ['Transaction Memo (optional)']),
h('span', { style: { fontSize: '8px' } }, ['What\'s this?']),
]),
h('input.large-input', {
@ -266,20 +270,28 @@ SendTransactionScreen.prototype.render = function () {
]),
// Buttons underneath card
h('section.flex-column.flex-center', [
h('button.primary', {
onClick: this.onSubmit.bind(this),
style: {
textTransform: 'uppercase',
},
}, 'Next'),
h('button.light', {
onClick: this.onSubmit.bind(this),
style: {
marginTop: '8px',
width: '8em',
background: '#FFFFFF'
},
}, 'Next'),
h('button.primary', {
onClick: this.back.bind(this),
style: {
textTransform: 'uppercase',
},
}, 'Cancel'),
h('button.light', {
onClick: this.back.bind(this),
style: {
background: '#F7F7F7', // $alabaster
border: 'none',
opacity: 1,
width: '8em',
},
}, 'Cancel'),
]),
])
)