Fix actor avatar sizes

client/src/app/+accounts/accounts.component.html

@@ -2,7 +2,7 @@
   <div class="account-info d-md-grid d-block">
 
     <div class="account-avatar-row">
-      <my-actor-avatar class="main-avatar" actorType="account" [actor]="account"></my-actor-avatar>
+      <my-actor-avatar [size]="getAccountAvatarSize()" actorType="account" [actor]="account"></my-actor-avatar>
 
       <div>
         <div class="section-label" i18n>ACCOUNT</div>

client/src/app/+accounts/accounts.component.ts

@@ -101,6 +101,12 @@ export class AccountsComponent implements OnInit, OnDestroy {
     return this.screenService.isInSmallView()
   }
 
+  getAccountAvatarSize () {
+    if (this.isInSmallView()) return 80
+
+    return 120
+  }
+
   isManageable () {
     if (!this.isUserLoggedIn()) return false
 

client/src/app/+video-channels/video-channels.component.html

@@ -23,7 +23,10 @@
         <div class="section-label" i18n>OWNER ACCOUNT</div>
 
         <div class="avatar-row">
-          <my-actor-avatar class="account-avatar" [actor]="ownerAccount" actorType="account" [internalHref]="getAccountUrl()"></my-actor-avatar>
+          <my-actor-avatar
+            class="account-avatar" [size]="getAccountAvatarSize()"
+            [actor]="ownerAccount" actorType="account" [internalHref]="getAccountUrl()"
+          ></my-actor-avatar>
 
           <div class="actor-info">
             <h4>
@@ -51,7 +54,7 @@
     </ng-template>
 
     <div class="channel-avatar-row">
-      <my-actor-avatar class="main-avatar" [actor]="videoChannel" actorType="channel"></my-actor-avatar>
+      <my-actor-avatar [size]="getChannelAvatarSize()" [actor]="videoChannel" actorType="channel"></my-actor-avatar>
 
       <div>
         <div class="section-label" i18n>VIDEO CHANNEL</div>

client/src/app/+video-channels/video-channels.component.scss

@@ -123,10 +123,6 @@
       font-size: var(--myGreyOwnerFontSize);
       color: pvar(--greyForegroundColor);
     }
-
-    .account-avatar {
-      @include actor-avatar-size(48px);
-    }
   }
 
   .owner-description {
@@ -287,8 +283,7 @@ my-copy-button {
       }
 
       .account-avatar {
-        @include actor-avatar-size(64px);
-
+        // Resized to 64px by JS component
         margin: -30px 0 0 15px;
       }
     }

client/src/app/+video-channels/video-channels.component.ts

@@ -102,6 +102,18 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
     return this.screenService.isInSmallView()
   }
 
+  getAccountAvatarSize () {
+    if (this.isInSmallView()) return 64
+
+    return 48
+  }
+
+  getChannelAvatarSize () {
+    if (this.isInSmallView()) return 80
+
+    return 120
+  }
+
   isUserLoggedIn () {
     return this.authService.isLoggedIn()
   }

client/src/sass/include/_account-channel-page.scss

@@ -17,7 +17,7 @@
 
 @mixin show-more-description {
   @include margin(10px, auto, 45px);
-  
+
   color: pvar(--mainColor);
   cursor: pointer;
 }
@@ -73,15 +73,4 @@
     margin: 0 10px;
     color: pvar(--mainColor);
   }
-
-  .main-avatar {
-    @include actor-avatar-size(120px);
-  }
-
-  @media screen and (max-width: $mobile-view) {
-
-    .main-avatar {
-      @include actor-avatar-size(80px);
-    }
-  }
 }