diff --git a/hyperglass/ui/components/ChakraSelect.js b/hyperglass/ui/components/ChakraSelect.js index b341b5b..93ff37f 100644 --- a/hyperglass/ui/components/ChakraSelect.js +++ b/hyperglass/ui/components/ChakraSelect.js @@ -1,4 +1,4 @@ -import React from "react"; +import * as React from "react"; import { Text, useColorMode, useTheme } from "@chakra-ui/core"; import Select from "react-select"; import { opposingColor } from "~/util"; @@ -61,11 +61,26 @@ const ChakraSelect = React.forwardRef( dark: theme.colors.whiteAlpha[700], light: theme.colors.gray[600] }; - const menuBg = { dark: theme.colors.black, light: theme.colors.white }; + const menuBg = { + dark: theme.colors.blackFaded[800], + light: theme.colors.whiteFaded[50] + }; const menuColor = { dark: theme.colors.white, light: theme.colors.blackAlpha[800] }; + const scrollbar = { + dark: theme.colors.whiteAlpha[300], + light: theme.colors.blackAlpha[300] + }; + const scrollbarHover = { + dark: theme.colors.whiteAlpha[400], + light: theme.colors.blackAlpha[400] + }; + const scrollbarBg = { + dark: theme.colors.whiteAlpha[50], + light: theme.colors.blackAlpha[50] + }; return (