Use grid to organise settings in admin, my-account

client/src/app/+about/about.component.html

@@ -2,11 +2,11 @@
   <div class="sub-menu">
 
     <div class="links">
-      <a i18n routerLink="instance" routerLinkActive="active" class="title-page">Instance</a>
+      <a i18n routerLink="instance" routerLinkActive="active" class="title-page title-page-about">Instance</a>
 
-      <a i18n routerLink="peertube" routerLinkActive="active" class="title-page">PeerTube</a>
+      <a i18n routerLink="peertube" routerLinkActive="active" class="title-page title-page-about">PeerTube</a>
 
-      <a i18n routerLink="follows" routerLinkActive="active" class="title-page">Follows</a>
+      <a i18n routerLink="follows" routerLinkActive="active" class="title-page title-page-about">Follows</a>
     </div>
   </div>
 

client/src/app/+admin/admin.component.html

@@ -1,7 +1,7 @@
 <div class="row">
   <div class="sub-menu">
     <ng-template #linkTemplate let-item="item">
-      <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
+      <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ item.label }}</a>
     </ng-template>
 
     <list-overflow [items]="items" [itemTemplate]="linkTemplate"></list-overflow>

client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html

@@ -7,7 +7,12 @@
 
         <ng-container formGroupName="instance">
 
+          <div class="form-row mt-5"> <!-- instance grid -->
+            <div class="form-group col-12 col-lg-4 col-xl-3">
               <div i18n class="inner-form-title">INSTANCE</div>
+            </div>
+
+            <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
               <div class="form-group">
                 <label i18n for="instanceName">Name</label>
@@ -60,7 +65,15 @@
                 </div>
               </div>
 
+            </div>
+          </div>
+
+          <div class="form-row mt-4"> <!-- moderation & nsfw grid -->
+            <div class="form-group col-12 col-lg-4 col-xl-3">
               <div i18n class="inner-form-title">MODERATION & NSFW</div>
+            </div>
+
+            <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
               <div class="form-group">
                 <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
@@ -127,7 +140,15 @@
                 <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
               </div>
 
+            </div>
+          </div>
+
+          <div class="form-row mt-4"> <!-- you and your instance grid -->
+            <div class="form-group col-12 col-lg-4 col-xl-3">
               <div i18n class="inner-form-title">YOU AND YOUR INSTANCE</div>
+            </div>
+
+            <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
               <div class="form-group">
                 <label i18n for="instanceAdministrator">Who is behind the instance?</label>
@@ -165,7 +186,7 @@
 
               <div class="form-group">
                 <label i18n for="instanceBusinessModel">How will you finance the PeerTube server?</label>
-            <div i18n class="label-small-info">With your own funds? With users donations? Advertising?</div>
+                <div i18n class="label-small-info">With your own funds? With user donations? Advertising?</div>
 
                 <textarea
                   id="instanceBusinessModel" formControlName="businessModel" class="small"
@@ -174,7 +195,15 @@
                 <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
               </div>
 
+            </div>
+          </div>
+
+          <div class="form-row mt-4"> <!-- other information grid -->
+            <div class="form-group col-12 col-lg-4 col-xl-3">
               <div i18n class="inner-form-title">OTHER INFORMATION</div>
+            </div>
+
+            <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
               <div class="form-group">
                 <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label>
@@ -188,6 +217,9 @@
                 <div *ngIf="formErrors.instance.hardwareInformation" class="form-error">{{ formErrors.instance.hardwareInformation }}</div>
               </div>
 
+            </div>
+          </div>
+
         </ng-container>
       </ng-template>
     </ngb-tab>
@@ -195,11 +227,16 @@
     <ngb-tab i18n-title title="Basic configuration">
       <ng-template ngbTabContent>
 
-        <div i18n class="inner-form-title">THEME AND DEFAULT ROUTE</div>
+        <div class="form-row mt-5"> <!-- appearance grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
+            <div i18n class="inner-form-title">APPEARANCE</div>
+          </div>
+
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
             <ng-container formGroupName="theme">
               <div class="form-group">
-            <label i18n for="themeDefault">Global theme</label>
+                <label i18n for="themeDefault">Theme</label>
 
                 <div class="peertube-select-container">
                   <select formControlName="default" id="themeDefault">
@@ -211,9 +248,8 @@
               </div>
             </ng-container>
 
-
             <div class="form-group" formGroupName="instance">
