8 files changed, 19 insertions, 35 deletions

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 b0a9dbb38..c9f9d8f55 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'] }"
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 9be9056b8..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-text {
-  width: 340px;
   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.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
index ab6a43b57..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,14 +1,13 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
+form {
+  max-width: 340px;
 }
 
 my-input-text {
-  width: 340px;
   display: block;
+  width: 100%;
 }
 
 my-input-text + my-input-text {
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-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 78f7ef1d5..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,11 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-label {
-  font-weight: $font-regular;
-  font-size: 100%;
-}
-
 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 abcfe54a6..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
@@ -14,7 +14,6 @@
   </div>
 
   <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>