18 files changed, 63 insertions, 41 deletions

diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 93378a533..298871fce 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -23,7 +23,7 @@
       <th style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
       <th style="width: 100px;" i18n pSortableColumn="score">Score <p-sortIcon field="score"></p-sortIcon></th>
       <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th style="width: 100px;"></th>
+      <th style="width: 150px;"></th>
     </tr>
   </ng-template>
 
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
index 28d57f83c..c08154bcd 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
@@ -22,7 +22,7 @@
       <th style="width: 160px;" i18n *ngIf="isDisplayingRemoteVideos()">Strategy</th>
       <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th >
       <th style="width: 100px;" i18n *ngIf="isDisplayingRemoteVideos()">Total size</th>
-      <th style="width: 80px;"></th>
+      <th style="width: 150px;"></th>
     </tr>
   </ng-template>
 
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
index a4ab2a58c..b7d40be60 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html
@@ -21,7 +21,7 @@
     <tr>
       <th style="width: 100%;" i18n>Account</th>
       <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th style="width: 100px;"></th> <!-- column for action buttons --> 
+      <th style="width: 150px;"></th> <!-- column for action buttons -->
     </tr>
   </ng-template>
 
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
index dab068dd6..589a11b7b 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html
@@ -25,7 +25,7 @@
     <tr>
       <th style="width: 100%;" i18n>Instance</th>
       <th style="width: 150px;" i18n pSortableColumn="createdAt">Muted at <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th style="width: 100px;"></th> <!-- column for action buttons -->
+      <th style="width: 150px;"></th> <!-- column for action buttons -->
     </tr>
   </ng-template>
 
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
index 1c9530152..d30475794 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
@@ -41,7 +41,7 @@
       <th i18n>Video</th>
       <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th i18n pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th>
-      <th style="width: 120px;"></th>
+      <th style="width: 150px;"></th>
     </tr>
   </ng-template>
 
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
index c4c4e765a..cfa04514f 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
@@ -25,7 +25,7 @@
       <th style="width: 100px;" i18n>Sensitive</th>
       <th style="width: 120px;" i18n>Unfederated</th>
       <th style="width: 150px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th style="width: 120px;"></th>
+      <th style="width: 150px;"></th>
     </tr>
   </ng-template>
 
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 f39f66696..ce176d682 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
@@ -9,7 +9,7 @@
   <span class="email">{{ user.pendingEmail }}</span> is awaiting email verification
 </div>
 
-<form role="form" class="change-email" (ngSubmit)="changeEmail()" [formGroup]="form">
+<form role="form" class="change-email" (ngSubmit)="changeEmail()" [formGroup]="form" *ngIf="user.pluginAuth === null">
 
   <div class="form-group">
     <label i18n for="new-email">New email</label>
@@ -23,6 +23,7 @@
   </div>
 
   <div class="form-group">