-          <label i18n for="instanceDefaultClientRoute">Default client route</label>
+              <label i18n for="instanceDefaultClientRoute">Landing page</label>
               <div class="peertube-select-container">
                 <select id="instanceDefaultClientRoute" formControlName="defaultClientRoute">
                   <option i18n value="/videos/overview">Discover videos</option>
@@ -226,7 +262,15 @@
               <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
             </div>
 
-        <div i18n class="inner-form-title">SIGNUP</div>
+          </div>
+        </div>
+
+        <div class="form-row mt-4"> <!-- new users grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
+            <div i18n class="inner-form-title">NEW USERS</div>
+          </div>
+
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
             <ng-container formGroupName="signup">
               <div class="form-group">
@@ -257,9 +301,6 @@
               </div>
             </ng-container>
 
-
-        <div i18n class="inner-form-title">USERS</div>
-
             <ng-container formGroupName="user">
               <div class="form-group">
                 <label i18n for="userVideoQuota">Default video quota per user</label>
@@ -286,8 +327,15 @@
               </div>
             </ng-container>
 
+          </div>
+        </div>
 
-        <div i18n class="inner-form-title">IMPORT</div>
+        <div class="form-row mt-4"> <!-- new videos grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
+            <div i18n class="inner-form-title">NEW VIDEOS</div>
+          </div>
+
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
             <ng-container formGroupName="import">
               <ng-container formGroupName="videos">
@@ -309,9 +357,6 @@
               </ng-container>
             </ng-container>
 
-
-        <div i18n class="inner-form-title">AUTO-BLACKLIST</div>
-
             <ng-container formGroupName="autoBlacklist">
               <ng-container formGroupName="videos">
                 <ng-container formGroupName="ofUsers">
@@ -331,8 +376,15 @@
               </ng-container>
             </ng-container>
 
+          </div>
+        </div>
 
-        <div i18n class="inner-form-title">INSTANCE FOLLOWERS</div>
+        <div class="form-row mt-4"> <!-- federation grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
+            <div i18n class="inner-form-title">FEDERATION</div>
+          </div>
+
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
             <ng-container formGroupName="followers">
               <ng-container formGroupName="instance">
@@ -340,7 +392,7 @@
                 <div class="form-group">
                   <my-peertube-checkbox
                     inputName="followersInstanceEnabled" formControlName="enabled"
-                i18n-labelText labelText="Other instances can follow your instance"
+                    i18n-labelText labelText="Other instances can follow yours"
                   ></my-peertube-checkbox>
                 </div>
 
@@ -353,8 +405,6 @@
               </ng-container>
             </ng-container>
 
-        <div i18n class="inner-form-title">INSTANCE FOLLOWINGS</div>
-
             <ng-container formGroupName="followings">
               <ng-container formGroupName="instance">
 
@@ -362,7 +412,7 @@
                   <div class="form-group">
                     <my-peertube-checkbox
                       inputName="followingsInstanceAutoFollowBackEnabled" formControlName="enabled"
-                  i18n-labelText labelText="Automatically follow other instances that follow you"
+                      i18n-labelText labelText="Automatically follow back instances"
                     >
                       <ng-container ngProjectAs="description">
                         <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
@@ -398,8 +448,15 @@
               </ng-container>
             </ng-container>
 
+          </div>
+        </div>
 
+        <div class="form-row mt-4"> <!-- administrators grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
             <div i18n class="inner-form-title">ADMINISTRATORS</div>
+          </div>
+
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
             <div class="form-group" formGroupName="admin">
               <label i18n for="adminEmail">Admin email</label>
@@ -417,12 +474,21 @@
               ></my-peertube-checkbox>
             </div>
 
+          </div>
+        </div>
+
       </ng-template>
     </ngb-tab>
 
     <ngb-tab i18n-title title="Services">
       <ng-template ngbTabContent>
+
+        <div class="form-row mt-5"> <!-- twitter grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
             <div i18n class="inner-form-title">TWITTER</div>
+          </div>
+
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
             <ng-container formGroupName="services">
               <ng-container formGroupName="twitter">
@@ -464,15 +530,24 @@
               </ng-container>
             </ng-container>
 
+          </div>
+        </div>
+
     </ng-template>
     </ngb-tab>
 
     <ngb-tab i18n-title title="Advanced configuration">
       <ng-template ngbTabContent>
 
+        <div class="form-row mt-5"> <!-- transcoding grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
             <div i18n class="inner-form-title">TRANSCODING</div>
