diff options
12 files changed, 40 insertions, 26 deletions
diff --git a/test/e2e/beta/metamask-beta-responsive-ui.spec.js b/test/e2e/beta/metamask-beta-responsive-ui.spec.js index b1ed8536e..9ef560556 100644 --- a/test/e2e/beta/metamask-beta-responsive-ui.spec.js +++ b/test/e2e/beta/metamask-beta-responsive-ui.spec.js @@ -123,7 +123,7 @@ describe('MetaMask', function () { }) it('clicks the "I agree" option on the metametrics opt-in screen', async () => { - const optOutButton = await findElement(driver, By.css('.btn-confirm')) + const optOutButton = await findElement(driver, By.css('.btn-primary')) optOutButton.click() await delay(largeDelayMs) }) diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js index d4c14392f..6a58611d1 100644 --- a/test/integration/lib/send-new-ui.js +++ b/test/integration/lib/send-new-ui.js @@ -50,9 +50,6 @@ async function runSendFlowTest (assert, done) { const sendTitle = await queryAsync($, '.page-container__title') assert.equal(sendTitle[0].textContent, 'Send ETH', 'Send screen title is correct') - const sendCopy = await queryAsync($, '.page-container__subtitle') - assert.equal(sendCopy[0].textContent, 'Only send ETH to an Ethereum address.', 'Send screen has copy') - const sendFromField = await queryAsync($, '.send-v2__form-field') assert.ok(sendFromField[0], 'send screen has a from field') diff --git a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss index 0b48995e2..92b4aba42 100644 --- a/ui/app/components/app/gas-customization/gas-price-button-group/index.scss +++ b/ui/app/components/app/gas-customization/gas-price-button-group/index.scss @@ -65,6 +65,7 @@ .gas-price-button-group--small { display: flex; justify-content: stretch; + height: 54px; @media screen and (max-width: $break-small) { max-width: 260px; @@ -80,10 +81,14 @@ &__label { font-weight: 500; + line-height: 16px; + padding-bottom: 4px; } &__primary-currency { font-size: 12px; + line-height: 12px; + padding-bottom: 2px; @media screen and (max-width: 575px) { font-size: 10px; @@ -92,6 +97,8 @@ &__secondary-currency { font-size: 12px; + line-height: 12px; + padding-bottom: 2px; @media screen and (max-width: 575px) { font-size: 10px; @@ -105,11 +112,7 @@ .button-group__button, .button-group__button--active { background: white; color: $scorpion; - padding: 2px 8.5px 4px 8.5px; - - @media screen and (max-width: $break-small) { - padding-left: 4px; - } + padding: 0 4px; div { display: flex; diff --git a/ui/app/components/ui/button/button.component.js b/ui/app/components/ui/button/button.component.js index 01d946927..39e81317c 100644 --- a/ui/app/components/ui/button/button.component.js +++ b/ui/app/components/ui/button/button.component.js @@ -5,7 +5,7 @@ import classnames from 'classnames' const CLASSNAME_DEFAULT = 'btn-default' const CLASSNAME_PRIMARY = 'btn-primary' const CLASSNAME_SECONDARY = 'btn-secondary' -const CLASSNAME_CONFIRM = 'btn-confirm' +const CLASSNAME_CONFIRM = 'btn-primary' const CLASSNAME_RAISED = 'btn-raised' const CLASSNAME_LARGE = 'btn--large' const CLASSNAME_FIRST_TIME = 'btn--first-time' @@ -14,13 +14,14 @@ const typeHash = { default: CLASSNAME_DEFAULT, primary: CLASSNAME_PRIMARY, secondary: CLASSNAME_SECONDARY, - confirm: CLASSNAME_CONFIRM, - raised: CLASSNAME_RAISED, - 'first-time': CLASSNAME_FIRST_TIME, warning: 'btn-warning', danger: 'btn-danger', 'danger-primary': 'btn-danger-primary', link: 'btn-link', + // TODO: Legacy button type to be deprecated + confirm: CLASSNAME_CONFIRM, + raised: CLASSNAME_RAISED, + 'first-time': CLASSNAME_FIRST_TIME, } export default class Button extends Component { @@ -42,7 +43,7 @@ export default class Button extends Component { <button className={classnames( 'button', - typeHash[type], + typeHash[type] || CLASSNAME_DEFAULT, large && CLASSNAME_LARGE, className )} diff --git a/ui/app/components/ui/unit-input/index.scss b/ui/app/components/ui/unit-input/index.scss index e4075d225..adc4a3531 100644 --- a/ui/app/components/ui/unit-input/index.scss +++ b/ui/app/components/ui/unit-input/index.scss @@ -7,7 +7,7 @@ border-radius: 4px; background-color: #fff; color: #4d4d4d; - font-size: 1rem; + font-size: 16px; padding: 8px 10px; position: relative; @@ -29,6 +29,8 @@ &__inputs { flex: 1 0 auto; + display: flex; + flex-flow: column nowrap; } &__input { @@ -38,15 +40,20 @@ border: none; outline: 0 !important; max-width: 22ch; + height: 16px; + line-height: 18px; } &__input-container { display: flex; - align-items: center; + align-items: flex-start; + padding-bottom: 4px; } &__suffix { margin-left: 3px; + font-size: 1rem; + line-height: 1rem; } &--error { diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 91daf977e..927640f0b 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -633,14 +633,14 @@ } &__asset-dropdown { - height: 62px; + height: 54px; border: none; &__asset { display: flex; flex-flow: row nowrap; align-items: center; - padding: 10px 8px; + padding: 0 8px; cursor: pointer; &:hover { @@ -688,15 +688,22 @@ border-radius: 4px; background-color: $white; box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11); - top: 55px; + top: 65px; left: 0; box-sizing: content-box; overflow-y: scroll; + margin-top: 0; + padding: 4px 0; + + .send-v2__asset-dropdown__asset { + padding: 8px; + } } &__input-wrapper { border: 1px solid $alto; border-radius: 4px; + height: 100%; &--opened { position: relative; @@ -704,6 +711,7 @@ } .send-v2__asset-dropdown__asset { + height: 100%; &:hover { background-color: $white; } diff --git a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js index a90fe148f..cc73b2ea7 100644 --- a/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js +++ b/ui/app/pages/confirm-add-suggested-token/confirm-add-suggested-token.container.js @@ -18,7 +18,7 @@ const mapStateToProps = ({ metamask }) => { const mapDispatchToProps = dispatch => { return { - addToken: ({address, symbol, decimals, image}) => dispatch(addToken(address, symbol, decimals, image)), + addToken: ({address, symbol, decimals, image}) => dispatch(addToken(address, symbol, Number(decimals), image)), removeSuggestedTokens: () => dispatch(removeSuggestedTokens()), } } diff --git a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js index 19c668278..ffaff9acf 100644 --- a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js +++ b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js @@ -149,7 +149,7 @@ export default class MetaMetricsOptIn extends Component { }) }} submitText={'I agree'} - submitButtonType={'confirm'} + submitButtonType={'primary'} disabled={false} /> <div className="metametrics-opt-in__bottom-text"> diff --git a/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js index 256271a17..de2d9462f 100644 --- a/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js +++ b/ui/app/pages/send/send-content/send-asset-row/send-asset-row.component.js @@ -11,7 +11,7 @@ export default class SendAssetRow extends Component { tokens: PropTypes.arrayOf( PropTypes.shape({ address: PropTypes.string, - decimals: PropTypes.string, + decimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), symbol: PropTypes.string, }) ).isRequired, diff --git a/ui/app/pages/send/send-header/send-header.component.js b/ui/app/pages/send/send-header/send-header.component.js index 02bda383e..76e35494a 100644 --- a/ui/app/pages/send/send-header/send-header.component.js +++ b/ui/app/pages/send/send-header/send-header.component.js @@ -25,7 +25,6 @@ export default class SendHeader extends Component { return ( <PageContainerHeader onClose={() => this.onClose()} - subtitle={this.context.t(...this.props.subtitleParams)} title={this.context.t(this.props.titleKey)} /> ) diff --git a/ui/app/pages/send/send-header/tests/send-header-component.test.js b/ui/app/pages/send/send-header/tests/send-header-component.test.js index 4a5575e9f..91ac7e343 100644 --- a/ui/app/pages/send/send-header/tests/send-header-component.test.js +++ b/ui/app/pages/send/send-header/tests/send-header-component.test.js @@ -57,10 +57,8 @@ describe('SendHeader Component', function () { it('should pass the correct props to PageContainerHeader', () => { const { onClose, - subtitle, title, } = wrapper.find(PageContainerHeader).props() - assert.equal(subtitle, 'mockSubtitleKeymockVal') assert.equal(title, 'mockTitleKey') assert.equal(SendHeader.prototype.onClose.callCount, 0) onClose() diff --git a/ui/app/selectors/selectors.js b/ui/app/selectors/selectors.js index da9cf57c7..2d25aa156 100644 --- a/ui/app/selectors/selectors.js +++ b/ui/app/selectors/selectors.js @@ -91,7 +91,8 @@ function getAccountType (state) { } function getSelectedAsset (state) { - return getSelectedToken(state) || 'ETH' + const selectedToken = getSelectedToken(state) + return selectedToken && selectedToken.symbol || 'ETH' } function getCurrentNetworkId (state) { |