diff --git a/components/common/MySelect.tsx b/components/common/MySelect.tsx index df9749fa0..967f370eb 100644 --- a/components/common/MySelect.tsx +++ b/components/common/MySelect.tsx @@ -1,6 +1,8 @@ +import { ChevronDownIcon } from "@chakra-ui/icons"; import { useMyTheme } from "lib/useMyTheme"; import { useState } from "react"; import ReactSelect, { + components, GroupedOptionsType, OptionsType, OptionTypeBase, @@ -34,6 +36,15 @@ interface SelectProps { hideMenuBeforeTyping?: boolean; } +const DropdownIndicator = (props: any) => { + const { textColor } = useMyTheme(); + return ( + + + + ); +}; + const MySelect: React.FC = ({ options, components, @@ -103,6 +114,7 @@ const MySelect: React.FC = ({ } : { IndicatorSeparator: () => null, + DropdownIndicator, ...components, } } diff --git a/package-lock.json b/package-lock.json index c1ea3be49..32524d8a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -783,6 +783,15 @@ "@chakra-ui/utils": "1.0.2" } }, + "@chakra-ui/icons": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-1.0.2.tgz", + "integrity": "sha512-6gPoIi8KHZI8kiWQBlOuxcZOJv6xouYI4sLX23WP2QZdTsplF9qCyZMXhbg8MHTk0YYdb0i2m/t6Y+9OcDjohA==", + "requires": { + "@chakra-ui/icon": "1.0.2", + "@types/react": "17.0.0" + } + }, "@chakra-ui/image": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-1.0.2.tgz", @@ -2010,14 +2019,12 @@ "@types/prop-types": { "version": "15.7.3", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", - "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", - "dev": true + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" }, "@types/react": { "version": "17.0.0", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.0.tgz", "integrity": "sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==", - "dev": true, "requires": { "@types/prop-types": "*", "csstype": "^3.0.2" diff --git a/package.json b/package.json index ac3529f6a..4b0a2f37e 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "compile": "lingui compile" }, "dependencies": { + "@chakra-ui/icons": "^1.0.2", "@chakra-ui/react": "^1.0.4", "@chakra-ui/theme-tools": "^1.0.2", "@emotion/react": "^11.1.2",