X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bmy-library%2F%2Bmy-video-channels%2Fmy-video-channels.component.scss;h=b4907db515d4a0cf75874fd3366ac58bf7aad44f;hb=d0fbc9fd0a29c37f3ff9b99030351e90b276fe7d;hp=bb5394094992addc4ca3dbe90fd105874edff458;hpb=931d3430184143ebd88e5243def6eb1d7acfdbf4;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
index bb5394094..b4907db51 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss
@@ -1,18 +1,28 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
-.create-button {
-  @include create-button;
+h1 {
+  display: flex;
+  justify-content: space-between;
+
+  my-global-icon {
+    position: relative;
+    top: -2px;
+  }
+
+  .button-link {
+    @include peertube-button-link;
+    @include grey-button;
+    @include button-with-icon(18px, 3px, -1px);
+  }
 }
 
 input[type=text] {
   @include peertube-input-text(300px);
 }
 
-::ng-deep .action-button {
-  &.action-button-edit {
-    margin-right: 10px;
-  }
+my-edit-button {
+  @include margin-right(10px);
 }
 
 .video-channel {
@@ -21,44 +31,48 @@ input[type=text] {
   padding-bottom: 0;
 
   my-actor-avatar {
-    @include actor-avatar-size(80px);
-
-    margin-right: 10px;
+    @include margin-right(10px);
   }
+}
 
-  .video-channel-info {
-    flex-grow: 1;
-
-    a.video-channel-names {
-      @include disable-default-a-behaviour;
-
-      width: fit-content;
-      display: flex;
-      align-items: baseline;
-      color: pvar(--mainForegroundColor);
-
-      .video-channel-display-name {
-        font-weight: $font-semibold;
-        font-size: 18px;
-      }
-
-      .video-channel-name {
-        font-size: 14px;
-        color: $grey-actor-name;
-        margin-left: 5px;
-      }
-    }
-  }
+.video-channel-info {
+  flex-grow: 1;
+}
 
-  .video-channel-buttons {
-    margin-top: 10px;
-    min-width: 190px;
-  }
+.video-channel-names {
+  @include disable-default-a-behaviour;
+
+  width: fit-content;
+  display: flex;
+  align-items: baseline;
+  color: pvar(--mainForegroundColor);
+}
+
+.video-channel-display-name {
+  font-weight: $font-semibold;
+  font-size: 18px;
+}
+
+.video-channel-name {
+  @include margin-left(5px);
+
+  font-size: 14px;
+  color: $grey-actor-name;
 }
 
-::ng-deep .chartjs-render-monitor {
-  position: relative;
-  top: 1px;
+.video-channel-followers {
+  color: pvar(--mainForegroundColor);
+}
+
+.video-channel-buttons {
+  margin-top: 10px;
+  min-width: 190px;
+}
+
+.chart-container {
+  // Sync these values with the template
+  width: 40vw;
+  height: 100px;
 }
 
 .video-channels-header {
@@ -73,29 +87,29 @@ input[type=text] {
   .video-channel {
     padding-bottom: 10px;
 
-    .video-channel-info {
-      padding-bottom: 10px;
-      text-align: center;
-
-      .video-channel-names {
-        flex-direction: column;
-        align-items: center !important;
-        margin: auto;
-
-        .video-channel-name {
-          margin-left: 0 !important;
-        }
-      }
-    }
-
     img {
-      margin-right: 0;
+      @include margin-right(0);
     }
 
     .video-channel-buttons {
       align-self: center;
     }
   }
+
+  .video-channel-info {
+    padding-bottom: 10px;
+    text-align: center;
+  }
+
+  .video-channel-names {
+    flex-direction: column;
+    align-items: center !important;
+    margin: auto;
+  }
+
+  .video-channel-name {
+    @include margin-left(0 !important);
+  }
 }
 
 @media screen and (max-width: $mobile-view) {