Refactor feed component

client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss

@@ -1,17 +1,9 @@
 @import 'mixins';
 
-h1 {
 my-feed {
   margin-left: 5px;
   display: inline-block;
-
+  width: 15px;
-    ::ng-deep {
-      my-global-icon {
-        width: 15px !important;
-        top: 0 !important;
-      }
-    }
-  }
 }
 
 my-global-icon {

client/src/app/+videos/+video-watch/comment/video-comments.component.scss

@@ -27,7 +27,11 @@
     margin-left: 5px;
     opacity: 0;
     transition: ease-in .2s opacity;
+    width: 12px;
+    position: relative;
+    top: -3px;
   }
+
   &:hover my-feed {
     opacity: 1;
   }

client/src/app/+videos/+video-watch/video-watch.component.scss

@@ -206,11 +206,6 @@ $video-info-margin-left: 44px;
         }
       }
 
-      my-feed {
-        margin-left: 5px;
-        margin-top: 1px;
-      }
-
       .video-actions-rates {
         margin: 0 0 10px 0;
         align-items: start;

client/src/app/shared/shared-main/feeds/feed.component.scss

@@ -2,19 +2,17 @@
 @import '_mixins';
 
 .feed {
-  width: min-content;
+  width: 100%;
 
   a {
     color: black;
     display: block;
   }
+}
 
 my-global-icon {
   cursor: pointer;
-    width: 12px;
+  width: 100%;
-    position: relative;
-    top: -2px;
 
   @include apply-svg-color(pvar(--mainForegroundColor))
 }
-}

client/src/app/shared/shared-video-miniature/abstract-video-list.html

@@ -4,6 +4,7 @@
 
     <div class="action-block">
       <my-feed *ngIf="syndicationItems" [syndicationItems]="syndicationItems"></my-feed>
+
       <ng-container *ngFor="let action of actions">
         <a *ngIf="action.routerLink" class="ml-2" [routerLink]="action.routerLink" routerLinkActive="active">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>

client/src/app/shared/shared-video-miniature/abstract-video-list.scss

@@ -15,40 +15,22 @@ $iconSize: 16px;
   justify-content: space-between;
   align-items: center;
 
-  .action-block {
+  my-feed {
-    ::ng-deep my-feed {
+    display: inline-block;
-      my-global-icon {
     width: calc(#{$iconSize} - 2px);
   }
-    }
-
-    a button {
-      @include peertube-button;
-      @include grey-button;
-      @include button-with-icon($iconSize, 3px, -1px);
-    }
-  }
 
   .moderation-block {
 
     my-global-icon {
       position: relative;
       width: $iconSize;
-      top: -2px;
     }
 
     margin-left: .4rem;
     display: flex;
     justify-content: flex-end;
     align-items: center;
-
-    .dropdown-item {
-      padding: 0;
-
-      ::ng-deep my-peertube-checkbox label {
-        padding: 3px 15px;
-      }
-    }
   }
 }
 

client/src/sass/include/_mixins.scss

@@ -914,7 +914,7 @@
     padding-bottom: 15px;
     margin-bottom: $sub-menu-margin-bottom;
 
-    my-global-icon {
+    > my-global-icon {
       margin-right: 10px;
       vertical-align: bottom;
       width: 24px;