Redesign account page

3 files changed, 7 insertions, 71 deletions

diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index f63110bf5..d1eb15dff 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -12,7 +12,7 @@
     <ng-template #ownerTemplate>
       <div class="owner-block">
         <div class="avatar-row">
-          <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+          <img class="channel-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
 
           <div class="actor-info">
             <h4>{{ videoChannel.ownerAccount.displayName }}</h4>
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 16e13c578..f5547b4e9 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -1,5 +1,6 @@
 @import '_variables';
 @import '_mixins';
+@import '_actor';
 @import '_miniature';
 
 .root {
@@ -11,11 +12,7 @@
 }
 
 .section-label {
-  color: pvar(--mainColor);
-  font-size: 12px;
-  margin-bottom: 15px;
-  font-weight: $font-bold;
-  letter-spacing: 2.5px;
+  @include section-label-responsive;
 }
 
 .links {
@@ -34,48 +31,7 @@
 }
 
 .channel-avatar-row {
-  display: flex;
-  grid-column: 1;
-  margin-bottom: 30px;
-
-  img {
-    @include channel-avatar(120px);
-  }
-
-  > div {
-    margin-left: var(--myChannelImgMargin);
-  }
-
-  .actor-info {
-    display: flex;
-
-    > div:first-child {
-      flex-grow: 1;
-    }
-  }
-
-  .actor-display-name {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  h1 {
-    font-size: 28px;
-    font-weight: $font-bold;
-    margin: 0;
-  }
-
-  .actor-handle,
-  .actor-counters {
-    color: pvar(--greyForegroundColor);
-    font-size: var(--myGreyChannelFontSize);
-  }
-
-  .actor-counters > *:not(:last-child)::after {
-    content: '•';
-    margin: 0 10px;
-    color: pvar(--mainColor);
-  }
+  @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize));
 }
 
 .channel-description {
@@ -83,13 +39,11 @@
 }
 
 .show-more {
+  @include show-more-description;
+
   display: none;
-  color: pvar(--mainColor);
-  cursor: pointer;
-  margin: 10px auto 45px auto;
 }
 
-
 .channel-buttons {
   display: flex;
   flex-wrap: wrap;
@@ -280,24 +234,6 @@
     width: min-content;
   }
 
-  .section-label {
-    font-size: 10px;
-    letter-spacing: 2.1px;
-    margin-bottom: 5px;
-  }
-
-  .channel-avatar-row {
-    margin-bottom: 15px;
-
-    h1 {
-      font-size: 22px;
-    }
-
-    img {
-      @include channel-avatar(80px);
-    }
-  }
-
   .show-more {
     margin-bottom: 30px;
   }
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index 037c108f2..4fcc42103 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -94,7 +94,7 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
   isManageable () {
     if (!this.isUserLoggedIn()) return false
 
-    return this.videoChannel.ownerAccount.userId === this.authService.getUser().id
+    return this.videoChannel?.ownerAccount.userId === this.authService.getUser().id
   }
 
   activateCopiedMessage () {