From 7dd922e7c07d79c2022f8fdfb2c7c996eb3c459a Mon Sep 17 00:00:00 2001 From: Gina Contrino Date: Tue, 6 Feb 2018 18:42:30 +0100 Subject: [PATCH 01/10] Improve header and search XS --- src/components/header/header.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/header/header.css b/src/components/header/header.css index 3e4c9ad3c3..408df568c8 100644 --- a/src/components/header/header.css +++ b/src/components/header/header.css @@ -90,6 +90,11 @@ display: inline-block; } +.rightSide { + display: inline-block; + width: 32vw; /* stylelint-disable-line */ +} + .account { position: relative; height: 80px; From ff622ea6634888fbd66305126b2f5f17044230e4 Mon Sep 17 00:00:00 2001 From: Gina Contrino Date: Wed, 7 Feb 2018 16:59:31 +0100 Subject: [PATCH 02/10] Add "send to this address" --- i18n/locales/en/common.json | 1 + src/components/accountTransactions/index.js | 4 +- src/components/app/variables.css | 3 +- src/components/sendTo/index.js | 39 +++++++ src/components/sendTo/sendTo.css | 107 ++++++++++++++++++ src/components/toolbox/buttons/button.js | 13 ++- src/components/toolbox/buttons/css/base.css | 10 ++ .../toolbox/buttons/css/tertiaryButton.css | 8 ++ 8 files changed, 179 insertions(+), 6 deletions(-) create mode 100644 src/components/sendTo/index.js create mode 100644 src/components/sendTo/sendTo.css create mode 100644 src/components/toolbox/buttons/css/tertiaryButton.css diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index a07f65dbe9..3fb0199ce9 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -169,6 +169,7 @@ "Send Lisk from Blockchain Application": "Send Lisk from Blockchain Application", "Send Lisk to Blockchain Application": "Send Lisk to Blockchain Application", "Send to Address": "Send to Address", + "Send to this address": "Send to this address", "Sender": "Sender", "Settings": "Settings", "Show passphrase": "Show passphrase", diff --git a/src/components/accountTransactions/index.js b/src/components/accountTransactions/index.js index 4dc5ebae7c..0dd73259a4 100644 --- a/src/components/accountTransactions/index.js +++ b/src/components/accountTransactions/index.js @@ -4,7 +4,7 @@ import { translate } from 'react-i18next'; import grid from 'flexboxgrid/dist/flexboxgrid.css'; import { transactionsRequestInit } from '../../actions/transactions'; import Transactions from './../transactions'; -import Send from '../send'; +import SendTo from '../sendTo'; import styles from './accountTransactions.css'; class accountTransactions extends React.Component { @@ -18,7 +18,7 @@ class accountTransactions extends React.Component { render() { return
- +
+ +
+

+ + + LSK +

+ +
+ + + {this.props.t('Send to this address')} + + + + ); + } +} + +export default (translate()(SendTo)); diff --git a/src/components/sendTo/sendTo.css b/src/components/sendTo/sendTo.css new file mode 100644 index 0000000000..4d4f08dfa9 --- /dev/null +++ b/src/components/sendTo/sendTo.css @@ -0,0 +1,107 @@ +@import '../app/variables.css'; + +:root { + --header-address-font-weight: var(--font-weight-semi-bold); + --header-balance-unit-font-size-XL: 20px; + --header-balance-unit-font-size-L: 18px; + --header-balance-unit-font-size-XS: 18px; + --header-subtitle-font-size-XL: 18px; + --header-subtitle-font-size-L: 16px; + --header-subtitle-font-size-XS: 16px; + --main-header-font-size-XL: 32px; + --main-header-font-size-L: 28px; + --main-header-font-size-XS: 24px; +} + +.wrapper { + padding: 9.2vh 42px; /* stylelint-disable-line */ + text-align: center; + line-height: 36px; + + & .account { + margin-bottom: 8.5vh; /* stylelint-disable-line */ + + & .copy { + color: var(--color-grayscale-medium); + } + + & h2 { + margin-bottom: 0; + font-weight: var(--font-weight-semi-bold); + + & .balanceUnit { + font-weight: var(--font-weight-semi-bold); + } + } + + & .address { + color: var(--color-grayscale-dark); + } + } + + & .button { + font-weight: var(--font-weight-bold); + font-size: 16px; + letter-spacing: 0; + line-height: 18px; + text-transform: none; + } +} + +@media (--xLarge-viewport) { + .wrapper { + & h2 { + font-size: var(--main-header-font-size-XL); + + & .balanceUnit { + font-size: var(--header-balance-unit-font-size-XL); + } + } + + & .address { + font-size: var(--header-subtitle-font-size-XL); + } + } +} + +@media (--large-viewport) { + .wrapper { + & h2 { + font-size: var(--main-header-font-size-L); + + & .balanceUnit { + font-size: var(--header-balance-unit-font-size-L); + } + } + + & .address { + font-size: var(--header-subtitle-font-size-L); + } + } +} + +@media (--medium-viewport) { + .wrapper { + flex-direction: row; + min-height: 1px; + height: auto; + background: var(--color-grayscale-darker-mobile-background); + } +} + +@media (--small-viewport) { + .wrapper { + & h2 { + font-size: var(--main-header-font-size-XS); + + & .balanceUnit { + font-size: var(--header-balance-unit-font-size-XS); + } + } + + & .address { + font-size: var(--header-subtitle-font-size-XS); + } + } +} + diff --git a/src/components/toolbox/buttons/button.js b/src/components/toolbox/buttons/button.js index e2e5499d9a..a32b1570f3 100644 --- a/src/components/toolbox/buttons/button.js +++ b/src/components/toolbox/buttons/button.js @@ -4,6 +4,7 @@ import { Button as ToolBoxButton } from 'react-toolbox/lib/button'; import secondaryBlueButtonTheme from './css/secondaryBlueButton.css'; import secondaryLightButtonTheme from './css/secondaryLightButton.css'; import primaryButtonTheme from './css/primaryButton.css'; +import tertiaryButtonTheme from './css/tertiaryButton.css'; import actionButtonTheme from './css/actionButton.css'; class TBSecondaryBlueButton extends React.Component { @@ -24,16 +25,24 @@ class TBSecondaryLightButton extends React.Component { } } +class TBTertiaryButton extends React.Component { + render() { + return ; + } +} + class TBActionButton extends React.Component { render() { return ; } } + const PrimaryButton = themr('importantButton', primaryButtonTheme)(TBPrimaryButton); const SecondaryLightButton = themr('lightButton', secondaryLightButtonTheme)(TBSecondaryLightButton); -const ActionButton = themr('lightButton', actionButtonTheme)(TBActionButton); +const TertiaryButton = themr('tertiaryButton', tertiaryButtonTheme)(TBTertiaryButton); +const ActionButton = themr('actionButton', actionButtonTheme)(TBActionButton); const Button = themr('button', secondaryBlueButtonTheme)(TBSecondaryBlueButton); -export { Button, PrimaryButton, SecondaryLightButton, ActionButton }; +export { Button, PrimaryButton, SecondaryLightButton, TertiaryButton, ActionButton }; export default Button; diff --git a/src/components/toolbox/buttons/css/base.css b/src/components/toolbox/buttons/css/base.css index f7a66331fb..1896e3c1fc 100644 --- a/src/components/toolbox/buttons/css/base.css +++ b/src/components/toolbox/buttons/css/base.css @@ -5,6 +5,7 @@ border-radius: 3px; font-size: 18px; text-transform: capitalize; + font-family: var(--content-font) !important; transition: none !important; &:disabled { @@ -50,6 +51,15 @@ } } +@define-mixin buttonTertiary { + color: var(--color-white) !important; + background: var(--gradient-tertiary); + + &:hover { + background: var(--color-tertiary-medium) !important; + } +} + @define-mixin buttonAction { color: var(--color-white) !important; background: var(--gradient-action-blue); diff --git a/src/components/toolbox/buttons/css/tertiaryButton.css b/src/components/toolbox/buttons/css/tertiaryButton.css new file mode 100644 index 0000000000..40d33fbc13 --- /dev/null +++ b/src/components/toolbox/buttons/css/tertiaryButton.css @@ -0,0 +1,8 @@ +@import './base.css'; + +.button { + min-height: 60px; + + @mixin buttonBasics; + @mixin buttonTertiary; +} From 2508af4f8c94fa886708f1d5e08b88f68ea422a1 Mon Sep 17 00:00:00 2001 From: Gina Contrino Date: Thu, 8 Feb 2018 17:37:43 +0100 Subject: [PATCH 03/10] Use grid for component --- .../accountTransactions.css | 4 ++ src/components/accountTransactions/index.js | 2 +- src/components/sendTo/index.js | 68 ++++++++++++++----- src/components/sendTo/sendTo.css | 21 +++++- 4 files changed, 77 insertions(+), 18 deletions(-) diff --git a/src/components/accountTransactions/accountTransactions.css b/src/components/accountTransactions/accountTransactions.css index fbf03b66ce..483d57e9ba 100644 --- a/src/components/accountTransactions/accountTransactions.css +++ b/src/components/accountTransactions/accountTransactions.css @@ -7,6 +7,10 @@ .wrapper { min-width: 100%; + + & .sendTo { + width: 100%; + } } @media (--xLarge-viewport) { diff --git a/src/components/accountTransactions/index.js b/src/components/accountTransactions/index.js index 0dd73259a4..f42a82e3fa 100644 --- a/src/components/accountTransactions/index.js +++ b/src/components/accountTransactions/index.js @@ -17,7 +17,7 @@ class accountTransactions extends React.Component { // eslint-disable-next-line class-methods-use-this render() { return
-
+
diff --git a/src/components/sendTo/index.js b/src/components/sendTo/index.js index 895ad2c89a..7299fd5081 100644 --- a/src/components/sendTo/index.js +++ b/src/components/sendTo/index.js @@ -1,6 +1,7 @@ import React from 'react'; import { translate } from 'react-i18next'; import { Link } from 'react-router-dom'; +import grid from 'flexboxgrid/dist/flexboxgrid.css'; import { TertiaryButton } from './../toolbox/buttons/button'; import { FontIcon } from '../fontIcon'; import Box from '../box'; @@ -11,26 +12,61 @@ import routes from './../../constants/routes'; import styles from './sendTo.css'; class SendTo extends React.Component { - shouldComponentUpdate(nextProps) { - return nextProps.address !== this.props.address; + constructor() { + super(); + this.state = { isMobile: window.innerWidth < 1024 }; } + shouldComponentUpdate(nextProps, state) { + return nextProps.address !== this.props.address || this.state.isMobile !== state.isMobile; + } + + resizeWindow() { + this.setState({ isMobile: window.innerWidth < 1024 }); + } + + componentDidMount() { + window.addEventListener('resize', this.resizeWindow.bind(this)); + } + + componentWillUnmount() { + window.removeEventListener('resize', this.resizeWindow.bind(this)); + } render() { - return ( - -
-

- - - LSK -

- + return ( +
+ +
+

+ + + LSK +

+ +
+
+
+ + + {this.props.t('Send to this address')} + +
- - - {this.props.t('Send to this address')} - - ); } diff --git a/src/components/sendTo/sendTo.css b/src/components/sendTo/sendTo.css index 4d4f08dfa9..fbbd36c1ee 100644 --- a/src/components/sendTo/sendTo.css +++ b/src/components/sendTo/sendTo.css @@ -17,6 +17,7 @@ padding: 9.2vh 42px; /* stylelint-disable-line */ text-align: center; line-height: 36px; + display: block; & .account { margin-bottom: 8.5vh; /* stylelint-disable-line */ @@ -39,12 +40,17 @@ } } + & .sendButton { + margin: auto 0px; + } + & .button { font-weight: var(--font-weight-bold); font-size: 16px; letter-spacing: 0; line-height: 18px; text-transform: none; + width: 100%; } } @@ -86,6 +92,20 @@ min-height: 1px; height: auto; background: var(--color-grayscale-darker-mobile-background); + display: flex; + + & .account { + margin: auto 0px; + text-align: left; + + & h2 { + margin: 0px; + } + } + + .sendButton { + margin: auto 0px; + } } } @@ -104,4 +124,3 @@ } } } - From cd1f3d033e1b5737950c72cae440533a81cb99ce Mon Sep 17 00:00:00 2001 From: Gina Contrino Date: Thu, 8 Feb 2018 18:15:49 +0100 Subject: [PATCH 04/10] Insert address to receiver field if given --- src/components/sendWritable/index.js | 3 ++- src/components/sendWritable/index.test.js | 3 ++- src/components/sendWritable/send.js | 10 ++++++---- src/components/sendWritable/send.test.js | 1 + 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/sendWritable/index.js b/src/components/sendWritable/index.js index 346ada2917..226d4eaeb4 100644 --- a/src/components/sendWritable/index.js +++ b/src/components/sendWritable/index.js @@ -1,5 +1,6 @@ import { connect } from 'react-redux'; import { translate } from 'react-i18next'; +import { withRouter } from 'react-router-dom'; import { sent } from '../../actions/account'; import Send from './send'; @@ -14,4 +15,4 @@ const mapDispatchToProps = dispatch => ({ sent: data => dispatch(sent(data)), }); -export default connect(mapStateToProps, mapDispatchToProps)(translate()(Send)); +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(translate()(Send))); diff --git a/src/components/sendWritable/index.test.js b/src/components/sendWritable/index.test.js index b0ab5a431c..18a85d0c73 100644 --- a/src/components/sendWritable/index.test.js +++ b/src/components/sendWritable/index.test.js @@ -1,4 +1,5 @@ import React from 'react'; +import { MemoryRouter as Router } from 'react-router-dom'; import { expect } from 'chai'; import { mount } from 'enzyme'; import { Provider } from 'react-redux'; @@ -22,7 +23,7 @@ describe('SendWritableHOC', () => { }); store.subscribe = () => {}; store.dispatch = () => {}; - wrapper = mount(); + wrapper = mount(); }); it('should render Send', () => { diff --git a/src/components/sendWritable/send.js b/src/components/sendWritable/send.js index 8476074ea9..862e82b570 100644 --- a/src/components/sendWritable/send.js +++ b/src/components/sendWritable/send.js @@ -1,5 +1,6 @@ import React from 'react'; import { fromRawLsk } from '../../utils/lsk'; +import { parseSearchParams } from './../../utils/searchParams'; import { Button } from './../toolbox/buttons/button'; import { authStatePrefill } from '../../utils/form'; import AccountVisual from '../accountVisual'; @@ -10,11 +11,12 @@ import regex from './../../utils/regex'; import inputTheme from './input.css'; class SendWritable extends React.Component { - constructor() { - super(); + constructor(props) { + super(props); + const { address } = parseSearchParams(props.history.location.search); this.state = { recipient: { - value: '', + value: address || '', }, amount: { value: '', @@ -31,7 +33,7 @@ class SendWritable extends React.Component { componentDidMount() { const newState = { recipient: { - value: this.props.recipient || '', + value: this.props.recipient || this.state.recipient.value, }, amount: { value: this.props.amount || '', diff --git a/src/components/sendWritable/send.test.js b/src/components/sendWritable/send.test.js index 71d1b3cffe..d71fe171ee 100644 --- a/src/components/sendWritable/send.test.js +++ b/src/components/sendWritable/send.test.js @@ -29,6 +29,7 @@ describe('Send Writable Component', () => { sent: sinon.spy(), t: key => key, nextStep: () => {}, + history: { location: { search: '' } }, }; wrapper = mount(, { context: { store, i18n }, From 5751bd98c70b1053afe071f64ffd35e84e3296f8 Mon Sep 17 00:00:00 2001 From: Gina Contrino Date: Thu, 8 Feb 2018 18:33:39 +0100 Subject: [PATCH 05/10] adjust button font weight --- src/components/toolbox/buttons/css/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/toolbox/buttons/css/base.css b/src/components/toolbox/buttons/css/base.css index 1896e3c1fc..0c3f66896f 100644 --- a/src/components/toolbox/buttons/css/base.css +++ b/src/components/toolbox/buttons/css/base.css @@ -3,8 +3,8 @@ @define-mixin buttonBasics { min-width: 250px; border-radius: 3px; - font-size: 18px; text-transform: capitalize; + font-weight: var(--font-weight-bold); font-family: var(--content-font) !important; transition: none !important; From 3f6d7e4ed638b0569f372152237687cc887cc6f3 Mon Sep 17 00:00:00 2001 From: Gina Contrino Date: Fri, 9 Feb 2018 08:39:44 +0100 Subject: [PATCH 06/10] Adjust margins --- src/components/sendTo/index.js | 21 ++++++++++++++++++--- src/components/sendTo/sendTo.css | 10 ++++++++-- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/src/components/sendTo/index.js b/src/components/sendTo/index.js index 7299fd5081..b739f563b0 100644 --- a/src/components/sendTo/index.js +++ b/src/components/sendTo/index.js @@ -38,12 +38,26 @@ class SendTo extends React.Component { ${grid['col-xs-12']} ${grid['col-sm-6']} ${grid['col-md-12']} - ${grid['col-lg-12']} ${grid.row}`}> + ${grid['col-lg-12']} + ${grid['middle-sm']} + ${grid.row} + `}> -
+

@@ -57,6 +71,7 @@ class SendTo extends React.Component { ${grid['col-sm-6']} ${grid['col-md-12']} ${grid['col-lg-12']} + ${grid['middle-sm']} ${styles.sendButton} `}> Date: Fri, 9 Feb 2018 11:25:53 +0100 Subject: [PATCH 07/10] Add tests --- src/components/accountTransactions/index.js | 6 +++- src/components/sendTo/index.js | 7 ++-- src/components/sendTo/sendTo.test.js | 39 +++++++++++++++++++++ 3 files changed, 46 insertions(+), 6 deletions(-) create mode 100644 src/components/sendTo/sendTo.test.js diff --git a/src/components/accountTransactions/index.js b/src/components/accountTransactions/index.js index f42a82e3fa..824b328fce 100644 --- a/src/components/accountTransactions/index.js +++ b/src/components/accountTransactions/index.js @@ -18,7 +18,11 @@ class accountTransactions extends React.Component { render() { return
- +
- + {this.props.t('Send to this address')} @@ -87,4 +84,4 @@ class SendTo extends React.Component { } } -export default (translate()(SendTo)); +export default SendTo; diff --git a/src/components/sendTo/sendTo.test.js b/src/components/sendTo/sendTo.test.js new file mode 100644 index 0000000000..655a30cae7 --- /dev/null +++ b/src/components/sendTo/sendTo.test.js @@ -0,0 +1,39 @@ +import React from 'react'; +import { expect } from 'chai'; +import { mountWithContext } from './../../../test/utils/mountHelpers'; +import SendTo from './index'; +import routes from './../../constants/routes'; + +describe('SendTo Component', () => { + let wrapper; + let props; + const eventStorage = {}; + + beforeEach(() => { + window.addEventListener = (key, callback) => { eventStorage[key] = callback; }; + props = { + address: '12345L', + balance: 0, + t: key => key, + }; + wrapper = mountWithContext(, {}); + }); + + it('renders correct link', () => { + expect(wrapper.find('Link').prop('to')).to.equal(`${routes.wallet.long}?address=${props.address}`); + }); + + it('resizes the avatar based on the window size', () => { + // set mobile size + window.innerWidth = 1023; + eventStorage.resize(); + wrapper.update(); + expect(wrapper.find('AccountVisual').prop('size')).to.equal(90); + + // set desktop sizeka + window.innerWidth = 1024; + eventStorage.resize(); + wrapper.update(); + expect(wrapper.find('AccountVisual').prop('size')).to.equal(144); + }); +}); From 25b14b4f6a169f08e4b5a3fd1bc88ec0ba8617af Mon Sep 17 00:00:00 2001 From: Gina Contrino Date: Fri, 9 Feb 2018 18:43:16 +0100 Subject: [PATCH 08/10] Center content --- src/components/sendTo/index.js | 42 +++++++++++++++++--------------- src/components/sendTo/sendTo.css | 17 +++++++++++-- 2 files changed, 37 insertions(+), 22 deletions(-) diff --git a/src/components/sendTo/index.js b/src/components/sendTo/index.js index ecb56ccc31..d549a2ddba 100644 --- a/src/components/sendTo/index.js +++ b/src/components/sendTo/index.js @@ -33,7 +33,8 @@ class SendTo extends React.Component { } render() { return ( -
+
- -
+
-

- - - LSK -

- +

+ + + LSK +

+ +
-
-
- - - {this.props.t('Send to this address')} - - -
+ + + {this.props.t('Send to this address')} + + +
+ ); } diff --git a/src/components/sendTo/sendTo.css b/src/components/sendTo/sendTo.css index c9f0d81b01..d96d2ac565 100644 --- a/src/components/sendTo/sendTo.css +++ b/src/components/sendTo/sendTo.css @@ -14,10 +14,12 @@ } .wrapper { - padding: 9.2vh 42px; /* stylelint-disable-line */ + padding: 0px 42px; /* stylelint-disable-line */ text-align: center; line-height: 36px; - display: block; + height: 100%; + display: flex; + justify-content: space-around; & .account { margin-bottom: 8.5vh; /* stylelint-disable-line */ @@ -29,6 +31,7 @@ & h2 { margin-bottom: 0; font-weight: var(--font-weight-semi-bold); + white-space: nowrap; & .balanceUnit { font-weight: var(--font-weight-semi-bold); @@ -37,6 +40,7 @@ & .address { color: var(--color-grayscale-dark); + white-space: nowrap; } } @@ -94,6 +98,11 @@ background: var(--color-grayscale-darker-mobile-background); display: flex; + & .content { + display: flex; + width: 100% + } + & .account { margin: auto 0px; text-align: left; @@ -113,6 +122,10 @@ .wrapper { padding: 3.3vh 24px; /* stylelint-disable-line */ + & .content { + display: block; + } + & h2 { font-size: var(--main-header-font-size-XS); From a60791f00ec713e7a2786b04505a96c4adb5e405 Mon Sep 17 00:00:00 2001 From: Gina Contrino Date: Fri, 9 Feb 2018 18:59:36 +0100 Subject: [PATCH 09/10] Resize avatar in accountvisual component --- src/components/accountVisual/index.js | 70 ++++++++++++++++++--------- src/components/header/header.js | 19 +------- src/components/sendTo/index.js | 22 ++------- src/components/sendTo/sendTo.css | 6 +-- 4 files changed, 55 insertions(+), 62 deletions(-) diff --git a/src/components/accountVisual/index.js b/src/components/accountVisual/index.js index eaeca7ee81..253d0d234c 100644 --- a/src/components/accountVisual/index.js +++ b/src/components/accountVisual/index.js @@ -160,28 +160,54 @@ const pickTwo = (chunk, options) => ([ ) % options.length], ]); -const AccountVisual = ({ address, size = 200, className }) => { - const addressChunks = address.padStart(21, '0').match(/\d{5}/g); - const gradientScheme = gradientSchemes[addressChunks[0].substr(1, 2) % gradientSchemes.length]; - const primaryGradients = pickTwo(addressChunks[1], gradientScheme.primary); - const secondaryGradients = pickTwo(addressChunks[2], gradientScheme.secondary); - const shapes = [ - getBackgroundCircle(size, primaryGradients[0]), - getShape(addressChunks[1], size, primaryGradients[1], 1), - getShape(addressChunks[2], size, secondaryGradients[0], 0.23), - getShape(addressChunks[3], size, secondaryGradients[1], 0.18), - ]; +class AccountVisual extends React.Component { + constructor(props) { + super(props); + this.state = { isMobile: window.innerWidth < 1024 }; + } - return ( -
- - - {shapes.map((shape, i) => ( - - ))} - -
- ); -}; + shouldComponentUpdate(nextProps, state) { + return this.state.isMobile !== state.isMobile; + } + + resizeWindow() { + this.setState({ isMobile: window.innerWidth < 1024 }); + } + + componentDidMount() { + window.addEventListener('resize', this.resizeWindow.bind(this)); + } + + componentWillUnmount() { + window.removeEventListener('resize', this.resizeWindow.bind(this)); + } + + render() { + const { address, size, mobileSize, className } = this.props; + const desktopSize = size || 200; + const newSize = this.state.isMobile && mobileSize ? mobileSize : desktopSize; + + const addressChunks = address.padStart(21, '0').match(/\d{5}/g); + const gradientScheme = gradientSchemes[addressChunks[0].substr(1, 2) % gradientSchemes.length]; + const primaryGradients = pickTwo(addressChunks[1], gradientScheme.primary); + const secondaryGradients = pickTwo(addressChunks[2], gradientScheme.secondary); + const shapes = [ + getBackgroundCircle(newSize, primaryGradients[0]), + getShape(addressChunks[1], newSize, primaryGradients[1], 1), + getShape(addressChunks[2], newSize, secondaryGradients[0], 0.23), + getShape(addressChunks[3], newSize, secondaryGradients[1], 0.18), + ]; + return ( +
+ + + {shapes.map((shape, i) => ( + + ))} + +
+ ); + } +} export default AccountVisual; diff --git a/src/components/header/header.js b/src/components/header/header.js index f555017ca2..ae06f75ff7 100644 --- a/src/components/header/header.js +++ b/src/components/header/header.js @@ -15,11 +15,6 @@ import RelativeLink from '../relativeLink'; import routes from './../../constants/routes'; class Header extends React.Component { - constructor(props) { - super(props); - this.state = { isMobile: window.innerWidth < 1024 }; - } - shouldShowActionButton() { return !this.props.isAuthenticated && this.props.location.pathname !== routes.login.url && @@ -32,18 +27,6 @@ class Header extends React.Component { return this.props.location.pathname.includes('explorer') && !this.props.location.pathname.includes(routes.search.long); } - resizeWindow() { - this.setState({ isMobile: window.innerWidth < 1024 }); - } - - componentDidMount() { - window.addEventListener('resize', this.resizeWindow.bind(this)); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.resizeWindow.bind(this)); - } - render() { return (
@@ -84,7 +67,7 @@ class Header extends React.Component {
diff --git a/src/components/sendTo/index.js b/src/components/sendTo/index.js index d549a2ddba..0e514750ad 100644 --- a/src/components/sendTo/index.js +++ b/src/components/sendTo/index.js @@ -11,26 +11,10 @@ import routes from './../../constants/routes'; import styles from './sendTo.css'; class SendTo extends React.Component { - constructor() { - super(); - this.state = { isMobile: window.innerWidth < 1024 }; + shouldComponentUpdate(nextProps) { + return nextProps.address !== this.props.address; } - shouldComponentUpdate(nextProps, state) { - return nextProps.address !== this.props.address || this.state.isMobile !== state.isMobile; - } - - resizeWindow() { - this.setState({ isMobile: window.innerWidth < 1024 }); - } - - componentDidMount() { - window.addEventListener('resize', this.resizeWindow.bind(this)); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.resizeWindow.bind(this)); - } render() { return (
@@ -51,7 +35,7 @@ class SendTo extends React.Component { ${grid['col-lg-12']} ${grid['middle-sm']} `} - size={this.state.isMobile ? 90 : 144} /> + size={144} mobileSize={90}/>
Date: Fri, 9 Feb 2018 19:07:23 +0100 Subject: [PATCH 10/10] Fix test --- src/components/sendTo/sendTo.test.js | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/src/components/sendTo/sendTo.test.js b/src/components/sendTo/sendTo.test.js index 655a30cae7..b420a11407 100644 --- a/src/components/sendTo/sendTo.test.js +++ b/src/components/sendTo/sendTo.test.js @@ -7,10 +7,8 @@ import routes from './../../constants/routes'; describe('SendTo Component', () => { let wrapper; let props; - const eventStorage = {}; beforeEach(() => { - window.addEventListener = (key, callback) => { eventStorage[key] = callback; }; props = { address: '12345L', balance: 0, @@ -23,17 +21,8 @@ describe('SendTo Component', () => { expect(wrapper.find('Link').prop('to')).to.equal(`${routes.wallet.long}?address=${props.address}`); }); - it('resizes the avatar based on the window size', () => { - // set mobile size - window.innerWidth = 1023; - eventStorage.resize(); - wrapper.update(); - expect(wrapper.find('AccountVisual').prop('size')).to.equal(90); - - // set desktop sizeka - window.innerWidth = 1024; - eventStorage.resize(); - wrapper.update(); - expect(wrapper.find('AccountVisual').prop('size')).to.equal(144); + it('updates when address changes', () => { + wrapper.setProps({ address: '9876L' }); + expect(wrapper.find('Link').prop('to')).to.equal(`${routes.wallet.long}?address=9876L`); }); });