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

Address feedback

Browse Source
This commit is contained in:
David Yoo 2018-04-03 09:38:27 -07:00
parent 3d2b32167b
commit 4ddf5d2516
2 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/app/add-token.js
View File

@ -56,6 +56,7 @@ inherits(AddTokenScreen, Component)
function AddTokenScreen () { function AddTokenScreen () {
this.state = { this.state = {
isShowingConfirmation: false, isShowingConfirmation: false,
isShowingInfoBox: true,
customAddress: '', customAddress: '',
customSymbol: '', customSymbol: '',
customDecimals: '', customDecimals: '',
@ -344,18 +345,22 @@ AddTokenScreen.prototype.displayTab = function (selectedTab) {
} }
AddTokenScreen.prototype.renderTabs = function () { AddTokenScreen.prototype.renderTabs = function () {
const { displayedTab, errors } = this.state const { isShowingInfoBox, displayedTab, errors } = this.state
return displayedTab === 'CUSTOM_TOKEN' return displayedTab === 'CUSTOM_TOKEN'
? this.renderCustomForm() ? this.renderCustomForm()
: h('div', [ : h('div', [
h('div.add-token__wrapper', [ h('div.add-token__wrapper', [
h('div.add-token__content-container', [ h('div.add-token__content-container', [
h('div.add-token__info-box', [ isShowingInfoBox && h('div.add-token__info-box', [
h('div.add-token__info-box__close'), h('div.add-token__info-box__close', {
onClick: () => this.setState({ isShowingInfoBox: false }),
}),
h('div.add-token__info-box__title', this.context.t('whatsThis')), h('div.add-token__info-box__title', this.context.t('whatsThis')),
h('div.add-token__info-box__copy', this.context.t('keepTrackTokens')), h('div.add-token__info-box__copy', this.context.t('keepTrackTokens')),
h('div.add-token__info-box__copy--blue', this.context.t('learnMore')), h('a.add-token__info-box__copy--blue', {
href: 'http://metamask.helpscoutdocs.com/article/16-managing-erc20-tokens',
}, this.context.t('learnMore')),
]), ]),
h('div.add-token__input-container', [ h('div.add-token__input-container', [
h('input.add-token__input', { h('input.add-token__input', {

19
ui/app/css/itcss/components/add-token.scss
View File

@ -8,6 +8,7 @@
font-family: 'Roboto'; font-family: 'Roboto';
background: white; background: white;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.08);
&__wrapper { &__wrapper {
background-color: $white; background-color: $white;
@ -20,7 +21,7 @@
&__header { &__header {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
padding: 16px 16px 0px; padding: 20px 20px 0px;
border-bottom: 1px solid $geyser; border-bottom: 1px solid $geyser;
flex: 0 0 auto; flex: 0 0 auto;
@ -32,6 +33,7 @@
span { span {
font-family: Roboto; font-family: Roboto;
font-size: 16px; font-size: 16px;
font-weight: 400;
line-height: 21px; line-height: 21px;
margin-left: 8px; margin-left: 8px;
} }
@ -45,12 +47,12 @@
} }
&__subtitle { &__subtitle {
font-weight: 400;
margin-top: 15px; margin-top: 15px;
margin-bottom: 21px; margin-bottom: 21px;
} }
&__tabs { &__tabs {
margin-left: 22px;
display: flex; display: flex;
&__tab { &__tab {
@ -59,6 +61,7 @@
color: $dusty-gray; color: $dusty-gray;
font-family: Roboto; font-family: Roboto;
font-size: 18px; font-size: 18px;
font-weight: 400;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
} }
@ -82,7 +85,7 @@
&__info-box { &__info-box {
height: 96px; height: 96px;
margin: 20px 24px 0px; margin: 20px 20px 0px;
border-radius: 4px; border-radius: 4px;
background-color: $alabaster; background-color: $alabaster;
position: relative; position: relative;
@ -104,6 +107,7 @@
color: $mid-gray; color: $mid-gray;
font-family: Roboto; font-family: Roboto;
font-size: 14px; font-size: 14px;
font-weight: 400;
margin-top: 15px; margin-top: 15px;
margin-bottom: 9px; margin-bottom: 9px;
} }
@ -113,6 +117,7 @@
color: $mid-gray; color: $mid-gray;
font-family: Roboto; font-family: Roboto;
font-size: 12px; font-size: 12px;
font-weight: 400;
line-height: 18px; line-height: 18px;
} }
@ -130,6 +135,7 @@
} }
&__confirmation-description { &__confirmation-description {
font-weight: 400;
margin: 20px 0 40px 0; margin: 20px 0 40px 0;
} }
@ -157,7 +163,7 @@
&__input, &__input,
&__add-custom-input { &__add-custom-input {
height: 54px; height: 54px;
padding: 21px 6px; padding: 0px 20px;
border: 1px solid $geyser; border: 1px solid $geyser;
border-radius: 4px; border-radius: 4px;
margin: 22px 24px; margin: 22px 24px;
@ -238,6 +244,7 @@
&__add-custom-label { &__add-custom-label {
font-size: 16px; font-size: 16px;
font-weight: 400;
line-height: 21px; line-height: 21px;
margin-left: 22px; margin-left: 22px;
color: $scorpion; color: $scorpion;
@ -280,9 +287,11 @@
color: #5B5D67; color: #5B5D67;
font-family: Roboto; font-family: Roboto;
font-size: 18px; font-size: 18px;
font-weight: 400;
line-height: 24px; line-height: 24px;
margin-left: 24px; margin-left: 24px;
margin-top: 8px; margin-top: 8px;
margin-bottom: 20px;
} }
&__token-icons-container { &__token-icons-container {
@ -323,6 +332,7 @@
} }
&__token-name { &__token-name {
font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
} }
@ -374,6 +384,7 @@
&__symbol { &__symbol {
color: $scorpion; color: $scorpion;
font-size: 16px; font-size: 16px;
font-weight: 400;
line-height: 24px; line-height: 24px;
} }
} }