improved styles for select

components/common/MySelect.tsx

@@ -1,4 +1,3 @@
-import { useColorMode } from "@chakra-ui/react";
 import { useMyTheme } from "lib/useMyTheme";
 import { useState } from "react";
 import ReactSelect, {
@@ -47,8 +46,13 @@ const MySelect: React.FC<SelectProps> = ({
   menuIsOpen,
   hideMenuBeforeTyping,
 }) => {
-  const { borderColor, themeColorHex, bgColor } = useMyTheme();
-  const { colorMode } = useColorMode();
+  const {
+    borderColor,
+    themeColorHex,
+    bgColor,
+    themeColorOpaque,
+    textColor,
+  } = useMyTheme();
   const [inputValue, setInputValue] = useState("");
 
   const handleChange = (selectedOption: any) => {
@@ -64,12 +68,6 @@ const MySelect: React.FC<SelectProps> = ({
     }
   };
 
-  const getOptionColor = (focused: boolean) => {
-    if (focused) return "black";
-
-    return colorMode === "light" ? "black" : "white";
-  };
-
   const menuIsOpenCheck = () => {
     if (menuIsOpen) return true;
     if (hideMenuBeforeTyping) {
@@ -124,12 +122,12 @@ const MySelect: React.FC<SelectProps> = ({
           ...base,
           padding: 5,
           borderRadius: 5,
-          color: colorMode === "light" ? "black" : "white",
+          color: textColor,
           display: "flex",
         }),
         input: (base) => ({
           ...base,
-          color: colorMode === "light" ? "black" : "white",
+          color: textColor,
         }),
         multiValue: (base) => ({
           ...base,
@@ -139,15 +137,15 @@ const MySelect: React.FC<SelectProps> = ({
         option: (styles, { isFocused }) => {
           return {
             ...styles,
-            backgroundColor: isFocused ? themeColorHex : undefined,
-            color: getOptionColor(isFocused),
+            backgroundColor: isFocused ? themeColorOpaque : undefined,
+            color: textColor,
           };
         },
         menu: (styles) => ({ ...styles, zIndex: 999 }),
         control: (base) => ({
           ...base,
           borderColor,
-          height: "2.5rem",
+          minHeight: "2.5rem",
           background: "hsla(0, 0%, 0%, 0)",
         }),
       }}

theme.ts

@@ -2,6 +2,7 @@ export const theme = {
   light: {
     themeColorShade: "theme.600",
     themeColorHex: "#79ff61", // light lime green
+    themeColorOpaque: "hsla(111, 100%, 69%, 0.1)",
     bgColor: "#eff0f3",
     secondaryBgColor: "#FFFAFA",
     textColor: "blackAlpha.900",
@@ -11,6 +12,7 @@ export const theme = {
   dark: {
     themeColorShade: "theme.200",
     themeColorHex: "#79ff61", // light lime green
+    themeColorOpaque: "hsla(111, 100%, 69%, 0.1)",
     bgColor: "#031e3e",
     secondaryBgColor: "#0e2a56",
     textColor: "whiteAlpha.900",