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

Create MetaFoxLogo component (#6819)

Browse Source
This commit is contained in:
ryanml 2019-07-09 10:17:58 -07:00 committed by Whymarrh Whitby
parent caa40912ac
commit daccb06a60
10 changed files with 73 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui/app/components/app/app-header/app-header.component.js
View File

@ -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 && (

15
ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
View File

@ -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>

1
ui/app/components/ui/metafox-logo/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './metafox-logo.component'

31
ui/app/components/ui/metafox-logo/metafox-logo.component.js Normal file
View File

@ -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>
)
}
}

25
ui/app/components/ui/metafox-logo/tests/metafox-logo.component.test.js Normal file
View File

@ -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)
})
})

15
ui/app/pages/first-time-flow/create-password/create-password.component.js
View File

@ -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

15
ui/app/pages/first-time-flow/end-of-flow/end-of-flow.component.js
View File

@ -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') }

15
ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
View File

@ -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>

15
ui/app/pages/first-time-flow/seed-phrase/seed-phrase.component.js
View File

@ -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

15
ui/app/pages/first-time-flow/select-action/select-action.component.js
View File

@ -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">