scroll smooth

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);