17 files changed, 79 insertions, 123 deletions

diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
index 68d094a4f..2fc691707 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
@@ -3,8 +3,9 @@
   <ng-container i18n>Applications</ng-container>
 </h1>
 
-<div class="form-row"> <!-- built-in token grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row"> <!-- built-in token grid -->
+
+  <div class="group col-12 col-lg-4 col-xl-3">
     <h2 i18n class="applications-title">SUBSCRIPTION FEED</h2>
     <div i18n class="applications-description">
       Use third-party feed aggregators to retrieve the list of videos from
@@ -12,16 +13,16 @@
     </div>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
 
     <div class="form-group">
       <label i18n for="feed-url">Feed URL</label>
-      <my-input-toggle-hidden [value]="feedUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text [value]="feedUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
     </div>
 
     <div class="form-group">
       <label i18n for="feed-token">Feed Token</label>
-      <my-input-toggle-hidden [value]="feedToken" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-text [value]="feedToken" [withCopy]="true" [readonly]="true"></my-input-text>
 
       <div class="form-group-description" i18n>⚠️ Never share your feed token with anyone.</div>
     </div>
@@ -29,7 +30,7 @@
   </div>
 </div>
 
-<div class="form-row mt-4"> <!-- submit placement block -->
+<div class="row mt-4"> <!-- submit placement block -->
   <div class="col-md-7 col-xl-5"></div>
   <div class="col-md-5 col-xl-5">
     <input (click)="renewToken()" type="submit" i18n-value value="Renew token">
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
index 2a3b85c22..b3fedd2f6 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.scss
@@ -1,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 .applications-title {
   @include settings-big-title;
 }
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index f0e9f4010..b98cd1156 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -1,11 +1,11 @@
-<h1 class="sr-only" i18n>Notifications</h1>
+<h1 class="visually-hidden" i18n>Notifications</h1>
 <div class="header">
   <a routerLink="/my-account/settings" fragment="notifications" i18n>
     <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
     Notification preferences
   </a>
 
-  <div class="peertube-select-container peertube-select-button ml-2 mr-2">
+  <div class="peertube-select-container peertube-select-button ms-2 me-2">
     <select [(ngModel)]="notificationSortType" (ngModelChange)="onChangeSortColumn()" class="form-control">
       <option value="undefined" disabled>Sort by</option>
       <option value="createdAt" i18n>Newest first</option>
@@ -13,7 +13,7 @@
     </select>
   </div>
 
-  <button class="btn ml-auto" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
+  <button class="btn ms-auto" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
     <ng-container *ngIf="hasUnreadNotifications()">
       <my-global-icon iconName="tick" aria-hidden="true"></my-global-icon>
 
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
index b0ac45e30..d412e568f 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss
@@ -3,7 +3,6 @@
 
 .header {
   display: flex;
-  font-size: 15px;
   margin-bottom: 20px;
 
   a {
@@ -23,11 +22,6 @@
   }
 }
 