+          </div>
+
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
             <ng-container formGroupName="transcoding">
+
               <div class="form-group">
                 <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled">
                   <ng-template ptTemplate="label">
@@ -482,12 +557,10 @@
                   <ng-template ptTemplate="help">
                     <ng-container i18n>If you disable transcoding, many videos from your users will not work!</ng-container>
                   </ng-template>
-            </my-peertube-checkbox>
-          </div>
 
-          <ng-container *ngIf="isTranscodingEnabled()">
+                  <ng-container ngProjectAs="extra">
 
-            <div class="form-group">
+                    <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
                       <my-peertube-checkbox
                         inputName="transcodingAllowAdditionalExtensions" formControlName="allowAdditionalExtensions"
                         i18n-labelText labelText="Allow additional extensions"
@@ -498,7 +571,7 @@
                       </my-peertube-checkbox>
                     </div>
     
-            <div class="form-group">
+                    <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
                       <my-peertube-checkbox
                         inputName="transcodingAllowAudioFiles" formControlName="allowAudioFiles"
                         i18n-labelText labelText="Allow audio files upload"
@@ -510,7 +583,7 @@
                     </div>
 
                     <ng-container formGroupName="webtorrent">
-              <div class="form-group" >
+                      <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
                         <my-peertube-checkbox
                           inputName="transcodingWebTorrentEnabled" formControlName="enabled"
                           i18n-labelText labelText="WebTorrent support enabled"
@@ -531,7 +604,7 @@
                     </ng-container>
 
                     <ng-container formGroupName="hls">
-              <div class="form-group" >
+                      <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
                         <my-peertube-checkbox
                           inputName="transcodingHlsEnabled" formControlName="enabled"
                           i18n-labelText labelText="HLS support enabled"
@@ -554,7 +627,7 @@
                       </div>
                     </ng-container>
     
-            <div class="form-group">
+                    <div class="form-group" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
                       <label i18n for="transcodingThreads">Transcoding threads</label>
                       <div class="peertube-select-container">
                         <select id="transcodingThreads" formControlName="threads">
@@ -567,7 +640,7 @@
                     </div>
     
                     <ng-container formGroupName="resolutions">
-              <div class="form-group" *ngFor="let resolution of resolutions">
+                      <div class="form-group" *ngFor="let resolution of resolutions" [ngClass]="{ 'disabled-checkbox-extra': !isTranscodingEnabled() }">
                         <my-peertube-checkbox
                           [inputName]="getResolutionKey(resolution.id)" [formControlName]="resolution.id"
                           i18n-labelText labelText="Resolution {{resolution.label}} enabled"
@@ -580,39 +653,57 @@
                     </ng-container>
 
                   </ng-container>
+                </my-peertube-checkbox>
+              </div>
+
             </ng-container>
 
+          </div>
+        </div>
+
+        <div class="form-row mt-4"> <!-- cache grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
             <div class="inner-form-title">
               <ng-container i18n>CACHE</ng-container>
-
               <my-help>
                 <ng-template ptTemplate="customHtml">
                   <ng-container i18n>Some files are not federated (previews, captions). We fetch them directly from the origin instance and cache them.</ng-container>
                 </ng-template>
               </my-help>
             </div>
+          </div>
+
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
             <ng-container formGroupName="cache">
               <div class="form-group" formGroupName="previews">
-            <label i18n for="cachePreviewsSize">Previews cache size</label>
+                <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
                 <input
-              type="text" id="cachePreviewsSize"
+                  type="number" min="0" id="cachePreviewsSize"
                   formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.previews.size'] }"
                 >
                 <div *ngIf="formErrors.cache.previews.size" class="form-error">{{ formErrors.cache.previews.size }}</div>
               </div>
 
               <div class="form-group" formGroupName="captions">
-            <label i18n for="cacheCaptionsSize">Video captions cache size</label>
+                <label i18n for="cacheCaptionsSize">Number of video captions to keep in cache</label>
                 <input
-              type="text" id="cacheCaptionsSize"
+                  type="number" min="0" id="cacheCaptionsSize"
                   formControlName="size" [ngClass]="{ 'input-error': formErrors['cache.captions.size'] }"
                 >
                 <div *ngIf="formErrors.cache.captions.size" class="form-error">{{ formErrors.cache.captions.size }}</div>
               </div>
             </ng-container>
 
