diff options
| -rw-r--r-- | ui/app/components/pages/create-account/connect-hardware/connect-screen.js | 14 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/new-account.scss | 1 |
2 files changed, 12 insertions, 3 deletions
diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js index 47288c73f..5c6c54acf 100644 --- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js +++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js @@ -54,9 +54,15 @@ class ConnectScreen extends Component { ) } + scrollToTutorial = (e) => { + if (this.referenceNode) this.referenceNode.scrollIntoView({behavior: 'smooth'}) + } + renderLearnMore () { return ( - h('p.hw-connect__learn-more', {}, [ + h('p.hw-connect__learn-more', { + onClick: this.scrollToTutorial, + }, [ this.context.t('learnMore'), h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}), ]) @@ -79,9 +85,11 @@ class ConnectScreen extends Component { }, ] - return h('.hw-tutorial', {}, + return h('.hw-tutorial', { + ref: node => { this.referenceNode = node }, + }, steps.map((step, i) => ( - h('div.hw-connect', [ + h('div.hw-connect', {}, [ h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)), h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)), h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }), diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 5af743a2e..8743d540f 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -184,6 +184,7 @@ color: #5B5D67; line-height: 19px; text-align: center; + cursor: pointer; &__arrow { transform: rotate(90deg); |