From 1e23d8bcbc4524fc960657bdaaeabc1fc8d47fe1 Mon Sep 17 00:00:00 2001
From: julitork <julita.kriauciunaite@gmail.com>
Date: Fri, 18 Aug 2023 13:51:59 +0300
Subject: [PATCH 1/2] UGN-371 bugfix - fix validation step select
 margins/paddings.

---
 src/components/Selects/TableSelect.tsx |  1 +
 src/theme.ts                           | 38 +++-----------------------
 2 files changed, 5 insertions(+), 34 deletions(-)

diff --git a/src/components/Selects/TableSelect.tsx b/src/components/Selects/TableSelect.tsx
index f87d66b5..886a31d7 100644
--- a/src/components/Selects/TableSelect.tsx
+++ b/src/components/Selects/TableSelect.tsx
@@ -17,6 +17,7 @@ export const TableSelect = ({ onChange, value, options }: Props) => {
   return (
     <Select<SelectOption, false>
       autoFocus
+      useBasicStyles
       size="sm"
       value={value}
       onChange={onChange}
diff --git a/src/theme.ts b/src/theme.ts
index d0f06730..9fd1871c 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -288,49 +288,19 @@ export const themeOverrides = {
           fontSize: "3xl",
         },
         select: {
-          dropdownIndicator: (provided) => ({
-            ...provided,
-            background: "none",
-            border: "none",
-            p: 0,
-            w: "40px",
-          }),
-          control: (provided) => ({
-            ...provided,
-            background: "none",
-            border: "none",
-            p: 0,
-            _focus: undefined,
-          }),
-          input: (provided) => ({
-            ...provided,
-            background: "none",
-            border: "none",
-            p: 0,
-          }),
-          indicatorSeparator: (provided) => ({
-            ...provided,
-            opacity: 0,
-          }),
-          singleValue: (provided) => ({
-            ...provided,
-            marginInlineStart: 0,
-          }),
           valueContainer: (provided) => ({
             ...provided,
-            p: 0,
-            paddingInlineStart: 2,
+            py: 0,
+            px: 1.5,
             color: "gray.400",
           }),
+          inputContainer: (provided) => ({ ...provided, py: 0 }),
+          control: (provided) => ({ ...provided, border: "none" }),
           menu: (provided) => ({
             ...provided,
             p: 0,
             mt: 0,
           }),
-          menuList: (provided) => ({
-            ...provided,
-            minW: "initial",
-          }),
           option: (provided, state) => ({
             ...provided,
             color: state.isSelected ? "gray.900" : provided.color,

From 398fb81c5fe71caa0aa4fd6989720409c406850a Mon Sep 17 00:00:00 2001
From: julitork <julita.kriauciunaite@gmail.com>
Date: Mon, 21 Aug 2023 16:54:18 +0300
Subject: [PATCH 2/2] UGN-371 bugfix - remove deprecated chakra-react-select
 styles, fix input alignment issues, fix theme colors application.

---
 src/components/Selects/MatchColumnSelect.tsx |  1 +
 src/theme.ts                                 | 71 +++++++++-----------
 2 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/src/components/Selects/MatchColumnSelect.tsx b/src/components/Selects/MatchColumnSelect.tsx
index b08901a6..7b33edd7 100644
--- a/src/components/Selects/MatchColumnSelect.tsx
+++ b/src/components/Selects/MatchColumnSelect.tsx
@@ -17,6 +17,7 @@ export const MatchColumnSelect = ({ onChange, value, options, placeholder, name
     <Select<SelectOption, false>
       value={value || null}
       colorScheme="gray"
+      useBasicStyles
       onChange={onChange}
       placeholder={placeholder}
       options={options}
diff --git a/src/theme.ts b/src/theme.ts
index 9fd1871c..85dbf69f 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -217,44 +217,16 @@ export const themeOverrides = {
           },
         },
         select: {
-          dropdownIndicator: (provided) => ({
-            ...provided,
-            background: "none",
-            border: "none",
-            p: 0,
-            w: "40px",
-            color: "textColor",
-          }),
           control: (provided) => ({
             ...provided,
-            background: "none",
-            borderRadius: "6px",
-            p: 0,
-            // _focus, _hover, _invalid, _readonly pseudoselectors can be used here for alternate border colors
-            _focus: undefined,
-          }),
-          input: (provided) => ({
-            ...provided,
-            background: "none",
-            border: "none",
-            p: 0,
-          }),
-          indicatorSeparator: (provided) => ({
-            ...provided,
-            opacity: 0,
-          }),
-          singleValue: (provided) => ({
-            ...provided,
-            ml: 0,
-            mr: 0,
-          }),
-          placeholder: (provided) => ({
-            ...provided,
-            color: "inactiveColor",
-          }),
-          valueContainer: (provided) => ({
-            ...provided,
-            color: "textColor",
+            borderColor: "border",
+            _hover: {
+              borderColor: "border",
+            },
+            ["&[data-focus-visible]"]: {
+              borderColor: "border",
+              boxShadow: "none",
+            },
           }),
           menu: (provided) => ({
             ...provided,
@@ -264,12 +236,12 @@ export const themeOverrides = {
           menuList: (provided) => ({
             ...provided,
             bg: "background",
-            minW: "initial",
+            borderColor: "border",
           }),
           option: (provided, state) => ({
             ...provided,
             color: "textColor",
-            bg: state.isSelected || state.isFocused ? "highlight" : provided.bg,
+            bg: state.isSelected || state.isFocused ? "highlight" : "background",
             overflow: "hidden",
             textOverflow: "ellipsis",
             display: "block",
@@ -278,6 +250,14 @@ export const themeOverrides = {
               bg: "highlight",
             },
           }),
+          placeholder: (provided) => ({
+            ...provided,
+            color: "inactiveColor",
+          }),
+          noOptionsMessage: (provided) => ({
+            ...provided,
+            color: "inactiveColor",
+          }),
         } as ChakraStylesConfig<SelectOption>,
       },
     },
@@ -292,24 +272,33 @@ export const themeOverrides = {
             ...provided,
             py: 0,
             px: 1.5,
-            color: "gray.400",
           }),
           inputContainer: (provided) => ({ ...provided, py: 0 }),
           control: (provided) => ({ ...provided, border: "none" }),
+          input: (provided) => ({ ...provided, color: "textColor" }),
           menu: (provided) => ({
             ...provided,
             p: 0,
             mt: 0,
           }),
+          menuList: (provided) => ({
+            ...provided,
+            bg: "background",
+            borderColor: "border",
+          }),
           option: (provided, state) => ({
             ...provided,
-            color: state.isSelected ? "gray.900" : provided.color,
-            bg: state.isSelected || state.isFocused ? "secondaryBackground" : provided.bg,
+            color: "textColor",
+            bg: state.isSelected || state.isFocused ? "highlight" : "background",
             overflow: "hidden",
             textOverflow: "ellipsis",
             display: "block",
             whiteSpace: "nowrap",
           }),
+          noOptionsMessage: (provided) => ({
+            ...provided,
+            color: "inactiveColor",
+          }),
         } as ChakraStylesConfig<SelectOption>,
       },
     },