align feed icons to the right for video listings

2 files changed, 29 insertions, 18 deletions

diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
index 70be78af0..6df589c38 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
@@ -9,19 +9,23 @@
     <div class="action-block">
       <my-feed *ngIf="titlePage" [syndicationItems]="syndicationItems"></my-feed>
       <a [routerLink]="action.routerLink" routerLinkActive="active" *ngFor="let action of actions">
-        <button class="btn">
-          <my-global-icon [iconName]="action.iconName" aria-hidden="true"></my-global-icon>
-          <span>{{ action.label }}</span>
-        </button>
+        <my-button [icon]="action.iconName" [label]="action.label"></my-button>
       </a>
     </div>
 
     <div class="moderation-block" *ngIf="displayModerationBlock">
-      <my-peertube-checkbox
-        (change)="toggleModerationDisplay()"
-        inputName="display-unlisted-private" i18n-labelText labelText="Display unlisted and private videos"
-      >
-      </my-peertube-checkbox>
+      <div class="c-hand" ngbDropdown container="body" placement="bottom-right auto">
+        <my-global-icon iconName="cog" ngbDropdownToggle></my-global-icon>
+
+        <div role="menu" class="dropdown-menu" ngbDropdownMenu>
+          <div class="dropdown-item">
+            <my-peertube-checkbox
+              (change)="toggleModerationDisplay()"
+              inputName="display-unlisted-private" i18n-labelText labelText="Display unlisted and private videos"
+            ></my-peertube-checkbox>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index 1660c6812..7841b60f7 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -3,32 +3,39 @@
 @import '_mixins';
 @import '_miniature';
 
+$iconSize: 16px;
+
 .videos-header {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
+  align-items: center;
 
   .title-page.title-page-single {
     display: flex;
-
-    my-feed {
-      display: inline-block;
-      top: 1px;
-      width: max-content;
-    }
+    flex-grow: 1;
   }
 
   .action-block {
+    ::ng-deep my-feed {
+      my-global-icon {
+        width: calc(#{$iconSize} - 2px);
+      }
+    }
+
     a button {
       @include peertube-button;
       @include grey-button;
-      @include button-with-icon(18px, 3px, -1px);
+      @include button-with-icon($iconSize, 3px, -1px);
     }
   }
 
   .moderation-block {
+    div {
+      @include button-with-icon($iconSize, 3px, -1px);
+    }
+
+    margin-left: .2rem;
     display: flex;
-    flex-grow: 1;
     justify-content: flex-end;
     align-items: center;
   }