From 68b6c826792edbf3a34b83deb088cc4666eb97a5 Mon Sep 17 00:00:00 2001
From: lalentine <valentine96leb@gmail.com>
Date: Sat, 11 Apr 2020 20:18:03 +0300
Subject: [PATCH] Resolves #559

Adds .comment_highlighting class after scrolling to comment.
---
 .../components/comment/_theme/_dark/comment_theme_dark.scss   | 4 ++++
 .../components/comment/_theme/_light/comment_theme_light.scss | 4 ++++
 frontend/app/components/root/root.tsx                         | 4 ++++
 3 files changed, 12 insertions(+)

diff --git a/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss b/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss
index fa0dafd1f6..1ebb63c45d 100644
--- a/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss
+++ b/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss
@@ -95,4 +95,8 @@
       }
     }
   }
+
+  &.comment_highlighting {
+    background: var(--color19);
+  }
 }
diff --git a/frontend/app/components/comment/_theme/_light/comment_theme_light.scss b/frontend/app/components/comment/_theme/_light/comment_theme_light.scss
index 3fe6489b97..5fc1c1ef46 100644
--- a/frontend/app/components/comment/_theme/_light/comment_theme_light.scss
+++ b/frontend/app/components/comment/_theme/_light/comment_theme_light.scss
@@ -95,4 +95,8 @@
       }
     }
   }
+
+  &.comment_highlighting {
+    background: var(--color4);
+  }
 }
diff --git a/frontend/app/components/root/root.tsx b/frontend/app/components/root/root.tsx
index a3e92f204e..e1c7737bb0 100644
--- a/frontend/app/components/root/root.tsx
+++ b/frontend/app/components/root/root.tsx
@@ -136,6 +136,10 @@ export class Root extends Component<Props, State> {
       if (comment) {
         setTimeout(() => {
           postMessage({ scrollTo: comment.getBoundingClientRect().top });
+          comment.classList.add('comment_highlighting');
+          setTimeout(() => {
+            comment.classList.remove('comment_highlighting');
+          }, 5e3);
         }, 500);
       }
     }