+          </div>
+        </div>
+
+        <div class="form-row mt-4"> <!-- cache grid -->
+          <div class="form-group col-12 col-lg-4 col-xl-3">
             <div i18n class="inner-form-title">CUSTOMIZATIONS</div>
+          </div>
+
+          <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
 
             <ng-container formGroupName="instance">
               <ng-container formGroupName="customizations">
@@ -646,7 +737,6 @@
       color: red;
     {{ '}' }}
     </pre>
-
                         Prepend with <em>#custom-css</em> to override styles. Example:<br /><br />
     <pre>
     #custom-css .logged-in-email {{ '{' }}
@@ -666,10 +756,18 @@
               </ng-container>
             </ng-container>
 
+          </div>
+        </div>
+
       </ng-template>
     </ngb-tab>
   </ngb-tabset>
 
+  <div class="form-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)="formValidated()" type="submit" i18n-value value="Update configuration" [disabled]="!form.valid">
       <span class="form-error" i18n *ngIf="!form.valid">It seems like the configuration is invalid. Please search for potential errors in the different tabs.</span>
+    </div>
+  </div>
 </form>

client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss

@@ -1,12 +1,19 @@
 @import '_variables';
 @import '_mixins';
 
-.form-group {
+$form-base-input-width: 340px;
-  margin-bottom: 25px;
+
+label {
+  font-weight: $font-regular;
+  font-size: 100%;
+}
+
+form {
+  padding-bottom: 1.5rem;
 }
 
 input[type=text] {
-  @include peertube-input-text(340px);
+  @include peertube-input-text($form-base-input-width);
   display: block;
 }
 
@@ -20,14 +27,15 @@ input[type=checkbox] {
 }
 
 .peertube-select-container {
-  @include peertube-select-container(340px);
+  @include peertube-select-container($form-base-input-width);
 }
 
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
 
-  margin-top: 20px;
+  display: flex;
+  margin-left: auto;
 
   & + .form-error {
     display: inline;
@@ -36,12 +44,7 @@ input[type=submit] {
 }
 
 .inner-form-title {
-  text-transform: uppercase;
+  @include settings-big-title;
-  color: var(--mainColor);
-  font-weight: $font-bold;
-  font-size: 13px;
-  margin-top: 30px;
-  margin-bottom: 10px;
 }
 
 textarea {
@@ -63,3 +66,21 @@ textarea {
   opacity: .5;
   pointer-events: none;
 }
+
+my-markdown-textarea ::ng-deep {
+  .root {
+    @media screen and (max-width: 1400px) {
+      flex-direction: column !important;
+    }
+  }
+}
+
+.form-group-right {
+  padding-top: 2px;
+}
+
+ngb-tabset:not(.previews) ::ng-deep {
+  .nav-link {
+    font-size: 105%;
+  }
+}

client/src/app/+admin/plugins/shared/toggle-plugin-type.scss

@@ -13,9 +13,23 @@
         font-weight: 600;
       }
 
+      .ui-button.ui-state-default {
+        background-color: #f0f0f0;
+        border: 1px solid #f0f0f0;
+      }
+
       .ui-button.ui-state-active {
         background-color: var(--mainColor);
         border-color: var(--mainColor);
+
+        &:hover {
+          background-color: var(--mainHoverColor);
+          border-color: var(--mainHoverColor);
+        }
+      }
+
+      .ui-button:not(.ui-state-active).ui-state-focus {
+        box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
       }
     }
   }

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;

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;

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>

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;

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>

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;
+}

client/src/app/+my-account/my-account-settings/my-account-settings.component.html

@@ -1,34 +1,83 @@
+<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">
+    <div class="user-quota mb-3">
       <div>
-    <span i18n class="user-quota-label">Total video quota:</span>
+        <label i18n>Total video quota:</label>
         <ng-container i18n>{{ userVideoQuotaUsed | bytes: 0 }} used</ng-container> / {{ userVideoQuota }}
       </div>
 
       <div *ngIf="hasDailyQuota()">
-    <span i18n class="user-quota-label">Daily video quota:</span>
+        <label i18n>Daily video quota:</label>
         <ng-container>{{ userVideoQuotaUsedDaily | bytes: 0 }} used</ng-container> / {{ userVideoQuotaDaily }}
       </div>
     </div>
 
