Fix my library/account/admin sub titles alignment

3 files changed, 55 insertions, 52 deletions

diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index a2bdfa31a..2ed0c93d6 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -1,9 +1,7 @@
 <h1>
-  <span>
-    <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
-    <ng-container i18n>My channels</ng-container>
-    <span class="badge badge-secondary">{{ totalItems }}</span>
-  </span>
+  <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>My channels</ng-container>
+  <span class="badge badge-secondary">{{ totalItems }}</span>
 </h1>
 
 <div class="video-channels-header d-flex justify-content-between">
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..191c5169d 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,6 +1,11 @@
 @import '_variables';
 @import '_mixins';
 
+h1 my-global-icon {
+  position: relative;
+  top: -2px;
+}
+
 .create-button {
   @include create-button;
 }
@@ -9,10 +14,8 @@ input[type=text] {
   @include peertube-input-text(300px);
 }
 
-::ng-deep .action-button {
-  &.action-button-edit {
-    margin-right: 10px;
-  }
+my-edit-button {
+  margin-right: 10px;
 }
 
 .video-channel {
@@ -25,35 +28,35 @@ input[type=text] {
 
     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 {
+  font-size: 14px;
+  color: $grey-actor-name;
+  margin-left: 5px;
+}
+
+.video-channel-buttons {
+  margin-top: 10px;
+  min-width: 190px;
 }
 
 ::ng-deep .chartjs-render-monitor {
@@ -73,21 +76,6 @@ 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;
     }
@@ -96,6 +84,21 @@ input[type=text] {
       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 {
+    margin-left: 0 !important;
+  }
 }
 
 @media screen and (max-width: $mobile-view) {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 718e36f2c..f2f4628f7 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -897,15 +897,17 @@
     padding-bottom: 15px;
     margin-bottom: $sub-menu-margin-bottom;
 
+    > span > my-global-icon,
     > my-global-icon {
       margin-right: 10px;
-      vertical-align: bottom;
       width: 24px;
       height: 24px;
+      vertical-align: top;
     }
 
     .badge {
       margin-left: 7px;
+      vertical-align: top;
     }
   }
 }