diff options
10 files changed, 73 insertions, 91 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) + }) +}) diff --git a/ui/app/pages/first-time-flow/create-password/create-password.component.js b/ui/app/pages/first-time-flow/create-password/create-password.component.js index 5e67a2244..fbeb34d77 100644 --- a/ui/app/pages/first-time-flow/create-password/create-password.component.js +++ b/ui/app/pages/first-time-flow/create-password/create-password.component.js @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import { Switch, Route } from 'react-router-dom' import NewAccount from './new-account' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import ImportWithSeedPhrase from './import-with-seed-phrase' import { INITIALIZE_CREATE_PASSWORD_ROUTE, @@ -30,19 +31,7 @@ export default class CreatePassword extends PureComponent { return ( <div className="first-time-flow__wrapper"> - <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 /> <Switch> <Route exact diff --git a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js index 83b0e7fc6..e410ebc3c 100644 --- a/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js +++ b/ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Button from '../../../components/ui/button' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import { DEFAULT_ROUTE } from '../../../helpers/constants/routes' export default class EndOfFlowScreen extends PureComponent { @@ -21,19 +22,7 @@ export default class EndOfFlowScreen extends PureComponent { return ( <div className="end-of-flow"> - <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="end-of-flow__emoji">🎉</div> <div className="first-time-flow__header"> { t('congratulations') } 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 6b9d06cf9..e4d6afb76 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 @@ -1,5 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import PageContainerFooter from '../../../components/ui/page-container/page-container-footer' export default class MetaMetricsOptIn extends Component { @@ -28,19 +29,7 @@ export default class MetaMetricsOptIn extends Component { return ( <div className="metametrics-opt-in"> <div className="metametrics-opt-in__main"> - <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/pages/first-time-flow/seed-phrase/seed-phrase.component.js b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js index 0b19af18c..f4557115a 100644 --- a/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js +++ b/ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js @@ -10,6 +10,7 @@ import { } from '../../../helpers/constants/routes' import HTML5Backend from 'react-dnd-html5-backend' import {DragDropContextProvider} from 'react-dnd' +import MetaFoxLogo from '../../../components/ui/metafox-logo' export default class SeedPhrase extends PureComponent { static propTypes = { @@ -32,19 +33,7 @@ export default class SeedPhrase extends PureComponent { return ( <DragDropContextProvider backend={HTML5Backend}> <div className="first-time-flow__wrapper"> - <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 /> <Switch> <Route exact diff --git a/ui/app/pages/first-time-flow/select-action/select-action.component.js b/ui/app/pages/first-time-flow/select-action/select-action.component.js index 5af29a505..9e7b84e93 100644 --- a/ui/app/pages/first-time-flow/select-action/select-action.component.js +++ b/ui/app/pages/first-time-flow/select-action/select-action.component.js @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import Button from '../../../components/ui/button' +import MetaFoxLogo from '../../../components/ui/metafox-logo' import { INITIALIZE_METAMETRICS_OPT_IN_ROUTE, } from '../../../helpers/constants/routes' @@ -40,19 +41,7 @@ export default class SelectAction extends PureComponent { return ( <div className="select-action"> - <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="select-action__wrapper"> |