11 files changed, 42 insertions, 28 deletions

diff --git a/client/src/app/+signup/+register/steps/register-step-user.component.html b/client/src/app/+signup/+register/steps/register-step-user.component.html
index 3e0d35006..e978caea8 100644
--- a/client/src/app/+signup/+register/steps/register-step-user.component.html
+++ b/client/src/app/+signup/+register/steps/register-step-user.component.html
@@ -15,7 +15,7 @@
       <div class="input-group">
         <input
           type="text" id="displayName" i18n-placeholder placeholder="Example: John Doe"
-          formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+          formControlName="displayName" class="form-control" [ngClass]="{ 'input-error': formErrors['displayName'] }"
         >
       </div>
 
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
index 594999d66..ed46fefb0 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
@@ -17,7 +17,7 @@ $width-size: 250px;
   align-items: center;
 
   .upload-icon {
-    @include apply-svg-color($input-border-color);
+    @include apply-svg-color(pvar(--inputBorderColor));
 
     width: 90px;
     margin-bottom: 25px;
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
index 023d625e9..ac228bafa 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
@@ -56,8 +56,8 @@ form {
       width: $markdown-icon-width;
 
       svg {
-        color: $input-border-color;
-        fill: $input-border-color;
+        color: pvar(--inputBorderColor);
+        fill: pvar(--inputBorderColor);
         border-radius: 3px;
       }
     }
@@ -66,7 +66,7 @@ form {
     &:active,
     &:hover {
       my-global-icon svg {
-        background-color: $input-border-color;
+        background-color: pvar(--inputBorderColor);
         color: pvar(--mainBackgroundColor);
         fill: pvar(--mainBackgroundColor);
       }
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index c68c2c241..bbb266448 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -25,8 +25,8 @@ $input-border-radius: 3px;
   .nav-preview {
     padding: 10px;
 
-    border: 1px solid $input-border-color;
-    border-top: 1px dashed $input-border-color;
+    border: 1px solid pvar(--inputBorderColor);
+    border-top: 1px dashed pvar(--inputBorderColor);
 
     border-bottom-right-radius: $input-border-radius;
     border-bottom-left-radius: $input-border-radius;
@@ -72,7 +72,7 @@ $input-border-radius: 3px;
     overflow-y: auto;
     word-wrap: break-word;
 
-    border: 1px solid $input-border-color;
+    border: 1px solid pvar(--inputBorderColor);
     border-top: 0;
 
     border-bottom-left-radius: $input-border-radius;
@@ -115,7 +115,7 @@ $input-border-radius: 3px;
       grid-column: 1;
 
       border: 0;
-      border-right: 1px dashed $input-border-color;
+      border-right: 1px dashed pvar(--inputBorderColor);
 
       resize: none;
     }
@@ -155,7 +155,7 @@ $input-border-radius: 3px;
         grid-row: 2;
         grid-column: 1;
         border: 0;
-        border-bottom: 1px dashed $input-border-color;;
+        border-bottom: 1px dashed pvar(--inputBorderColor);;
       }
 
       ::ng-deep .tab-content {
diff --git a/client/src/assets/images/misc/language.svg b/client/src/assets/images/misc/language.svg
index 204136f0b..7ac185269 100644
--- a/client/src/assets/images/misc/language.svg
+++ b/client/src/assets/images/misc/language.svg
@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" transform="scale(1.2)" viewBox="0 0 200 200">
   <defs/>
-  <path stroke="currentColor" stroke-width="3" d="M93 155H42a18 18 0 01-18-18V29a5 5 0 015-5h89a5 5 0 015 6L98 151a5 5 0 01-5 4zM34 34v103a8 8 0 008 8h47l22-111z"/>
-  <path stroke="currentColor" stroke-width="3" d="M171 176H75a5 5 0 01-5-6l4-21a5 5 0 0110 2l-3 15h85V63a8 8 0 00-8-8h-45a5 5 0 010-10h45a18 18 0 0118 18v108a5 5 0 01-5 5zM50 92h0a5 5 0 01-5-5V63a17 17 0 0135 0v24a5 5 0 01-10 0V62a7 7 0 00-15 0v25a5 5 0 01-5 5z"/>
-  <path stroke="currentColor" stroke-width="3" d="M75 76H50a5 5 0 010-10h25a5 5 0 010 10zM120 155a5 5 0 01-3-9l21-21h-18a5 5 0 010-10h30a5 5 0 014 9l-30 30a5 5 0 01-4 1z"/>
-  <path stroke="currentColor" stroke-width="3" d="M150 155a5 5 0 01-4-1l-14-15a5 5 0 017-7l15 14a5 5 0 01-4 9zM143 110h-15a5 5 0 110-10h15a5 5 0 010 10z"/>
+  <path stroke="currentColor" fill="currentColor" stroke-width="3" d="M93 155H42a18 18 0 01-18-18V29a5 5 0 015-5h89a5 5 0 015 6L98 151a5 5 0 01-5 4zM34 34v103a8 8 0 008 8h47l22-111z"/>
+  <path stroke="currentColor" fill="currentColor" stroke-width="3" d="M171 176H75a5 5 0 01-5-6l4-21a5 5 0 0110 2l-3 15h85V63a8 8 0 00-8-8h-45a5 5 0 010-10h45a18 18 0 0118 18v108a5 5 0 01-5 5zM50 92h0a5 5 0 01-5-5V63a17 17 0 0135 0v24a5 5 0 01-10 0V62a7 7 0 00-15 0v25a5 5 0 01-5 5z"/>
+  <path stroke="currentColor" fill="currentColor" stroke-width="3" d="M75 76H50a5 5 0 010-10h25a5 5 0 010 10zM120 155a5 5 0 01-3-9l21-21h-18a5 5 0 010-10h30a5 5 0 014 9l-30 30a5 5 0 01-4 1z"/>
+  <path stroke="currentColor" fill="currentColor" stroke-width="3" d="M150 155a5 5 0 01-4-1l-14-15a5 5 0 017-7l15 14a5 5 0 01-4 9zM143 110h-15a5 5 0 110-10h15a5 5 0 010 10z"/>
 </svg>
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index add01fb71..224efbffd 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -43,6 +43,7 @@ body {
   --inputForegroundColor: #{$input-foreground-color};
   --inputBackgroundColor: #{$input-background-color};
   --inputPlaceholderColor: #{$input-placeholder-color};
+  --inputBorderColor: #{$input-border-color};
 
   --textareaForegroundColor: #{$textarea-foreground-color};
   --textareaBackgroundColor: #{$textarea-background-color};
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 688407683..eed6abe41 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -42,14 +42,12 @@
 // ---------------------------------------------------------------------------
 
 .dropdown-menu {
-  color: pvar(--mainForegroundColor);
-  background-color: pvar(--mainBackgroundColor);
-
   .dropdown-header {
     @include padding-left(1rem);
   }
 
   .dropdown-item {
+    color: pvar(--mainForegroundColor);
     padding: 3px 15px;
 
     &.active {
@@ -271,7 +269,7 @@
 }
 
 .btn-outline-secondary {
-  border-color: $input-border-color;
+  border-color: pvar(--inputBorderColor);
 
   &:focus-within,
   &:focus,
@@ -342,7 +340,6 @@
   }
 
   .form-control-clear {
-    color: rgba(0, 0, 0, 0.4);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -350,9 +347,10 @@
     font-size: 14px;
     position: absolute;
     right: .5rem;
+    opacity: 0.4;
 
     &:hover {
-      color: rgba(0, 0, 0, 0.7);
+      opacity: 0.7;
       cursor: pointer;
     }
   }
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index 3e461dbef..5c6a56283 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -46,8 +46,17 @@ $dropdown-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0,
 $dropdown-border-radius: 3px;
 $dropdown-link-active-color: pvar(--mainForegroundColor);
 $dropdown-link-active-bg: pvar(--mainBackgroundHoverColor);
+$dropdown-link-hover-color: pvar(--mainForegroundColor);
+$dropdown-link-hover-bg: pvar(--mainBackgroundHoverColor);
+$dropdown-color: pvar(--mainForegroundColor);
+$dropdown-bg: pvar(--mainBackgroundColor);
 
+$accordion-color: pvar(--mainForegroundColor);
+$accordion-bg: pvar(--mainBackgroundColor);
 $accordion-button-active-bg: pvar(--mainColorVeryLight);
 $accordion-button-active-color: pvar(--mainForegroundColor);
 $accordion-button-focus-border-color: pvar(--mainColorLightest);
 $accordion-button-focus-box-shadow: 0 0 0 .15rem pvar(--mainColorLightest);
+$accordion-border-color: pvar(--inputBorderColor);
+
+$input-group-addon-color: pvar(--mainForegroundColor);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 1b460b723..6b93a5728 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 $input-border-color;
+  border: 1px solid pvar(--inputBorderColor);
   border-radius: 3px;
   font-size: $form-input-font-size;
   line-height: $form-input-line-height;
@@ -138,7 +138,7 @@
   &.disabled {
     cursor: default;
     color: #fff;
-    background-color: $input-border-color;
+    background-color: pvar(--inputBorderColor);
   }
 
   my-global-icon {
@@ -168,7 +168,7 @@
   &.disabled {
     cursor: default;
     color: pvar(--mainColor);
-    background-color: $input-border-color;
+    background-color: pvar(--inputBorderColor);
   }
 
   my-global-icon {
@@ -393,7 +393,7 @@
   select {
     padding: 0 35px 0 12px;
     position: relative;
-    border: 1px solid $input-border-color;
+    border: 1px solid pvar(--inputBorderColor);
     background: transparent none;
     appearance: none;
     height: $button-height;
@@ -461,7 +461,7 @@
     top: 0;
     width: 18px;
     height: 18px;
-    border: 1px solid $input-border-color;
+    border: 1px solid pvar(--inputBorderColor);
     border-radius: 100%;
     background: #fff;
   }
@@ -508,7 +508,7 @@
     width: 18px;
     min-width: 18px;
     height: 18px;
-    border: $border-width solid $input-border-color;
+    border: $border-width solid pvar(--inputBorderColor);
     border-radius: 3px;
     vertical-align: middle;
     cursor: pointer;
@@ -601,7 +601,7 @@
   margin-bottom: 20px;
 
   @if $separator {
-    border-bottom: 1px solid $input-border-color;
+    border-bottom: 1px solid pvar(--inputBorderColor);
   }
 
   @media screen and (max-width: $small-view) {
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 2b893a62b..225cad9c2 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -48,7 +48,6 @@ $search-input-width: 375px;
 
 $menu-background: #000;
 $menu-color: #fff;
-$menu-bottom-color: #C6C6C6;
 $menu-width: 240px;
 $menu-lateral-padding: 26px;
 
@@ -135,6 +134,7 @@ $variables: (
   --inputForegroundColor: var(--inputForegroundColor),
   --inputBackgroundColor: var(--inputBackgroundColor),
   --inputPlaceholderColor: var(--inputPlaceholderColor),
+  --inputBorderColor: var(--inputBorderColor),
 
   --textareaForegroundColor: var(--textareaForegroundColor),
   --textareaBackgroundColor: var(--textareaBackgroundColor),
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 37e7a4275..a82cdbbb9 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -623,6 +623,12 @@ p-table {
         }
       }
 
+      .p-dropdown,
+      .p-dropdown-trigger {
+        color: pvar(--mainForegroundColor);
+        background-color: pvar(--mainBackgroundColor);
+      }
+
       .p-paginator-current {
         position: absolute;
         right: 0;