Merge branch 'release/4.2.0' into develop

3 files changed, 22 insertions, 11 deletions

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 8545824e3..26f5a149a 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -92,7 +92,7 @@
   max-width: $width;
   color: pvar(--inputForegroundColor);
   background-color: pvar(--inputBackgroundColor);
-  border: 1px solid #C6C6C6;
+  border: 1px solid $input-border-color;
   border-radius: 3px;
   font-size: 15px;
 
@@ -138,7 +138,7 @@
   &.disabled {
     cursor: default;
     color: #fff;
-    background-color: #C6C6C6;
+    background-color: $input-border-color;
   }
 
   my-global-icon {
@@ -168,7 +168,7 @@
   &.disabled {
     cursor: default;
     color: pvar(--mainColor);
-    background-color: #C6C6C6;
+    background-color: $input-border-color;
   }
 
   my-global-icon {
@@ -385,10 +385,9 @@
   select {
     padding: 0 35px 0 12px;
     position: relative;
-    border: 1px solid #C6C6C6;
+    border: 1px solid $input-border-color;
     background: transparent none;
     appearance: none;
-    cursor: pointer;
     height: $button-height;
     text-overflow: ellipsis;
     color: pvar(--mainForegroundColor);
@@ -404,14 +403,17 @@
 
     option {
       color: #000;
+
+      &[value=undefined] {
+        font-weight: $font-semibold;
+      }
     }
   }
 
   &.peertube-select-button {
     @include grey-button;
 
-    select,
-    option {
+    select {
       font-weight: $font-semibold;
       color: pvar(--greyForegroundColor);
       border: 0;
@@ -446,7 +448,7 @@
     top: 0;
     width: 18px;
     height: 18px;
-    border: 1px solid #C6C6C6;
+    border: 1px solid $input-border-color;
     border-radius: 100%;
     background: #fff;
   }
@@ -493,7 +495,7 @@
     width: 18px;
     min-width: 18px;
     height: 18px;
-    border: $border-width solid #C6C6C6;
+    border: $border-width solid $input-border-color;
     border-radius: 3px;
     vertical-align: middle;
     cursor: pointer;
@@ -612,7 +614,7 @@
   margin-bottom: 20px;
 
   @if $separator {
-    border-bottom: 1px solid #C6C6C6;
+    border-bottom: 1px solid $input-border-color;
   }
 
   @media screen and (max-width: $small-view) {
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 41ae60290..884e7b5d0 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -85,6 +85,7 @@ $theater-bottom-space: 115px;
 $input-foreground-color: $fg-color;
 $input-background-color: $bg-color;
 $input-placeholder-color: #898989;
+$input-border-color: #C6C6C6;
 
 $textarea-foreground-color: $fg-color;
 $textarea-background-color: $bg-color;
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 97e61e068..b1b82b573 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -4,7 +4,7 @@
 $ng-select-highlight: #f2690d;
 // $ng-select-primary-text: #333 !default;
 // $ng-select-disabled-text: #f9f9f9 !default;
-// $ng-select-border: #ccc !default;
+$ng-select-border: $input-border-color;
 // $ng-select-border-radius: 4px !default;
 // $ng-select-bg: #ffffff !default;
 // $ng-select-selected: lighten($ng-select-highlight, 46) !default;
@@ -46,6 +46,14 @@ $ng-select-value-font-size: 15px;
     @include padding-right(12px);
   }
 
+  .ng-arrow {
+    border-color: #000 transparent transparent !important;
+  }
+
+  &.ng-select-opened .ng-arrow {
+    border-color: transparent transparent #000 !important;
+  }
+
   &.ng-select-single .ng-value-container .ng-value {
     color: pvar(--inputForegroundColor);