Migrate to bootstrap 5

6 files changed, 28 insertions, 36 deletions

diff --git a/client/src/app/shared/shared-moderation/account-block-badges.component.html b/client/src/app/shared/shared-moderation/account-block-badges.component.html
index feac707c2..fd3709676 100644
--- a/client/src/app/shared/shared-moderation/account-block-badges.component.html
+++ b/client/src/app/shared/shared-moderation/account-block-badges.component.html
@@ -1,4 +1,4 @@
-<span *ngIf="account.mutedByUser" class="badge badge-danger" i18n>Muted</span>
-<span *ngIf="account.mutedServerByUser" class="badge badge-danger" i18n>Instance muted</span>
-<span *ngIf="account.mutedByInstance" class="badge badge-danger" i18n>Muted by your instance</span>
-<span *ngIf="account.mutedServerByInstance" class="badge badge-danger" i18n>Instance muted by your instance</span>
+<span *ngIf="account.mutedByUser" class="pt-badge badge-danger" i18n>Muted</span>
+<span *ngIf="account.mutedServerByUser" class="pt-badge badge-danger" i18n>Instance muted</span>
+<span *ngIf="account.mutedByInstance" class="pt-badge badge-danger" i18n>Muted by your instance</span>
+<span *ngIf="account.mutedServerByInstance" class="pt-badge badge-danger" i18n>Instance muted by your instance</span>
diff --git a/client/src/app/shared/shared-moderation/account-block-badges.component.scss b/client/src/app/shared/shared-moderation/account-block-badges.component.scss
index ccc3666aa..301d8305e 100644
--- a/client/src/app/shared/shared-moderation/account-block-badges.component.scss
+++ b/client/src/app/shared/shared-moderation/account-block-badges.component.scss
@@ -1,9 +1,8 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.badge {
+.pt-badge {
   @include margin-right(10px);
 
-  height: fit-content;
   font-size: 12px;
 }
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index a4f81d824..15632f654 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -11,7 +11,7 @@
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.html b/client/src/app/shared/shared-moderation/report-modals/report.component.html
index 6c99180ef..8e0b0993c 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.html
@@ -8,11 +8,11 @@
     <form novalidate [formGroup]="form" (ngSubmit)="report()">
 
     <div class="row">
-      <div class="col-5 form-group">
+      <div class="col-5">
 
           <label i18n for="reportPredefinedReasons">What is the issue?</label>
 
-          <div class="ml-2 mt-2 d-flex flex-column">
+          <div class="ms-2 mt-2 d-flex flex-column">
             <ng-container formGroupName="predefinedReasons">
 
               <div class="form-group" *ngFor="let reason of predefinedReasons">
@@ -29,7 +29,6 @@
 
             </ng-container>
           </div>
-
       </div>
 
       <div class="col-7">
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
index afac108fc..51ca0b9d6 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -8,38 +8,32 @@
     <form novalidate [formGroup]="form" (ngSubmit)="report()">
 
     <div class="row">
-      <div class="col-5 form-group">
+      <div class="col-12 col-md-5">
+        <label i18n for="reportPredefinedReasons">What is the issue?</label>
 
-          <label i18n for="reportPredefinedReasons">What is the issue?</label>
+        <div class="ms-2 mt-2 d-flex flex-column">
+          <ng-container formGroupName="predefinedReasons">
 
-          <div class="ml-2 mt-2 d-flex flex-column">
-            <ng-container formGroupName="predefinedReasons">
+            <div class="form-group" *ngFor="let reason of predefinedReasons">
+              <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
+                <ng-template *ngIf="reason.help" ptTemplate="help">
+                  <div [innerHTML]="reason.help"></div>
+                </ng-template>
 
-              <div class="form-group" *ngFor="let reason of predefinedReasons">
-                <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
-                  <ng-template *ngIf="reason.help" ptTemplate="help">
-                    <div [innerHTML]="reason.help"></div>
-                  </ng-template>
-
-                  <ng-container *ngIf="reason.description" ngProjectAs="description">
-                    <div [innerHTML]="reason.description"></div>
-                  </ng-container>
-                </my-peertube-checkbox>
-              </div>
-
-            </ng-container>
-          </div>
+                <ng-container *ngIf="reason.description" ngProjectAs="description">
+                  <div [innerHTML]="reason.description"></div>
+                </ng-container>
+              </my-peertube-checkbox>
+            </div>
 
+          </ng-container>
+        </div>
       </div>
 
-      <div class="col-7">
-        <div class="row justify-content-center">
-          <div class="col-12 col-lg-9 mb-2">
-            <my-embed [video]="video"></my-embed>
-          </div>
-        </div>
+      <div class="col-12 col-md-7">
+        <my-embed [video]="video"></my-embed>
 
-        <div class="mb-1 start-at" formGroupName="timestamp">
+        <div class="mb-1 mt-3 start-at" formGroupName="timestamp">
           <my-peertube-checkbox
             formControlName="hasStart"
             i18n-labelText labelText="Start at"
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index 1a320e9a4..ba4336e2e 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -19,7 +19,7 @@
         </a>
       </div>
 
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>