Migrate to bootstrap 5

11 files changed, 43 insertions, 48 deletions

diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index 5344e5431..7add71886 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -33,10 +33,6 @@ my-peertube-checkbox {
   height: 100%;
   min-height: 300px;
 
-  .form-group {
-    margin-bottom: 25px;
-  }
-
   input {
     @include peertube-input-text(100%);
     display: block;
@@ -45,10 +41,6 @@ my-peertube-checkbox {
   .label-tags + span {
     font-size: 15px;
   }
-
-  .advanced-settings .form-group {
-    margin-bottom: 20px;
-  }
 }
 
 .captions-header {
diff --git a/client/src/app/+videos/+video-edit/video-update.component.html b/client/src/app/+videos/+video-edit/video-update.component.html
index 4376f6fe4..446406d1a 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.html
+++ b/client/src/app/+videos/+video-edit/video-update.component.html
@@ -1,6 +1,6 @@
 <div class="margin-content">
   <div class="title-page title-page-single">
-    <span class="mr-1" i18n>Update</span>
+    <span class="me-1" i18n>Update</span>
     <a [routerLink]="getVideoUrl()">{{ video?.name }}</a>
   </div>
 
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
index 3ee818c8b..95d117eec 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
@@ -2,7 +2,7 @@
   <div class="avatar-and-textarea">
     <my-actor-avatar [account]="user?.account" size="25"></my-actor-avatar>
 
-    <div class="form-group">
+    <div class="textarea-wrapper">
       <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
                 [readonly]="(user === null) ? true : false"
                 (click)="openVisitorModal($event)"
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
index fb79991db..23e705507 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
@@ -17,9 +17,8 @@ form {
     @include margin-right(10px);
   }
 
-  .form-group {
+  .textarea-wrapper {
     flex-grow: 1;
-    margin: 0;
     position: relative;
   }
 
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
index 5014b9692..160865519 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
@@ -16,7 +16,7 @@
                 {{ comment.account.displayName }}
               </span>
 
-              <span class="comment-account-fid ml-1">{{ comment.by }}</span>
+              <span class="comment-account-fid ms-1">{{ comment.by }}</span>
             </a>
           </div>
 
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
index 0e00c9c0e..a76379924 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
@@ -6,7 +6,7 @@
 
     <my-feed [syndicationItems]="syndicationItems"></my-feed>
 
-    <div ngbDropdown class="d-inline-block ml-4 dropdown-root">
+    <div ngbDropdown class="d-inline-block ms-4 dropdown-root">
       <button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n>
         SORT BY
       </button>
@@ -80,7 +80,7 @@
 
             <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template>
 
-            <my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader>
+            <my-small-loader class="comment-thread-loading ms-1" [loading]="threadLoading[comment.id]"></my-small-loader>
           </div>
         </my-video-comment>
 
diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
index d579aaddb..b64d45564 100644
--- a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
+++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
@@ -1,6 +1,6 @@
 <div class="privacy-concerns" *ngIf="display">
   <div class="privacy-concerns-text">
-    <span class="mr-2">
+    <span class="me-2">
       <strong i18n>Friendly Reminder: </strong>
       <ng-container i18n>
         the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
index f5dd352a3..b04bd3548 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
@@ -6,9 +6,9 @@
     <div class="playlist-display-name">
       {{ playlist.displayName }}
 
-      <span *ngIf="isUnlistedPlaylist()" class="badge badge-warning" i18n>Unlisted</span>
-      <span *ngIf="isPrivatePlaylist()" class="badge badge-danger" i18n>Private</span>
-      <span *ngIf="isPublicPlaylist()" class="badge badge-info" i18n>Public</span>
+      <span *ngIf="isUnlistedPlaylist()" class="pt-badge badge-warning" i18n>Unlisted</span>
+      <span *ngIf="isPrivatePlaylist()" class="pt-badge badge-danger" i18n>Private</span>
+      <span *ngIf="isPublicPlaylist()" class="pt-badge badge-info" i18n>Public</span>
     </div>
 
     <div class="playlist-by-index">
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
index 5c3453e4b..0f0ac1979 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
@@ -15,43 +15,47 @@
   .playlist-info {
     padding: 5px 30px;
     background-color: pvar(--greyBackgroundColor);
+  }
+
+  .playlist-display-name {
+    font-size: 18px;
+    font-weight: $font-semibold;
+    margin-bottom: 5px;
 
-    .playlist-display-name {
-      font-size: 18px;
-      font-weight: $font-semibold;
-      margin-bottom: 5px;
+    .pt-badge {
+      @include margin-left(5px);
     }
+  }
 
-    .playlist-by-index {
-      color: pvar(--greyForegroundColor);
-      display: flex;
+  .playlist-by-index {
+    color: pvar(--greyForegroundColor);
+    display: flex;
 
-      .playlist-by {
-        @include margin-right(5px);
-      }
+    .playlist-by {
+      @include margin-right(5px);
+    }
 
-      .playlist-index span:first-child::after {
-        content: '/';
-        margin: 0 3px;
-      }
+    .playlist-index span:first-child::after {
+      content: '/';
+      margin: 0 3px;
     }
+  }
 
-    .playlist-controls {
-      display: flex;
-      margin: 10px 0;
+  .playlist-controls {
+    display: flex;
+    margin: 10px 0;
 
-      my-global-icon:not(:last-child) {
-        @include margin-right(.5rem);
-      }
+    my-global-icon:not(:last-child) {
+      @include margin-right(.5rem);
+    }
 
-      my-global-icon {
-        &:not(.active) {
-          opacity: .5;
-        }
+    my-global-icon {
+      &:not(.active) {
+        opacity: .5;
+      }
 
-        ::ng-deep {
-          cursor: pointer;
-        }
+      ::ng-deep {
+        cursor: pointer;
       }
     }
   }
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 1ea0cf6b8..461891779 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -61,7 +61,7 @@
             <div class="video-info-channel-left d-flex">
               <my-video-avatar-channel [video]="video" [showChannel]="!isChannelDisplayNameGeneric()"></my-video-avatar-channel>
 
-              <div class="video-info-channel-left-links ml-1">
+              <div class="video-info-channel-left-links ms-1">
                 <ng-container *ngIf="!isChannelDisplayNameGeneric()">
                   <a [routerLink]="[ '/c', video.byVideoChannel ]" i18n-title title="Channel page">
                     {{ video.channel.displayName }}
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
index f250c2407..1d5131092 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.html
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -1,4 +1,4 @@
-<h1 class="sr-only" i18n>Discover</h1>
+<h1 class="visually-hidden" i18n>Discover</h1>
 <div class="margin-content">
 
   <div class="no-results" i18n *ngIf="notResults">No results.</div>