Migrate to bootstrap 5

3 files changed, 28 insertions, 18 deletions

diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index b50544057..9123d2a5a 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -28,14 +28,15 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <div class="input-group input-group-sm">
-                <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
-
-                <div class="input-group-append" *ngIf="!isConfidentialVideo()">
-                  <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
-                    <span class="glyphicon glyphicon-duplicate"></span>
-                  </button>
-                </div>
+              <div class="input-group">
+                <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="getLink()" />
+
+                <button
+                  *ngIf="!isConfidentialVideo()" type="button" class="btn btn-outline-secondary"
+                  [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()"
+                >
+                  <span class="glyphicon glyphicon-duplicate"></span>
+                </button>
               </div>
             </div>
           </ng-template>
@@ -53,13 +54,15 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <div class="input-group input-group-sm">
-                <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
-                <div class="input-group-append" *ngIf="!isConfidentialVideo()">
-                  <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
-                    <span class="glyphicon glyphicon-duplicate"></span>
-                  </button>
-                </div>
+              <div class="input-group">
+                <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="getLink()" />
+
+                <button
+                  *ngIf="!isConfidentialVideo()" type="button" class="btn btn-outline-secondary"
+                  [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()"
+                >
+                  <span class="glyphicon glyphicon-duplicate"></span>
+                </button>
               </div>
             </div>
           </ng-template>
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index bd42f4813..04d5eb560 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -5,6 +5,13 @@
   margin-top: 30px;
 }
 
+.input-group > input {
+  @include peertube-input-text(auto);
+
+  font-size: 14px;
+  padding: 0 5px;
+}
+
 .advanced-filters-button {
   display: flex;
   justify-content: center;
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.html b/client/src/app/shared/shared-video-miniature/videos-list.component.html
index 2b554517f..c220f61f1 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.html
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.html
@@ -12,15 +12,15 @@
 
     <div class="action-block">
       <ng-container *ngFor="let action of headerActions">
-        <a *ngIf="action.routerLink" class="ml-2" [routerLink]="action.routerLink" routerLinkActive="active">
+        <a *ngIf="action.routerLink" class="ms-2" [routerLink]="action.routerLink" routerLinkActive="active">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
         </a>
 
-        <a *ngIf="!action.routerLink && !action.href && action.click" class="ml-2" (click)="action.click($event)" (key.enter)="action.click($event)">
+        <a *ngIf="!action.routerLink && !action.href && action.click" class="ms-2" (click)="action.click($event)" (key.enter)="action.click($event)">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
         </a>
 
-        <a *ngIf="!action.routerLink && action.href && action.click" class="ml-2" (click)="action.click($event)" (key.enter)="action.click($event)" [href]="action.href">
+        <a *ngIf="!action.routerLink && action.href && action.click" class="ms-2" (click)="action.click($event)" (key.enter)="action.click($event)" [href]="action.href">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
         </a>