Fix error highlight of select boxes (airbytehq#18396)

jhammarstedt · Oct 31, 2022 · d468101 · d468101
1 parent 8fb0dbd
commit d468101
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/airbyte-webapp/src/components/ui/DropDown/CustomSelect.tsx b/airbyte-webapp/src/components/ui/DropDown/CustomSelect.tsx
@@ -13,16 +13,20 @@ export const CustomSelect = styled(Select)<
     box-shadow: none;
     border: 1px solid
       ${({ theme, $withBorder, $error }) =>
-        $error ? theme.dangerColor : $withBorder ? theme.greyColor30 : theme.greyColor0};
+        $error ? theme.red100 : $withBorder ? theme.greyColor30 : theme.greyColor0};
     background: ${({ theme }) => theme.greyColor0};
     border-radius: 4px;
     font-size: 14px;
     line-height: 20px;
     min-height: 36px;
     flex-wrap: nowrap;
 
+    &:not(:focus-within, :disabled):hover {
+      border-color: ${({ theme, $error }) => ($error ? theme.red : undefined)};
+    }
+
     &:hover {
-      border-color: ${({ theme, $error }) => ($error ? theme.dangerColor : theme.greyColor10)};
+      border-color: ${({ theme }) => theme.greyColor10};
     }
 
     &.react-select__control--menu-is-open,

diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/Property/Control.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/Property/Control.tsx
@@ -78,6 +78,7 @@ export const Control: React.FC<ControlProps> = ({
         onChange={(selectedItem) => selectedItem && helpers.setValue(selectedItem.value)}
         value={value}
         isDisabled={disabled}
+        error={error}
       />
     );
   } else if (property.multiline && !property.isSecret) {