fix BasicValueSpecificationEditor with error styling in light mode (#…

…3170)
finos · May 21, 2024 · 03bedff · 03bedff
1 parent 61d0311
commit 03bedff
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 1 deletion.
diff --git a/.changeset/giant-apricots-appear.md b/.changeset/giant-apricots-appear.md
@@ -0,0 +1,5 @@
+---
+'@finos/legend-query-builder': patch
+---
+
+Fix light mode selector input height
diff --git a/.changeset/ten-sheep-tan.md b/.changeset/ten-sheep-tan.md
@@ -0,0 +1,5 @@
+---
+'@finos/legend-application-query-bootstrap': patch
+---
+
+Fix BasicValueSpecificationEditor error styling in light mode
diff --git a/packages/legend-application-query-bootstrap/style/index.scss b/packages/legend-application-query-bootstrap/style/index.scss
@@ -69,6 +69,28 @@
     background: var(--color-yellow-0);
   }
 
+  .selector-input--has-error .selector-input {
+    &__control,
+    &__control:hover {
+      border-color: var(--color-red-180);
+    }
+
+    &__control--is-focused,
+    &__control--is-focused:hover {
+      border-color: var(--color-legacylight-light-blue-100);
+    }
+
+    &__indicators {
+      svg {
+        color: var(--color-red-180);
+      }
+    }
+
+    &__indicator-separator {
+      background: var(--color-red-180);
+    }
+  }
+
   // ---------------------------- Menu -------------------------------
 
   .menu {
@@ -356,6 +378,10 @@
     background: var(--color-white);
     border: 1px solid var(--color-light-grey-300);
     color: var(--color-legacylight-dark-grey-200);
+
+    &--error {
+      border-color: var(--color-red-180);
+    }
   }
 
   .lambda-parameter-values__value__label,
@@ -371,6 +397,10 @@
     color: var(--color-blue-50);
   }
 
+  .value-spec-editor__number__input--error {
+    border-color: var(--color-red-180);
+  }
+
   // ---------------------------- Derived Property Editor -------------------------------
 
   .query-builder-property-editor__section__content--empty {

diff --git a/packages/legend-query-builder/style/shared/_value-spec-editor.scss b/packages/legend-query-builder/style/shared/_value-spec-editor.scss
@@ -386,7 +386,7 @@
 
   .selector-input__indicators,
   .selector-input__value-container {
-    height: 2.8rem;
+    height: 2.6rem;
   }
 
   .selector-input__indicator-separator,