EPMRPP-87463 || Adjust styles for fields dark theme (#3676)

* EPMRPP-87463 || Adjust styles for fields dark theme * EPMRPP-87463 || Code review fixes - 1
reportportal · Nov 28, 2023 · fa6f149 · fa6f149
1 parent 88b30a4
commit fa6f149
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 8 deletions.
diff --git a/app/src/componentLibrary/autocompletes/common/autocompleteOption/autocompleteOption.scss b/app/src/componentLibrary/autocompletes/common/autocompleteOption/autocompleteOption.scss
@@ -143,6 +143,10 @@
     &.active {
       color: $COLOR--darkmode-topaz-text;
     }
+
+    &:hover {
+      color: $COLOR--bg-000;
+    }
   }
 
   &.divider {

diff --git a/app/src/componentLibrary/autocompletes/multipleAutocomplete/multipleAutocomplete.scss b/app/src/componentLibrary/autocompletes/multipleAutocomplete/multipleAutocomplete.scss
@@ -131,11 +131,17 @@
 
 .dark {
   &.autocomplete {
+    @include hover-state($COLOR--darkmode-gray-150);
+    @include focus-state($COLOR--darkmode-topaz-focused);
     background-color: $COLOR--darkmode-bg-solid-98;
     border-color: $COLOR--darkmode-gray-200;
   }
 
   .input {
     color: $COLOR--bg-000;
   }
+
+  &.error.touched {
+    @include error-state($COLOR--darkmode-error-default);
+  }
 }
diff --git a/app/src/componentLibrary/dropdown/dropdownOption/dropdownOption.scss b/app/src/componentLibrary/dropdown/dropdownOption/dropdownOption.scss
@@ -26,21 +26,25 @@
   cursor: pointer;
 }
 
-@mixin hover-state($backgroundColor, $color) {
+@mixin hover-state($backgroundColor, $borderColor, $color: $COLOR--almost-black) {
   &:hover:not(:active) {
     background: $backgroundColor;
   }
 
   &.hover:not(.disabled) {
     padding: 8px 11px 6px;
     background-color: $backgroundColor;
-    border: 1px solid $color;
+    border: 1px solid $borderColor;
   }
 
   &.hover:not(.disabled):hover {
     border: none;
     padding: 9px 12px 7px;
   }
+
+  &:hover:not(.selected) {
+    color: $color;
+  }
 }
 
 @mixin active-state($color) {
@@ -72,8 +76,8 @@
 
 .dark {
   &.dropdown-option {
-    @include dropdown-option($COLOR--bg-000);
-    @include hover-state($COLOR--darkmode-bg-solid-98, $COLOR--darkmode-topaz-focused);
+    @include dropdown-option($COLOR--darkmode-gray-100);
+    @include hover-state($COLOR--darkmode-bg-solid-98, $COLOR--darkmode-topaz-focused, $COLOR--bg-000);
     @include active-state($COLOR--darkmode-topaz-pressed);
 
     &.selected {

diff --git a/app/src/componentLibrary/fieldText/fieldText.scss b/app/src/componentLibrary/fieldText/fieldText.scss
@@ -250,11 +250,11 @@
 
   &.input-container {
     @include input-container($COLOR--darkmode-gray-200, $COLOR--darkmode-bg-solid-98);
-    @include hover-state($COLOR--darkmode-gray-100);
-    @include focus-state($COLOR--topaz-focused);
+    @include hover-state($COLOR--darkmode-gray-150);
+    @include focus-state($COLOR--darkmode-topaz-focused);
 
     &.error.touched {
-      @include error-state($COLOR--red-failed-2);
+      @include error-state($COLOR--darkmode-error-default);
     }
 
     &.disabled {
@@ -284,7 +284,6 @@
   &.input {
     @include input-base;
     @include input-text($COLOR--bg-000);
-    font-family: $FONT-REGULAR;
   }
 
   &.placeholder {