align feed icons to the right for video listings

4 files changed, 37 insertions, 28 deletions

diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index f37decdef..1a28dd981 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -7,13 +7,15 @@ my-small-loader ::ng-deep .root {
   width: 20px;
 }
 
+span[class$=-button] {
+  > span {
+    margin-left: 5px;
+  }
+}
+
 .action-button {
   @include peertube-button-link;
   @include button-with-icon(21px, 0, -1px);
-
-  > span:nth-child(2) {
-    margin-left: 5px;
-  }
 }
 
 .orange-button {
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.html b/client/src/app/shared/shared-main/feeds/feed.component.html
index ac0b1f454..6b8013a9b 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.html
+++ b/client/src/app/shared/shared-main/feeds/feed.component.html
@@ -1,10 +1,6 @@
-<div class="video-feed"
-  [ngbTooltip]="'Feeds available'"
-  placement="right auto"
-  container="body"
->
+<div class="video-feed">
   <my-global-icon
-    *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom"
+    *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="left auto"
     class="icon-syndication" role="button" iconName="syndication"
   >
   </my-global-icon>
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;
   }