From 7f6c5c544e7aed6328f7b33323e46d377659e08a Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 18 Jun 2020 11:28:30 -0400
Subject: [PATCH] only add gradient to bottom of channel cover

---
 ui/page/channel/view.jsx        |  1 +
 ui/scss/component/_channel.scss | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/ui/page/channel/view.jsx b/ui/page/channel/view.jsx
index 3c13c4e53..5110f967f 100644
--- a/ui/page/channel/view.jsx
+++ b/ui/page/channel/view.jsx
@@ -186,6 +186,7 @@ function ChannelPage(props: Props) {
             )}
           </div>
         </div>
+        <div className="channel-cover__gradient" />
       </header>
       <Tabs onChange={onTabChange} index={tabIndex}>
         <TabList className="tabs__list--channel-page">
diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss
index c4ba58bc6..bf067988f 100644
--- a/ui/scss/component/_channel.scss
+++ b/ui/scss/component/_channel.scss
@@ -15,7 +15,6 @@ $metadata-z-index: 1;
   align-self: flex-start;
   position: absolute;
   object-fit: cover;
-  filter: brightness(60%);
 }
 
 .channel-cover,
@@ -32,6 +31,24 @@ $metadata-z-index: 1;
   }
 }
 
+.channel-cover__gradient {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+
+  &:after {
+    position: absolute;
+    bottom: 0;
+    opacity: 1;
+    content: '';
+    height: 100%;
+    left: 0;
+    right: 0;
+    width: 100%;
+    background: linear-gradient(0deg, #0d0d0d 0, transparent 65%);
+  }
+}
+
 .channel-thumbnail {
   display: flex;
   height: 5rem;