From 6f9784a43fe485663b24f9f41a8878393ad26dfc Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 23 Aug 2021 12:17:34 +0800
Subject: [PATCH] "Scroll to recent" button improvements

---
 ui/component/livestreamComments/view.jsx |  6 ++++--
 ui/scss/component/_livestream.scss       | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/ui/component/livestreamComments/view.jsx b/ui/component/livestreamComments/view.jsx
index b434592f3..5b133d821 100644
--- a/ui/component/livestreamComments/view.jsx
+++ b/ui/component/livestreamComments/view.jsx
@@ -9,6 +9,7 @@ import UriIndicator from 'component/uriIndicator';
 import CreditAmount from 'component/common/credit-amount';
 import ChannelThumbnail from 'component/channelThumbnail';
 import Tooltip from 'component/common/tooltip';
+import * as ICONS from 'constants/icons';
 
 type Props = {
   uri: string,
@@ -297,10 +298,11 @@ export default function LivestreamComments(props: Props) {
 
           {scrollPos < 0 && (
             <Button
-              button="alt"
-              className="livestream__comments-scroll__down"
+              button="secondary"
+              className="livestream__comments__scroll-to-recent"
               label={__('Recent Comments')}
               onClick={restoreScrollPos}
+              iconRight={ICONS.DOWN}
             />
           )}
 
diff --git a/ui/scss/component/_livestream.scss b/ui/scss/component/_livestream.scss
index 4654cb9a4..d2c0961a8 100644
--- a/ui/scss/component/_livestream.scss
+++ b/ui/scss/component/_livestream.scss
@@ -1,4 +1,5 @@
 $discussion-header__height: 3rem;
+$recent-msg-button__height: 2rem;
 
 .livestream {
   flex: 1;
@@ -141,6 +142,19 @@ $discussion-header__height: 3rem;
   top: var(--spacing-xs);
 }
 
+.livestream__comments__scroll-to-recent {
+  margin-top: -$recent-msg-button__height;
+  align-self: center;
+  margin-bottom: var(--spacing-xs);
+  font-size: var(--font-xsmall);
+  padding: var(--spacing-xxs) var(--spacing-s);
+  opacity: 0.9;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 .livestream__comment-create {
   padding: var(--spacing-s);
   border-top: 1px solid var(--color-border);