Display banner on channel page

4 files changed, 11 insertions, 2 deletions

diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 87e1b294b..1312a1b3c 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -1,4 +1,8 @@
 <div class="root" *ngIf="videoChannel">
+  <div class="banner" *ngIf="videoChannel.bannerUrl">
+    <img [src]="videoChannel.bannerUrl" alt="Channel banner">
+  </div>
+
   <div class="channel-info">
 
     <ng-template #buttonsTemplate>
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 12f5b9f3e..b19b4c81b 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -11,6 +11,10 @@
   --myGreyOwnerFontSize: 14px;
 }
 
+.banner {
+  @include block-ratio('img', $banner-inverted-ratio);
+}
+
 .section-label {
   @include section-label-responsive;
 }
diff --git a/client/src/app/menu/notification.component.scss b/client/src/app/menu/notification.component.scss
index d85cc8e66..c65787779 100644
--- a/client/src/app/menu/notification.component.scss
+++ b/client/src/app/menu/notification.component.scss
@@ -2,7 +2,7 @@
 @import '_mixins';
 
 .content {
-  scrollbar-color: unset;
+  scrollbar-color: auto;
 }
 
 .notification-inbox-popover {
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
index b92ecef4b..48451744c 100644
--- a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
@@ -36,7 +36,8 @@ export class ActorBannerEditComponent implements OnInit {
           this.maxBannerSize = config.banner.file.size.max
           this.bannerExtensions = config.banner.file.extensions.join(', ')
 
-          this.bannerFormat = $localize`maxsize: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
+          // tslint:disable:max-line-length
+          this.bannerFormat = $localize`ratio 6/1, recommended size: 1600x266, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
         })
   }