+    <label i18n for="new-email">Your current password</label>
     <input
       type="password" id="password" i18n-placeholder placeholder="Your password" autocomplete="off"
       formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" class="form-control"
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 f1c466545..b4e4d29f0 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
@@ -58,7 +58,7 @@
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- password grid -->
+<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 i18n class="account-title">PASSWORD</div>
   </div>
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 91b390773..1e4ce2c56 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -10,7 +10,6 @@ my-search-typeahead {
   @include orange-button;
   @include button-with-icon(22px, 3px, -1px);
 
-  color: var(--mainBackgroundColor) !important;
   margin-right: 25px;
 
   @media screen and (max-width: 600px) {
diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
index 8e5739e45..16f319587 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/forms/markdown-textarea.component.scss
@@ -14,7 +14,8 @@ $input-border-radius: 3px;
     textarea {
       @include peertube-textarea(100%, 150px);
 
-      background-color: var(--textareaBackgroundColor);
+      background-color: var(--markdownTextareaBackgroundColor);
+
       font-family: monospace;
       font-size: 13px;
       border-bottom: none;
diff --git a/client/src/app/shared/misc/peertube-web-storage.ts b/client/src/app/shared/misc/peertube-web-storage.ts
index fff209678..6a152dd98 100644
--- a/client/src/app/shared/misc/peertube-web-storage.ts
+++ b/client/src/app/shared/misc/peertube-web-storage.ts
@@ -47,26 +47,32 @@ try {
   peertubeLocalStorage = localStorage
   peertubeSessionStorage = sessionStorage
 } catch (err) {
-  const instance = new MemoryStorage()
+  const instanceLocalStorage = new MemoryStorage()
+  const instanceSessionStorage = new MemoryStorage()
 
-  peertubeLocalStorage = sessionStorage = new Proxy(instance, {
-    set: function (obj, prop: string | number, value) {
-      if (MemoryStorage.prototype.hasOwnProperty(prop)) {
-        instance[prop] = value
-      } else {
-        instance.setItem(prop, value)
+  function proxify (instance: MemoryStorage) {
+    return new Proxy(instance, {
+      set: function (obj, prop: string | number, value) {
+        if (MemoryStorage.prototype.hasOwnProperty(prop)) {
+          instance[prop] = value
+        } else {
+          instance.setItem(prop, value)
+        }
+        return true
+      },
+      get: function (target, name: string | number) {
+        if (MemoryStorage.prototype.hasOwnProperty(name)) {
+          return instance[name]
+        }
+        if (valuesMap.has(name)) {
+          return instance.getItem(name)
+        }
       }
-      return true
-    },
-    get: function (target, name: string | number) {
-      if (MemoryStorage.prototype.hasOwnProperty(name)) {
-        return instance[name]
-      }
-      if (valuesMap.has(name)) {
-        return instance.getItem(name)
-      }
-    }
-  })
+    })
+  }
+
+  peertubeLocalStorage = proxify(instanceLocalStorage)
+  peertubeSessionStorage = proxify(instanceSessionStorage)
 }
 
 export {
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html
index a21042f09..affbd4793 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html
@@ -12,10 +12,10 @@
     <my-feed [syndicationItems]="syndicationItems"></my-feed>
 
     <div ngbDropdown class="d-inline-block ml-4">
-      <button class="btn btn-sm btn-outline-secondary" id="dropdownSortComments" ngbDropdownToggle i18n>
+      <button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n>
         SORT BY
       </button>
-      <div ngbDropdownMenu aria-labelledby="dropdownSortComments">
+      <div ngbDropdownMenu aria-labelledby="dropdown-sort-comments">
         <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
         <button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button>
       </div>
@@ -72,7 +72,7 @@
         >
           <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2">
             <span class="glyphicon glyphicon-menu-down"></span>
-  
+
             <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container>
             <ng-template #hasAuthorComments>
               <ng-container *ngIf="comment.totalReplies !== comment.totalRepliesFromVideoAuthor; else onlyAuthorComments" i18n>
@@ -83,7 +83,7 @@
               </ng-template>
             </ng-template>
             <ng-template i18n #noAuthorComments>View {{ comment.totalReplies }} replies</ng-template>
-  
+
             <my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader>
           </div>
         </my-video-comment>
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.scss b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
index 5ed1ac629..df42fae73 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
@@ -21,7 +21,7 @@
   .title-page {
     margin-right: 0;
   }
-  
+
   my-feed {
     display: inline-block;
     margin-left: 5px;
@@ -33,7 +33,7 @@
   }
 }
 
-#dropdownSortComments {
+#dropdown-sort-comments {
   font-weight: 600;
   text-transform: uppercase;
   border: none;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index d637c94d9..17ed5c8f8 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -35,10 +35,13 @@ body {
   --menuForegroundColor: #{$menu-color};
   --submenuColor: #{$sub-menu-color};
 
+  --inputForegroundColor: #{$input-foreground-color};
   --inputBackgroundColor: #{$input-background-color};
   --inputPlaceholderColor: #{$input-placeholder-color};
 
+  --textareaForegroundColor: #{$textarea-foreground-color};
   --textareaBackgroundColor: #{$textarea-background-color};
+  --markdownTextareaBackgroundColor: #{$markdown-textarea-background-color};
 
   --actionButtonColor: #{$grey-foreground-color};
   --supportButtonBackgroundColor: #{transparent};
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index cb266cc68..7985472ed 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -37,6 +37,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 }
 
 .dropdown-menu {
+  z-index: z(dropdown) + 1 !important;
+
   border-radius: 3px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
   font-size: 15px;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index f157ded5e..99ca25f9c 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -90,7 +90,8 @@
   display: inline-block;
   height: $button-height;
   width: $width;
-  background: var(--inputBackgroundColor);
+  color: var(--inputForegroundColor);
+  background-color: var(--inputBackgroundColor);
   border: 1px solid #C6C6C6;
   border-radius: 3px;
   padding-left: 15px;
@@ -121,6 +122,8 @@
 @mixin peertube-textarea ($width, $height) {
   @include peertube-input-text($width);
 
+  color: var(--textareaForegroundColor);
+  background-color: var(--textareaBackgroundColor);
   height: $height;
   padding: 5px 15px;
   font-size: 15px;
@@ -280,6 +283,7 @@
   margin: 0;
   width: $width;
   border-radius: 3px;
+  color: var(--inputForegroundColor);
   background: var(--inputBackgroundColor);
   position: relative;
   font-size: 15px;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 46f1e99f7..cdac8ae6f 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -63,10 +63,13 @@ $video-thumbnail-ratio: $video-thumbnail-width / $video-thumbnail-height;
 
 $theater-bottom-space: 115px;
 
+$input-foreground-color: $fg-color;
 $input-background-color: $bg-color;
 $input-placeholder-color: #898989;
 
-$textarea-background-color: $grey-background-hover-color;
+$textarea-foreground-color: $fg-color;
+$textarea-background-color: $bg-color;
+$markdown-textarea-background-color: $grey-background-hover-color;
 
 $sub-menu-margin-bottom: 30px;
 $sub-menu-margin-bottom-small-view: 10px;
@@ -92,10 +95,13 @@ $variables: (
   --menuForegroundColor: var(--menuForegroundColor),
   --submenuColor: var(--submenuColor),
 
+  --inputForegroundColor: var(--inputForegroundColor),
   --inputBackgroundColor: var(--inputBackgroundColor),
   --inputPlaceholderColor: var(--inputPlaceholderColor),
 
+  --textareaForegroundColor: var(--textareaForegroundColor),
   --textareaBackgroundColor: var(--textareaBackgroundColor),
+  --markdownTextareaBackgroundColor: var(--markdownTextareaBackgroundColor),
 
   --actionButtonColor: var(--actionButtonColor),
   --supportButtonColor: var(--supportButtonColor),
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index d48f2dfc4..33483533e 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -140,13 +140,13 @@ p-table {
         font-size: 11px !important;
         top: 0 !important;
 
-        &.pi-sort-up {
+        &.pi-sort-amount-up-alt {
           @extend .glyphicon-triangle-top;
 
           color: var(--mainForegroundColor) !important;
         }
 
-        &.pi-sort-down {
+        &.pi-sort-amount-down {
           @extend .glyphicon-triangle-bottom;
 
           color: var(--mainForegroundColor) !important;
@@ -302,12 +302,12 @@ p-table {
     @if $mobile-paginator {
       p-paginator .ui-paginator-bottom {
         display: block;
-  
+
         .ui-paginator-current {
           position: relative;
           display: block;
         }
-  
+
         a, .ui-paginator-pages {
           vertical-align: middle;
         }
@@ -345,7 +345,7 @@ p-multiselect {
     }
   }
 
-  .pi.pi-chevron-down{
+  .pi.pi-chevron-down {
     margin-left: 0 !important;
 
     &::after {