Migrate to bootstrap 5

2 files changed, 29 insertions, 40 deletions

diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
index 3751747a9..61b89082c 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@@ -3,42 +3,41 @@
 <div class="margin-content">
   <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
 
-    <div class="form-row"> <!-- channel grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row"> <!-- channel grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div *ngIf="isCreation()" class="video-channel-title" i18n>NEW CHANNEL</div>
         <div *ngIf="!isCreation() && videoChannel" class="video-channel-title" i18n>CHANNEL</div>
       </div>
-  
-      <div class="form-group col-12 col-lg-8 col-xl-9">
+
+      <div class="col-12 col-lg-8 col-xl-9">
         <h6 i18n>Banner image of the channel</h6>
-  
+
         <my-actor-banner-edit
           *ngIf="videoChannel" [previewImage]="isCreation()"
           [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
         ></my-actor-banner-edit>
-  
+
         <my-actor-avatar-edit
           *ngIf="videoChannel" [previewImage]="isCreation()"
           [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
           [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()"
         ></my-actor-avatar-edit>
-  
+
         <div class="form-group" *ngIf="isCreation()">
           <label i18n for="name">Name</label>
+
           <div class="input-group">
             <input
               type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
               formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control"
             >
-            <div class="input-group-append">
-              <span class="input-group-text">@{{ instanceHost }}</span>
-            </div>
+            <div class="input-group-text">@{{ instanceHost }}</div>
           </div>
           <div *ngIf="formErrors['name']" class="form-error">
             {{ formErrors['name'] }}
           </div>
         </div>
-  
+
         <div class="form-group">
           <label i18n for="display-name">Display name</label>
           <input
@@ -49,7 +48,7 @@
             {{ formErrors['display-name'] }}
           </div>
         </div>
-  
+
         <div class="form-group">
           <label i18n for="description">Description</label>
           <textarea
@@ -60,7 +59,7 @@
             {{ formErrors.description }}
           </div>
         </div>
-  
+
         <div class="form-group">
           <label for="support">Support</label>
           <my-help
@@ -75,22 +74,22 @@
             {{ formErrors.support }}
           </div>
         </div>
-  
+
         <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
           <my-peertube-checkbox
             inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
             i18n-labelText labelText="Overwrite support field of all videos of this channel"
           ></my-peertube-checkbox>
         </div>
-  
+
       </div>
     </div>
-  
-    <div class="form-row"> <!-- submit placement block -->
+
+    <div class="row"> <!-- submit placement block -->
       <div class="col-md-7 col-xl-5"></div>
       <div class="col-md-5 col-xl-5 d-inline-flex">
         <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
       </div>
     </div>
-  </form>  
-</div>
\ No newline at end of file
+  </form>
+</div>
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
index d010d6277..2c720314a 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
@@ -24,31 +24,21 @@ my-actor-banner-edit {
   max-width: 500px;
 }
 
-.input-group {
-  @include peertube-input-group(fit-content);
-}
-
-.input-group-append {
-  height: 30px;
-}
-
-input {
-  &[type=text] {
-    @include peertube-input-text(340px);
+input[type=text] {
+  @include peertube-input-text(340px);
 
-    display: block;
+  display: block;
 
-    &#name {
-      width: auto;
-      flex-grow: 1;
-    }
+  &#name {
+    width: auto;
+    flex-grow: 1;
   }
+}
 
-  &[type=submit] {
-    @include peertube-button;
-    @include orange-button;
-    @include margin-left(auto);
-  }
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+  @include margin-left(auto);
 }
 
 textarea {