only add gradient to bottom of channel cover

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">

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;