Use grid to organise settings in admin, my-account

10 files changed, 107 insertions, 38 deletions

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 81eba3ec9..aec709ea0 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,6 +1,11 @@
 @import '_variables';
 @import '_mixins';
 
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
 input[type=password],
 input[type=email] {
   @include peertube-input-text(340px);
@@ -16,7 +21,7 @@ input[type=submit] {
 .current-email,
 .pending-email {
   font-size: 16px;
-  margin: 15px 0;
+  margin-bottom: 15px;
 
   .email {
     font-weight: $font-semibold;
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 e641482f0..381afae07 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,6 +1,11 @@
 @import '_variables';
 @import '_mixins';
 
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
 input[type=password] {
   @include peertube-input-text(340px);
   display: block;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html
index c542cc675..dd9b56585 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.html
@@ -1,5 +1,5 @@
 <div class="delete-me">
-  <p i18n>Once you delete your account, there is no going back. Please be certain.</p>
+  <p i18n>Once you delete your account, there is no going back.</p>
 
   <button (click)="deleteMe()" i18n>Delete your account</button>
 </div>
\ No newline at end of file
diff --git a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss
index 629f01733..7818dfc02 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-interface/my-account-interface-settings.component.scss
@@ -1,6 +1,11 @@
 @import '_variables';
 @import '_mixins';
 
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
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 05c0b5ddc..14e51f57c 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
@@ -24,5 +24,5 @@
     </div>
   </div>
 
-  <input type="submit" i18n-value value="Update my profile" [disabled]="!form.valid">
+  <input type="submit" i18n-value value="Save" [disabled]="!form.valid">
 </form>
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 6aabb60f4..2f8df81d4 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,6 +1,11 @@
 @import '_variables';
 @import '_mixins';
 
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
 .form-group:first-child {
   margin-bottom: 15px;
 }
@@ -11,12 +16,6 @@ input[type=text] {
   display: block;
 }
 
-textarea {
-  @include peertube-textarea(500px, 150px);
-
-  display: block;
-}
-
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
@@ -24,3 +23,8 @@ input[type=submit] {
   margin-top: 15px;
 }
 
+textarea {
+  @include peertube-textarea(500px, 150px);
+
+  display: block;
+}
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 9f187b574..164afb4ea 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,34 +1,83 @@
-<my-actor-avatar-info [actor]="user.account" (avatarChange)="onAvatarChange($event)"></my-actor-avatar-info>
+<div class="form-row"> <!-- profile grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div i18n class="account-title">PROFILE</div>
+  </div>
+
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <my-actor-avatar-info [actor]="user.account" (avatarChange)="onAvatarChange($event)"></my-actor-avatar-info>
+
+    <div class="user-quota mb-3">
+      <div>
+        <label i18n>Total video quota:</label>
+        <ng-container i18n>{{ userVideoQuotaUsed | bytes: 0 }} used</ng-container> / {{ userVideoQuota }}
+      </div>
+
+      <div *ngIf="hasDailyQuota()">
+        <label i18n>Daily video quota:</label>
+        <ng-container>{{ userVideoQuotaUsedDaily | bytes: 0 }} used</ng-container> / {{ userVideoQuotaDaily }}
+      </div>
+    </div>
+
+    <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
+  </div>
+</div>
 
-<div class="user-quota">
-  <div>
-    <span i18n class="user-quota-label">Total video quota:</span>
-    <ng-container i18n>{{ userVideoQuotaUsed | bytes: 0 }} used</ng-container> / {{ userVideoQuota }}
+<div class="form-row mt-5"> <!-- video settings grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div i18n class="account-title">VIDEO SETTINGS</div>
   </div>
 
-  <div *ngIf="hasDailyQuota()">
-    <span i18n class="user-quota-label">Daily video quota:</span>
-    <ng-container>{{ userVideoQuotaUsedDaily | bytes: 0 }} used</ng-container> / {{ userVideoQuotaDaily }}
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings>
   </div>
 </div>
 
-<div i18n class="account-title">Profile</div>
-<my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
+<div class="form-row mt-5"> <!-- notifications grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div i18n class="account-title">NOTIFICATIONS</div>
+  </div>
 
-<div i18n class="account-title">Video settings</div>
-<my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings>
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences>
+  </div>
+</div>
 
-<div i18n class="account-title">Notifications</div>
-<my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences>
+<div class="form-row mt-5"> <!-- interface grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div i18n class="account-title">INTERFACE</div>
+  </div>
 
-<div i18n class="account-title">Interface</div>
-<my-account-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-interface-settings>
+  <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <my-account-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-interface-settings>
+  </div>
+</div>
 
-<div i18n class="account-title">Password</div>
-<my-account-change-password></my-account-change-password>
+<div class="form-row mt-5"> <!-- password grid -->
+  <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div i18n class="account-title">PASSWORD</div>
+  </div>
+
+  <div class="form-group form-group-right 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 i18n class="account-title">EMAIL</div>
+  </div>
 
-<div i18n class="account-title">Email</div>
-<my-account-change-email></my-account-change-email>
+  <div class="form-group form-group-right 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 i18n class="account-title">DANGER ZONE</div>
+  </div>
 
-<div i18n class="account-title">Danger zone</div>
-<my-account-danger-zone [user]="user"></my-account-danger-zone>
+  <div class="form-group form-group-right 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 d0395aca9..7eb60c7fb 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
@@ -5,15 +5,11 @@
   font-size: 15px;
   margin-top: 20px;
 
-  .user-quota-label {
+  label {
     margin-right: 5px;
-    font-weight: $font-semibold;
   }
 }
 
 .account-title {
-  @include in-content-small-title;
-
-  margin-top: 55px;
-  margin-bottom: 30px;
+  @include settings-big-title;
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
index 1881be762..56cef0398 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss
@@ -1,6 +1,11 @@
 @import '_variables';
 @import '_mixins';
 
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.ts b/client/src/app/+my-account/shared/actor-avatar-info.component.ts
index 8e034bb82..eb198587d 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.ts
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.ts
@@ -48,6 +48,6 @@ export class ActorAvatarInfoComponent implements OnInit {
   }
 
   get avatarExtensions () {
-    return this.serverConfig.avatar.file.extensions.join(',')
+    return this.serverConfig.avatar.file.extensions.join(', ')
   }
 }