Migrate to bootstrap 5

2 files changed, 15 insertions, 17 deletions

diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html
index 75d9be5f1..2f36c27b7 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@@ -21,7 +21,7 @@
         </my-action-dropdown>
       </div>
 
-      <div class="ml-auto right-form">
+      <div class="ms-auto right-form">
         <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
 
         <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button>
@@ -67,25 +67,25 @@
       </td>
 
       <td>
-        <span class="badge badge-blue" *ngIf="video.isLocal">Local</span>
-        <span class="badge badge-purple" *ngIf="!video.isLocal">Remote</span>
+        <span class="pt-badge badge-blue" *ngIf="video.isLocal">Local</span>
+        <span class="pt-badge badge-purple" *ngIf="!video.isLocal">Remote</span>
 
-        <span [ngClass]="getPrivacyBadgeClass(video)" class="badge">{{ video.privacy.label }}</span>
+        <span [ngClass]="getPrivacyBadgeClass(video)" class="pt-badge">{{ video.privacy.label }}</span>
 
-        <span *ngIf="video.nsfw" class="badge badge-red" i18n>NSFW</span>
+        <span *ngIf="video.nsfw" class="pt-badge badge-red" i18n>NSFW</span>
 
-        <span *ngIf="isUnpublished(video)" class="badge badge-yellow" i18n>{{ video.state.label }}</span>
+        <span *ngIf="isUnpublished(video)" class="pt-badge badge-yellow" i18n>{{ video.state.label }}</span>
 
-        <span *ngIf="isAccountBlocked(video)" class="badge badge-red" i18n>Account muted</span>
-        <span *ngIf="isServerBlocked(video)" class="badge badge-red" i18n>Server muted</span>
+        <span *ngIf="isAccountBlocked(video)" class="pt-badge badge-red" i18n>Account muted</span>
+        <span *ngIf="isServerBlocked(video)" class="pt-badge badge-red" i18n>Server muted</span>
 
-        <span *ngIf="isVideoBlocked(video)" class="badge badge-red" i18n>Blocked</span>
+        <span *ngIf="isVideoBlocked(video)" class="pt-badge badge-red" i18n>Blocked</span>
       </td>
 
       <td>
-        <span *ngIf="isHLS(video)" class="badge badge-blue">HLS</span>
-        <span *ngIf="isWebTorrent(video)" class="badge badge-blue">WebTorrent ({{ video.files.length }})</span>
-        <span *ngIf="video.isLive" class="badge badge-blue">Live</span>
+        <span *ngIf="isHLS(video)" class="pt-badge badge-blue">HLS</span>
+        <span *ngIf="isWebTorrent(video)" class="pt-badge badge-blue">WebTorrent ({{ video.files.length }})</span>
+        <span *ngIf="video.isLive" class="pt-badge badge-blue">Live</span>
 
         <span *ngIf="!isImport(video) && !video.isLive && video.isLocal">{{ getFilesSize(video) | bytes: 1 }}</span>
       </td>
@@ -121,7 +121,7 @@
             </ul>
           </div>
 
-          <my-embed class="ml-auto" [video]="video"></my-embed>
+          <my-embed class="ms-auto" [video]="video"></my-embed>
         </div>
       </td>
     </tr>
diff --git a/client/src/app/+admin/overview/videos/video-list.component.scss b/client/src/app/+admin/overview/videos/video-list.component.scss
index cb47b6548..dcd41a1b4 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.scss
+++ b/client/src/app/+admin/overview/videos/video-list.component.scss
@@ -7,10 +7,8 @@ my-embed {
   width: 50%;
 }
 
-.badge {
-  @include peertube-badge;
-
-  margin-right: 5px;
+.pt-badge {
+  @include margin-right(5px);
 }
 
 .video-info > div {