Fix selection buttons in my videos

2 files changed, 25 insertions, 15 deletions

diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html
index 77f959fef..f69c0487d 100644
--- a/client/src/app/account/account-videos/account-videos.component.html
+++ b/client/src/app/account/account-videos/account-videos.component.html
@@ -19,7 +19,7 @@
     <!-- Display only once -->
     <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0">
       <div class="action-selection-mode-child">
-        <span class="action-button" (click)="abortSelectionMode()">
+        <span class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
           Cancel
         </span>
 
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss
index 4c00431fa..5459014a6 100644
--- a/client/src/app/account/account-videos/account-videos.component.scss
+++ b/client/src/app/account/account-videos/account-videos.component.scss
@@ -1,33 +1,43 @@
 .action-selection-mode {
   width: 174px;
+  display: flex;
+  justify-content: flex-end;
 
   .action-selection-mode-child {
     position: fixed;
-  }
-}
 
-/deep/ .action-button {
+    .action-button {
+      display: inline-block;
+    }
 
-  &.action-button-delete {
-    margin-right: 10px;
-  }
+    .action-button-cancel-selection {
+      @include peertube-button;
+      @include grey-button;
 
-  &.action-button-delete-selection {
-    background-color: $orange-color;
-    color: #fff;
+      margin-right: 10px;
+    }
 
-    &:hover {
-      background-color: $orange-hoover-color;
+    .action-button-delete-selection {
+      @include peertube-button;
+      @include orange-button;
     }
-  }
 
-  .icon {
-    &.icon-delete-white {
+    .icon.icon-delete-white {
+      @include icon(21px);
+
+      position: relative;
+      top: -2px;
       background-image: url('../../../assets/images/global/delete-white.svg');
     }
   }
 }
 
+/deep/ .action-button {
+  &.action-button-delete {
+    margin-right: 10px;
+  }
+}
+
 .video {
   display: flex;
   height: 130px;