From 6e124a91029781464b5c7d2fca20de08af301da4 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Thu, 19 Nov 2020 07:14:39 +1100
Subject: [PATCH] issue-83 Add scroll to comments button

When the comments button is click, the comments section is scrolled
into view.
---
 web/src/components/PartProfile/PartProfile.js | 11 ++++++++---
 web/src/index.css                             |  4 +++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/src/components/PartProfile/PartProfile.js b/web/src/components/PartProfile/PartProfile.js
index ad2dd3b..03397a0 100644
--- a/web/src/components/PartProfile/PartProfile.js
+++ b/web/src/components/PartProfile/PartProfile.js
@@ -88,9 +88,11 @@ const PartProfile = ({
             className="mt-6 ml-auto hover:shadow-lg bg-gradient-to-r from-transparent to-indigo-100"
             shouldAnimateHover
             iconName="chevron-down"
-            onClick={() => {}}
+            onClick={() => {
+              document.getElementById('comment-section').scrollIntoView()
+            }}
           >
-            Comments 11
+            {userPart.Part.Comment.length} Comments
           </Button>
           <Link
             to={routes.ide({
@@ -155,7 +157,10 @@ const PartProfile = ({
           {!isEditable && (
             <>
               <div className="h-px bg-indigo-200 mt-8" />
-              <h3 className="text-indigo-800 text-lg font-roboto tracking-wider mb-4">
+              <h3
+                className="text-indigo-800 text-lg font-roboto tracking-wider mb-4"
+                id="comment-section"
+              >
                 Comments
               </h3>
 
diff --git a/web/src/index.css b/web/src/index.css
index f6b9d9c..4c05cef 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -48,7 +48,9 @@
   /* stop pop over from scrolling */
   overflow: visible !important;
 }
-
+html {
+  scroll-behavior: smooth;
+}
 body {
   /* TODO can I use a tailwind class here? */
   background-color: #f7fafc;