Refactoring accounts component style

2 files changed, 7 insertions, 13 deletions

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 38293b070..e3b499773 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -16,7 +16,7 @@
           size="75"
         ></my-actor-avatar>
 
-        <h2>
+        <h2 class="fs-5 lh-1 fw-bold m-0">
           <a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
             {{ videoChannel.displayName }}
           </a>
@@ -39,7 +39,7 @@
 
       <div class="videos-overflow-workaround">
         <div class="videos">
-          <div class="no-results" i18n *ngIf="getTotalVideosOf(videoChannel) === 0">This channel doesn't have any videos.</div>
+          <div class="no-results h-auto" i18n *ngIf="getTotalVideosOf(videoChannel) === 0">This channel doesn't have any videos.</div>
 
           <my-video-miniature
             *ngFor="let video of getVideosOf(videoChannel)"
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 11ed4c3b1..2e34ed71c 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -8,11 +8,11 @@
 }
 
 .channel {
+  @include rfs(2rem, padding);
+  @include rfs(2rem 0, margin);
+
   max-width: $max-channels-width;
   background-color: pvar(--channelBackgroundColor);
-  padding: 30px;
-
-  margin: 30px 0;
 
   display: grid;
   grid-template-columns: 1fr auto;
@@ -44,10 +44,6 @@
   h2 {
     grid-row: 1;
     grid-column: 2;
-    font-size: 20px;
-    line-height: 1;
-    font-weight: $font-bold;
-    margin: 0;
   }
 
   .actor-counters {
@@ -87,13 +83,11 @@ my-subscribe-button {
     max-width: $video-thumbnail-medium-width;
   }
 
-  .no-results {
-    height: auto;
-  }
 }
 
 .videos-overflow-workaround {
-  margin-top: 30px;
+  @include margin-top(2rem);
+  
   overflow-x: hidden;
 }