-
-my-user-notifications {
-  font-size: 15px;
-}
-
 @media screen and (max-width: $mobile-view) {
   .header {
     flex-direction: column;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
index 6d2d7d46e..d85be846b 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@@ -1,18 +1,20 @@
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 <div *ngIf="success" class="alert alert-success">{{ success }}</div>
 
-<div i18n class="current-email">
-  Your current email is <span class="email">{{ user.email }}</span>.
-  It is never shown to the public.
-</div>
-
 <div i18n class="pending-email" *ngIf="user.pendingEmail">
-  <span class="email">{{ user.pendingEmail }}</span> is awaiting email verification
+  <strong>{{ user.pendingEmail }}</strong> is awaiting email verification
 </div>
 
 <form role="form" class="change-email" (ngSubmit)="changeEmail()" [formGroup]="form" *ngIf="user.pluginAuth === null">
 
   <div class="form-group">
+    <label i18n for="new-email">Change your email</label>
+
+    <div i18n class="form-group-description">
+      Your current email is <strong>{{ user.email }}</strong>.
+      It is never shown to the public.
+    </div>
+
     <input
       type="email" id="new-email" i18n-placeholder placeholder="New email" class="form-control"
       formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }"
@@ -23,14 +25,10 @@
   </div>
 
   <div class="form-group">
-    <my-input-toggle-hidden formControlName="password"
-                            id="password"
-                            i18n-placeholder placeholder="Current password"
-                            [ngClass]="{ 'input-error': formErrors['password'] }"
-                            autocomplete="current-password"></my-input-toggle-hidden>
-    <div *ngIf="formErrors['password']" class="form-error">
-      {{ formErrors['password'] }}
-    </div>
+    <my-input-text
+      formControlName="password" id="password" i18n-placeholder placeholder="Current password"
+      [formError]="formErrors['password']" autocomplete="current-password"
+    ></my-input-text>
   </div>
 
   <input type="submit" i18n-value value="Change email" [disabled]="!form.valid">
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
index 788db02ad..8d1804a93 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
@@ -1,18 +1,17 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
+form {
+  max-width: 340px;
 }
 
-my-input-toggle-hidden {
-  width: 340px;
+my-input-text {
   display: block;
+  width: 100%;
 }
 
 input[type=email] {
-  @include peertube-input-text(340px);
+  @include peertube-input-text(100%);
 
   display: block;
 }
@@ -22,15 +21,6 @@ input[type=submit] {
   @include orange-button;
 }
 
-.current-email,
 .pending-email {
   margin-bottom: 15px;
-
-  .email {
-    font-weight: $font-semibold;
-  }
-}
-
-.form-group {
-  width: max-content;
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
index 43facb7ed..f961d3294 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -3,32 +3,20 @@
 <form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
 
   <label i18n for="current-password">Change password</label>
-  <my-input-toggle-hidden formControlName="current-password"
-                          inputId="current-password"
-                          i18n-placeholder placeholder="Current password"
-                          [ngClass]="{ 'input-error': formErrors['current-password'] }"
-                          autocomplete="current-password"></my-input-toggle-hidden>
-  <div *ngIf="formErrors['current-password']" class="form-error">
-    {{ formErrors['current-password'] }}
-  </div>
+  <my-input-text
+    formControlName="current-password" inputId="current-password" i18n-placeholder placeholder="Current password"
+    [formError]="formErrors['current-password']" autocomplete="current-password"
+  ></my-input-text>
 
-  <my-input-toggle-hidden formControlName="new-password"
-                          inputId="new-password"
-                          i18n-placeholder placeholder="New password"
-                          [ngClass]="{ 'input-error': formErrors['new-password'] }"
-                          autocomplete="new-password"></my-input-toggle-hidden>
-  <div *ngIf="formErrors['new-password']" class="form-error">
-    {{ formErrors['new-password'] }}
-  </div>
+  <my-input-text
+    formControlName="new-password" inputId="new-password" i18n-placeholder placeholder="New password"
+    [formError]="formErrors['new-password']" autocomplete="new-password"
+  ></my-input-text>
 
-  <my-input-toggle-hidden formControlName="new-confirmed-password"
-                          inputId="new-confirmed-password"
-                          i18n-placeholder placeholder="Confirm new password"
-                          [ngClass]="{ 'input-error': formErrors['new-confirmed-password'] }"
-                          autocomplete="new-password"></my-input-toggle-hidden>
-  <div *ngIf="formErrors['new-confirmed-password']" class="form-error">
-    {{ formErrors['new-confirmed-password'] }}
-  </div>
+  <my-input-text
+    formControlName="new-confirmed-password" inputId="new-confirmed-password" i18n-placeholder placeholder="Confirm new password"
+    [formError]="formErrors['new-confirmed-password']" autocomplete="new-password"
+  ></my-input-text>
 
   <input type="submit" i18n-value value="Change password" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
index c46aae266..a29f04c36 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
@@ -1,17 +1,16 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
+form {
+  max-width: 340px;
 }
 
-my-input-toggle-hidden {
-  width: 340px;
+my-input-text {
   display: block;
+  width: 100%;
 }
 
-my-input-toggle-hidden + my-input-toggle-hidden {
+my-input-text + my-input-text {
   margin-top: 15px;
 }
 
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
index c3cfe0314..46f5e5d6b 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.html
@@ -1,13 +1,13 @@
 <div *ngIf="webNotifications">
   <ng-container *ngFor="let group of notificationSettingGroups">
-    <div class="header custom-row">
+    <div class="header notification-row">
       <div i18n>{{ group.label }}</div>
       <div i18n>Web</div>
       <div i18n *ngIf="emailEnabled">Email</div>
     </div>
 
     <ng-container *ngFor="let notificationType of group.keys">
-      <div class="custom-row" *ngIf="hasUserRight(notificationType)">
+      <div class="small notification-row" *ngIf="hasUserRight(notificationType)">
         <div>{{ labelNotifications[notificationType] }}</div>
 
         <div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index 2fe1f9536..8181c3175 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -1,13 +1,12 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.custom-row {
+.notification-row {
   display: flex;
   align-items: center;
   border-bottom: 1px solid $separator-border-color;
 
   &.header {
-    font-size: 16px;
     font-weight: $font-semibold;
     margin-top: 10px;
   }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
index 7c13282fa..769ab647a 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.ts
@@ -37,7 +37,7 @@ export class MyAccountNotificationPreferencesComponent implements OnInit {
       myVideoPublished: $localize`Video published (after transcoding/scheduled update)`,
       myVideoImportFinished: $localize`Video import finished`,
       newUserRegistration: $localize`A new user registered on your instance`,
-      newFollow: $localize`You or your channel(s) has a new follower`,
+      newFollow: $localize`You or one of your channels has a new follower`,
       commentMention: $localize`Someone mentioned you in video comments`,
       newInstanceFollower: $localize`Your instance has a new follower`,
       autoInstanceFollowing: $localize`Your instance automatically followed another instance`,
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
index ae5f25cff..2b192ab6d 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.html
@@ -8,7 +8,7 @@
       type="text" id="username" class="form-control"
       formControlName="username" readonly
     >
-    <div class="muted" i18n>
+    <div class="form-group-description" i18n>
       People can find you using @{{ user.username }}@{{ instanceHost }}
     </div>
   </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
index cbac81d01..23e701332 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -1,15 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
-.form-group:first-child {
-  margin-bottom: 15px;
-}
-
 input#username + .muted {
   margin-top: 5px;
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index 8ca197fd4..d9e833019 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -1,83 +1,83 @@
-<h1 class="sr-only" i18n>Settings</h1>
-<div class="form-row"> <!-- preview -->
-  <div class="form-group col-12 col-lg-4 col-xl-3"></div>
+<h1 class="visually-hidden" i18n>Settings</h1>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+<div class="row"> <!-- preview -->
+  <div class="col-12 col-lg-4 col-xl-3"></div>
+
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-actor-avatar-edit [actor]="user.account" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"></my-actor-avatar-edit>
   </div>
 </div>
 
-<div class="form-row"> <!-- profile settings grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-3"> <!-- profile settings grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title">PROFILE SETTINGS</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
-
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-user-quota [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
 
     <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- interface grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- interface grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title">INTERFACE</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-user-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-interface-settings>
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- video settings grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- video settings grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <div class="anchor" id="video-settings"></div> <!-- video settings anchor -->
     <h2 i18n class="account-title">VIDEO SETTINGS</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-user-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-video-settings>
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- notifications grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- notifications grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <div class="anchor" id="notifications"></div> <!-- notifications anchor -->
     <h2 i18n class="account-title">NOTIFICATIONS</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences>
   </div>
 </div>
 
-<div class="form-row mt-5" *ngIf="user.pluginAuth === null"> <!-- password grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5" *ngIf="user.pluginAuth === null"> <!-- password grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title">PASSWORD</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-account-change-password></my-account-change-password>
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- email grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- email grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title">EMAIL</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-account-change-email></my-account-change-email>
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- danger zone grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- danger zone grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title account-title-danger">DANGER ZONE</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-account-danger-zone [user]="user"></my-account-danger-zone>
   </div>
 </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index 1c216d79d..8206f4dd8 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -1,5 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '~bootstrap/scss/functions' as *;
 
 .account-title {
   @include settings-big-title;
@@ -9,6 +10,6 @@
   }
 }
 
-.form-group {
+.row > div {
   max-width: 500px;
 }
diff --git a/client/src/app/+my-account/my-account.component.html b/client/src/app/+my-account/my-account.component.html
index b465d0156..1c44c8472 100644
--- a/client/src/app/+my-account/my-account.component.html
+++ b/client/src/app/+my-account/my-account.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="root">
   <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
 
   <div class="margin-content pb-5" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index 1ec25315a..6275b7ac2 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -1,7 +1,7 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.row {
+.root {
   @include sub-menu-h1;
 
   flex-direction: column;