Get rid of useSelectStyles hook

components/builds/BuildFilters.tsx

@@ -23,8 +23,7 @@ import { FiTrash } from "react-icons/fi";
 import { abilities, isMainAbility } from "utils/lists/abilities";
 import { components } from "react-select";
 import ModeImage from "components/common/ModeImage";
-import MySelect from "components/common/MySelect";
-import useSelectStyles from "hooks/useSelectStyles";
+import MySelect, { selectDefaultStyles } from "components/common/MySelect";
 
 interface Props {
   filters: UseBuildsByWeaponState["filters"];
@@ -112,7 +111,6 @@ const BuildFilters: React.FC<Props> = ({ filters, dispatch }) => {
     modeOptions[0]
   );
 
-  const selectDefaultStyles = useSelectStyles();
   const selectStyles = {
     ...selectDefaultStyles,
     singleValue: (base: any) => ({

components/common/MultipleModeSelector.tsx

@@ -11,7 +11,7 @@ import ReactSelect, {
 import { SelectComponents } from "react-select/src/components";
 import { Box, Flex } from "@chakra-ui/react";
 import ModeImage from "./ModeImage";
-import useSelectStyles from "hooks/useSelectStyles";
+import { selectDefaultStyles } from "./MySelect";
 
 interface SelectProps {
   options?:
@@ -71,7 +71,6 @@ const MultipleModeSelector: React.FC<SelectProps> = ({
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [selectedModes, setSelectedModes] = useState(defaultValue);
-  const selectDefaultStyles = useSelectStyles();
 
   const handleChange = (selectedOption: any) => {
     if (!selectedOption) {

components/common/MySelect.tsx

@@ -9,7 +9,6 @@ import ReactSelect, {
   ValueType,
 } from "react-select";
 import { SelectComponents } from "react-select/src/components";
-import useSelectStyles from "hooks/useSelectStyles";
 
 interface SelectProps {
   options?:
@@ -48,6 +47,39 @@ const DropdownIndicator = (props: any) => {
   );
 };
 
+export const selectDefaultStyles = {
+  singleValue: (base: any) => ({
+    ...base,
+    padding: 5,
+    borderRadius: 5,
+    color: CSSVariables.textColor,
+    display: "flex",
+  }),
+  input: (base: any) => ({
+    ...base,
+    color: CSSVariables.textColor,
+  }),
+  multiValue: (base: any) => ({
+    ...base,
+    background: CSSVariables.themeColor,
+    color: "black",
+  }),
+  option: (styles: any, { isFocused }: any) => {
+    return {
+      ...styles,
+      backgroundColor: isFocused ? CSSVariables.themeColorOpaque : undefined,
+      color: CSSVariables.textColor,
+    };
+  },
+  menu: (styles: any) => ({ ...styles, zIndex: 999 }),
+  control: (base: any) => ({
+    ...base,
+    borderColor: CSSVariables.borderColor,
+    minHeight: "2.5rem",
+    background: "hsla(0, 0%, 0%, 0)",
+  }),
+};
+
 const MySelect: React.FC<SelectProps> = ({
   options,
   components,
@@ -66,7 +98,6 @@ const MySelect: React.FC<SelectProps> = ({
   styles,
 }) => {
   const [inputValue, setInputValue] = useState("");
-  const selectDefaultStyles = useSelectStyles();
 
   const handleChange = (selectedOption: any) => {
     if (!selectedOption) {

hooks/useSelectStyles.ts

@@ -1,38 +0,0 @@
-import { CSSVariables } from "utils/CSSVariables";
-
-const useSelectStyles = () => {
-  return {
-    singleValue: (base: any) => ({
-      ...base,
-      padding: 5,
-      borderRadius: 5,
-      color: CSSVariables.textColor,
-      display: "flex",
-    }),
-    input: (base: any) => ({
-      ...base,
-      color: CSSVariables.textColor,
-    }),
-    multiValue: (base: any) => ({
-      ...base,
-      background: CSSVariables.themeColor,
-      color: "black",
-    }),
-    option: (styles: any, { isFocused }: any) => {
-      return {
-        ...styles,
-        backgroundColor: isFocused ? CSSVariables.themeColorOpaque : undefined,
-        color: CSSVariables.textColor,
-      };
-    },
-    menu: (styles: any) => ({ ...styles, zIndex: 999 }),
-    control: (base: any) => ({
-      ...base,
-      borderColor: CSSVariables.borderColor,
-      minHeight: "2.5rem",
-      background: "hsla(0, 0%, 0%, 0)",
-    }),
-  };
-};
-
-export default useSelectStyles;