Migrate to bootstrap 5

10 files changed, 33 insertions, 32 deletions

diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
index 7031cb53b..1d6b3df7e 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.html
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
@@ -1,6 +1,7 @@
-<div class="input-group has-feedback has-clear">
-  <div *ngIf="hasFilters()" class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
-    <div class="input-group-text" ngbDropdownToggle>
+<div class="input-group has-clear" ngbDropdown placement="bottom-left auto" container="body">
+
+  <ng-container *ngIf="hasFilters()">
+    <div class="input-group-text c-hand" ngbDropdownToggle>
       <span class="caret" aria-haspopup="menu" role="button"></span>
     </div>
 
@@ -15,14 +16,14 @@
         </button>
       </ng-container>
     </div>
-  </div>
+  </ng-container>
 
   <input
     type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+    class="last-in-group"
     [(ngModel)]="searchValue"
     (keyup)="onInputSearch($event)"
   >
 
-  <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetTableFilter()"></a>
-  <span class="sr-only" i18n>Clear filters</span>
+  <a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></a>
 </div>
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
index ee1b3b508..ed85385fd 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
@@ -23,7 +23,6 @@ my-global-icon {
   width: 18px;
   height: 18px;
 
-
   &.no-visible {
     @include margin-right($size + $margin);
 
diff --git a/client/src/app/shared/shared-forms/input-switch.component.html b/client/src/app/shared/shared-forms/input-switch.component.html
index ce1dee470..9a466055a 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.html
+++ b/client/src/app/shared/shared-forms/input-switch.component.html
@@ -1,4 +1,4 @@
 <div (click)="update()">
   <input type="checkbox" [checked]="checked"/>
-  <label class="ml-auto">Toggle</label>
+  <label class="ms-auto">Toggle</label>
 </div>
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
index dfe646d2f..e5edb6c97 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
@@ -1,21 +1,19 @@
-<div class="input-group input-group-sm">
+<div class="input-group">
   <input
     [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
     [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly"
     #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
   />
 
-  <div *ngIf="withToggle || withCopy" class="input-group-append">
-    <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [title]="toggleTitle">
-      <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span>
-    </button>
+  <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [title]="toggleTitle">
+    <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span>
+  </button>
 
-    <button
-      *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
-      class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
-    >
-      <span class="glyphicon glyphicon-duplicate"></span>
-      Copy
-    </button>
-  </div>
+  <button
+    *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
+    class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
+  >
+    <span class="glyphicon glyphicon-duplicate"></span>
+    <span class="copy-text">Copy</span>
+  </button>
 </div>
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
index b5a71eddd..02a8d7d0e 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
@@ -5,11 +5,14 @@ input {
   @include peertube-input-text(auto);
   @include padding-left(15px !important);
   @include padding-right(15px !important);
+}
 
-  // set again properties of peertube-input-text that are overridden by .input-group
-  font-size: 15px !important;
+.btn {
+  font-size: 15px;
 }
 
-.eye-button {
-  line-height: 1 !important;
+.copy-text {
+  font-size: 14px;
+  margin-left: 5px;
+  vertical-align: top;
 }
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.html b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
index c679e1403..38a48a2a5 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
@@ -1,6 +1,6 @@
 <div class="root flex-column">
   <div class="d-flex">
-    <label class="form-group-checkbox">
+    <label>
       <input
         type="checkbox"
         [(ngModel)]="checked"
@@ -33,7 +33,7 @@
     <div *ngIf="recommended" class="recommended" i18n>Recommended</div>
   </div>
 
-  <div class="ml-4 d-flex flex-column">
+  <div class="ms-4 d-flex flex-column">
     <small class="wrapper mt-2 muted">
       <ng-content select="description"></ng-content>
     </small>
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
index 4e384e7e0..5fe20c3a5 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -4,7 +4,7 @@
 .root {
   display: flex;
 
-  .form-group-checkbox {
+  label {
     display: flex;
     align-items: center;
 
diff --git a/client/src/app/shared/shared-forms/select/select-channel.component.html b/client/src/app/shared/shared-forms/select/select-channel.component.html
index f83f17a16..b49fd36fa 100644
--- a/client/src/app/shared/shared-forms/select/select-channel.component.html
+++ b/client/src/app/shared/shared-forms/select/select-channel.component.html
@@ -7,7 +7,7 @@
   [searchable]="searchable"
 >
   <ng-option *ngFor="let channel of channels" [value]="channel.id">
-    <img alt="" class="avatar mr-1" [src]="channel.avatarPath" />
+    <img alt="" class="avatar me-1" [src]="channel.avatarPath" />
     {{ channel.label }}
   </ng-option>
 </ng-select>
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.html b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
index 03db2875b..2799ccdcc 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
@@ -22,7 +22,7 @@
 >
 
   <ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
-    <div class="form-group-checkbox">
+    <div class="checkbox-wrapper">
       <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
       <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
       <span>{{ item.group }}</span>
@@ -30,7 +30,7 @@
   </ng-template>
 
   <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
-    <div class="form-group-checkbox">
+    <div class="checkbox-wrapper">
       <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
       <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
       <span>{{ item.label }}</span>
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.scss b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
index d47c4f9da..892f22dff 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
@@ -7,7 +7,7 @@ ng-select ::ng-deep {
     align-items: center;
   }
 
-  .form-group-checkbox {
+  .checkbox-wrapper {
     display: flex;
     align-items: center;