diff options
Diffstat (limited to 'ui/app/components')
5 files changed, 63 insertions, 26 deletions
diff --git a/ui/app/components/app/app-header/app-header.component.js b/ui/app/components/app/app-header/app-header.component.js index 0ccfa7372..7bf7a39bd 100644 --- a/ui/app/components/app/app-header/app-header.component.js +++ b/ui/app/components/app/app-header/app-header.component.js @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import Identicon from '../../ui/identicon' +import MetaFoxLogo from '../../ui/metafox-logo' import { DEFAULT_ROUTE } from '../../../helpers/constants/routes' const NetworkIndicator = require('../network') @@ -90,20 +91,10 @@ export default class AppHeader extends PureComponent { <div className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}> <div className="app-header__contents"> - <div - className="app-header__logo-container" + <MetaFoxLogo + unsetIconHeight={true} onClick={() => history.push(DEFAULT_ROUTE)} - > - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - /> - </div> + /> <div className="app-header__account-menu-container"> { !hideNetworkIndicator && ( diff --git a/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js b/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js index 0335991fc..1bf7c21b5 100644 --- a/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js +++ b/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import MetaFoxLogo from '../../../ui/metafox-logo' import PageContainerFooter from '../../../ui/page-container/page-container-footer' export default class MetaMetricsOptInModal extends Component { @@ -20,19 +21,7 @@ export default class MetaMetricsOptInModal extends Component { <div className="metametrics-opt-in metametrics-opt-in-modal"> <div className="metametrics-opt-in__main"> <div className="metametrics-opt-in__content"> - <div className="app-header__logo-container"> - <img - className="app-header__metafox-logo app-header__metafox-logo--horizontal" - src="/images/logo/metamask-logo-horizontal.svg" - height={30} - /> - <img - className="app-header__metafox-logo app-header__metafox-logo--icon" - src="/images/logo/metamask-fox.svg" - height={42} - width={42} - /> - </div> + <MetaFoxLogo /> <div className="metametrics-opt-in__body-graphic"> <img src="images/metrics-chart.svg" /> </div> diff --git a/ui/app/components/ui/metafox-logo/index.js b/ui/app/components/ui/metafox-logo/index.js new file mode 100644 index 000000000..0aeaed743 --- /dev/null +++ b/ui/app/components/ui/metafox-logo/index.js @@ -0,0 +1 @@ +export { default } from './metafox-logo.component' diff --git a/ui/app/components/ui/metafox-logo/metafox-logo.component.js b/ui/app/components/ui/metafox-logo/metafox-logo.component.js new file mode 100644 index 000000000..041e354ef --- /dev/null +++ b/ui/app/components/ui/metafox-logo/metafox-logo.component.js @@ -0,0 +1,31 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' + +export default class MetaFoxLogo extends PureComponent { + static propTypes = { + onClick: PropTypes.func, + unsetIconHeight: PropTypes.bool, + } + + render () { + const iconProps = this.props.unsetIconHeight ? {} : { height: 42, width: 42 } + + return ( + <div + onClick={this.props.onClick} + className="app-header__logo-container" + > + <img + height={30} + src="/images/logo/metamask-logo-horizontal.svg" + className="app-header__metafox-logo app-header__metafox-logo--horizontal" + /> + <img + {...iconProps} + src="/images/logo/metamask-fox.svg" + className="app-header__metafox-logo app-header__metafox-logo--icon" + /> + </div> + ) + } +} diff --git a/ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js b/ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js new file mode 100644 index 000000000..c794a004f --- /dev/null +++ b/ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js @@ -0,0 +1,25 @@ +import React from 'react' +import assert from 'assert' +import { mount } from 'enzyme' +import MetaFoxLogo from '../' + +describe('MetaFoxLogo', () => { + + it('sets icon height and width to 42 by default', () => { + const wrapper = mount( + <MetaFoxLogo /> + ) + + assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('width'), 42) + assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('height'), 42) + }) + + it('does not set icon height and width when unsetIconHeight is true', () => { + const wrapper = mount( + <MetaFoxLogo unsetIconHeight={true} /> + ) + + assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('width'), null) + assert.equal(wrapper.find('img.app-header__metafox-logo--icon').prop('height'), null) + }) +}) |