diff options
Diffstat (limited to 'ui/app/components')
17 files changed, 190 insertions, 34 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 171a3499f..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') @@ -70,6 +71,7 @@ export default class AppHeader extends PureComponent { <Identicon address={selectedAddress} diameter={32} + addBorder={true} /> </div> ) @@ -89,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/index.scss b/ui/app/components/app/index.scss index c8516c91c..1236f0c38 100644 --- a/ui/app/components/app/index.scss +++ b/ui/app/components/app/index.scss @@ -77,3 +77,5 @@ @import 'gas-customization/index'; @import 'gas-customization/gas-price-button-group/index'; + +@import '../ui/toggle-button/index'; diff --git a/ui/app/components/app/menu-droppo.js b/ui/app/components/app/menu-droppo.js index c80bee2be..a88cad4b4 100644 --- a/ui/app/components/app/menu-droppo.js +++ b/ui/app/components/app/menu-droppo.js @@ -2,7 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const findDOMNode = require('react-dom').findDOMNode -const ReactCSSTransitionGroup = require('react-addons-css-transition-group') +const ReactCSSTransitionGroup = require('react-transition-group/CSSTransitionGroup') module.exports = MenuDroppoComponent 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/app/modals/qr-scanner/qr-scanner.component.js b/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js index a83ba8f8e..cb8b07ff1 100644 --- a/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js +++ b/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { BrowserQRCodeReader } from '@zxing/library' -import adapter from 'webrtc-adapter' // eslint-disable-line import/no-nodejs-modules, no-unused-vars +import 'webrtc-adapter' import Spinner from '../../../ui/spinner' import WebcamUtils from '../../../../../lib/webcam-utils' import PageContainerFooter from '../../../ui/page-container/page-container-footer/page-container-footer.component' diff --git a/ui/app/components/app/sidebars/sidebar.component.js b/ui/app/components/app/sidebars/sidebar.component.js index b9e0f9e81..657982a21 100644 --- a/ui/app/components/app/sidebars/sidebar.component.js +++ b/ui/app/components/app/sidebars/sidebar.component.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import ReactCSSTransitionGroup from 'react-addons-css-transition-group' +import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' import WalletView from '../wallet-view' import { WALLET_VIEW_SIDEBAR } from './sidebar.constants' import CustomizeGas from '../gas-customization/gas-modal-page-container/' diff --git a/ui/app/components/app/sidebars/tests/sidebars-component.test.js b/ui/app/components/app/sidebars/tests/sidebars-component.test.js index cee22aca8..e2daea9b6 100644 --- a/ui/app/components/app/sidebars/tests/sidebars-component.test.js +++ b/ui/app/components/app/sidebars/tests/sidebars-component.test.js @@ -2,7 +2,7 @@ import React from 'react' import assert from 'assert' import { shallow } from 'enzyme' import sinon from 'sinon' -import ReactCSSTransitionGroup from 'react-addons-css-transition-group' +import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' import Sidebar from '../sidebar.component.js' import WalletView from '../../wallet-view' diff --git a/ui/app/components/app/transaction-status/index.scss b/ui/app/components/app/transaction-status/index.scss index 024cbf2a1..99884d28c 100644 --- a/ui/app/components/app/transaction-status/index.scss +++ b/ui/app/components/app/transaction-status/index.scss @@ -43,4 +43,10 @@ border: 1px solid $monzo; } } + + &__pending-spinner { + height: 16px; + width: 16px; + margin-right: 6px; + } } diff --git a/ui/app/components/app/transaction-status/transaction-status.component.js b/ui/app/components/app/transaction-status/transaction-status.component.js index d3a239539..a97b79bde 100644 --- a/ui/app/components/app/transaction-status/transaction-status.component.js +++ b/ui/app/components/app/transaction-status/transaction-status.component.js @@ -2,6 +2,8 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import Tooltip from '../../ui/tooltip-v2' +import Spinner from '../../ui/spinner' + import { UNAPPROVED_STATUS, REJECTED_STATUS, @@ -51,6 +53,7 @@ export default class TransactionStatus extends PureComponent { return ( <div className={classnames('transaction-status', className, statusToClassNameHash[statusKey])}> + { statusToTextHash[statusKey] === 'pending' ? <Spinner className="transaction-status__pending-spinner" /> : null } <Tooltip position="top" title={title} diff --git a/ui/app/components/ui/identicon/identicon.component.js b/ui/app/components/ui/identicon/identicon.component.js index 88521247c..5582c7d12 100644 --- a/ui/app/components/ui/identicon/identicon.component.js +++ b/ui/app/components/ui/identicon/identicon.component.js @@ -16,6 +16,7 @@ const getStyles = diameter => ( export default class Identicon extends PureComponent { static propTypes = { + addBorder: PropTypes.bool, address: PropTypes.string, className: PropTypes.string, diameter: PropTypes.number, @@ -70,7 +71,7 @@ export default class Identicon extends PureComponent { } render () { - const { className, address, image, diameter, useBlockie } = this.props + const { className, address, image, diameter, useBlockie, addBorder } = this.props if (image) { return this.renderImage() @@ -83,9 +84,11 @@ export default class Identicon extends PureComponent { return this.renderJazzicon() } - return useBlockie - ? this.renderBlockie() - : this.renderJazzicon() + return ( + <div className={classnames({ 'identicon__address-wrapper': addBorder })}> + { useBlockie ? this.renderBlockie() : this.renderJazzicon() } + </div> + ) } return ( diff --git a/ui/app/components/ui/identicon/index.scss b/ui/app/components/ui/identicon/index.scss index 657afc48f..4c8213f01 100644 --- a/ui/app/components/ui/identicon/index.scss +++ b/ui/app/components/ui/identicon/index.scss @@ -4,4 +4,17 @@ align-items: center; justify-content: center; overflow: hidden; + + &__address-wrapper { + height: 40px; + width: 40px; + border-radius: 18px; + display: flex; + justify-content: center; + align-items: center; + border-style: solid; + border-radius: 50%; + border-width: 2px; + border-color: $curious-blue; + } } 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/components/ui/toggle-button/index.js b/ui/app/components/ui/toggle-button/index.js new file mode 100644 index 000000000..7948d3ca1 --- /dev/null +++ b/ui/app/components/ui/toggle-button/index.js @@ -0,0 +1,2 @@ +import ToggleButton from './toggle-button.component' +module.exports = ToggleButton diff --git a/ui/app/components/ui/toggle-button/index.scss b/ui/app/components/ui/toggle-button/index.scss new file mode 100644 index 000000000..868d416c8 --- /dev/null +++ b/ui/app/components/ui/toggle-button/index.scss @@ -0,0 +1,14 @@ +.toggle-button { + display: flex; + + &__status-label { + font-family: Roboto; + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 23px; + display: flex; + align-items: center; + text-transform: uppercase; + } +}
\ No newline at end of file diff --git a/ui/app/components/ui/toggle-button/toggle-button.component.js b/ui/app/components/ui/toggle-button/toggle-button.component.js new file mode 100644 index 000000000..3f13203a5 --- /dev/null +++ b/ui/app/components/ui/toggle-button/toggle-button.component.js @@ -0,0 +1,75 @@ +import React from 'react' +import PropTypes from 'prop-types' +import ReactToggleButton from 'react-toggle-button' + +const trackStyle = { + width: '40px', + height: '24px', + padding: '0px', + borderRadius: '26px', + border: '2px solid rgb(3, 125, 214)', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +} + +const offTrackStyle = { + ...trackStyle, + border: '2px solid #8E8E8E', +} + +const thumbStyle = { + width: '18px', + height: '18px', + display: 'flex', + boxShadow: 'none', + alignSelf: 'center', + borderRadius: '50%', + position: 'relative', +} + +const colors = { + activeThumb: { + base: '#037DD6', + }, + inactiveThumb: { + base: '#037DD6', + }, + active: { + base: '#ffffff', + hover: '#ffffff', + }, + inactive: { + base: '#DADADA', + hover: '#DADADA', + }, +} + +const ToggleButton = props => { + const { value, onToggle, offLabel, onLabel } = props + + return ( + <div className="toggle-button"> + <ReactToggleButton + value={value} + onToggle={onToggle} + activeLabel="" + inactiveLabel="" + trackStyle={value ? trackStyle : offTrackStyle} + thumbStyle={thumbStyle} + thumbAnimateRange={[3, 18]} + colors={colors} + /> + <div className="toggle-button__status-label">{ value ? onLabel : offLabel }</div> + </div> + ) +} + +ToggleButton.propTypes = { + value: PropTypes.bool, + onToggle: PropTypes.func, + offLabel: PropTypes.string, + onLabel: PropTypes.string, +} + +export default ToggleButton |