-<div i18n class="account-title">Profile</div>
     <my-account-profile [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-profile>
+  </div>
+</div>
 
-<div i18n class="account-title">Video settings</div>
+<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 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">Notifications</div>
+<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 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">Interface</div>
+<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 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>
+<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 i18n class="account-title">Email</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 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 i18n class="account-title">Danger zone</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 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>

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;
+  @include settings-big-title;
-
-  margin-top: 55px;
-  margin-bottom: 30px;
 }

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;

client/src/app/shared/forms/markdown-textarea.component.scss

@@ -22,6 +22,8 @@
       align-items: center;
       height: 30px !important;
       padding: 0 15px !important;
+      font-size: 85% !important;
+      opacity: .7;
     }
 
     .tab-content {

client/src/app/shared/menu/top-menu-dropdown.component.html

@@ -1,12 +1,12 @@
 <div class="sub-menu">
   <ng-container *ngFor="let menuEntry of menuEntries">
 
-    <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page">{{ menuEntry.label }}</a>
+    <a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
 
     <div *ngIf="!menuEntry.routerLink" ngbDropdown [container]="container" class="parent-entry" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
       <span
         (mouseenter)="openDropdownOnHover(dropdown)" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
-        (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page"
+        (click)="dropdownAnchorClicked(dropdown)" role="button" class="title-page title-page-settings"
       >
         <ng-container i18n>{{ menuEntry.label }}</ng-container>
         <ng-container *ngIf="!!suffixLabels[menuEntry.label]"> - {{ suffixLabels[menuEntry.label] }}</ng-container>

client/src/sass/application.scss

@@ -174,6 +174,16 @@ label {
   }
 }
 
+.title-page-about,
+.title-page-settings {
+  font-size: 115%;
+  font-weight: $font-regular;
+
+  &.active {
+    font-weight: $font-semibold;
+  }
+}
+
 .admin-sub-header {
   display: flex;
   align-items: center;

client/src/sass/bootstrap.scss

@@ -175,10 +175,10 @@ ngb-tabset {
 
 .nav-tabs .nav-link {
   &:not(.active) {
-    opacity: .6;
     border-bottom: 3px solid transparent;
   }
   &.active {
+    font-weight: $font-semibold;
     background-color: var(--mainBackgroundColor) !important;
     border: none;
     border-bottom: 2px solid var(--mainColor);

client/src/sass/include/_mixins.scss

@@ -463,6 +463,14 @@
   font-size: 13px;
 }
 
+@mixin settings-big-title {
+  text-transform: uppercase;
+  color: var(--mainColor);
+  font-weight: $font-bold;
+  font-size: 110%;
+  margin-bottom: 10px;
+}
+
 @mixin actor-owner {
   @include disable-default-a-behaviour;
 

config/default.yaml

@@ -249,7 +249,7 @@ auto_blacklist:
 
 instance:
   name: 'PeerTube'
-  short_description: 'PeerTube, a federated (ActivityPub) video streaming platform using P2P (BitTorrent) directly in the web browser with WebTorrent and Angular.'
+  short_description: 'PeerTube, an ActivityPub-federated video streaming platform using P2P directly in your web browser.'
   description: 'Welcome to this PeerTube instance!' # Support markdown
   terms: 'No terms for now.' # Support markdown
   code_of_conduct: '' # Supports markdown

server/tests/api/server/config.ts

@@ -27,8 +27,7 @@ const expect = chai.expect
 function checkInitialConfig (server: ServerInfo, data: CustomConfig) {
   expect(data.instance.name).to.equal('PeerTube')
   expect(data.instance.shortDescription).to.equal(
-    'PeerTube, a federated (ActivityPub) video streaming platform using P2P (BitTorrent) directly in the web browser ' +
+    'PeerTube, an ActivityPub-federated video streaming platform using P2P directly in your web browser.'
-    'with WebTorrent and Angular.'
   )
   expect(data.instance.description).to.equal('Welcome to this PeerTube instance!')
 

server/tests/client.ts

@@ -112,8 +112,7 @@ describe('Test a client controllers', function () {
   it('Should have valid index html tags (title, description...)', async function () {
     const res = await makeHTMLRequest(server.url, '/videos/trending')
 
-    const description = 'PeerTube, a federated (ActivityPub) video streaming platform using P2P (BitTorrent) directly in the web browser ' +
+    const description = 'PeerTube, an ActivityPub-federated video streaming platform using P2P directly in your web browser.'
-      'with WebTorrent and Angular.'
     checkIndexTags(res.text, 'PeerTube', description, '')
   })