fix: background colour for disabled select option (#9320)

* Fix disabled bg colour in CheckedTeamSelect

* Fix disabled bg colour in CheckedSelect, CheckedUserSelect, ChildrenEventTypeSelect

apps/web/components/ui/form/CheckedSelect.tsx

@@ -26,12 +26,6 @@ export const CheckedSelect = ({
   return (
     <>
       <Select
-        styles={{
-          option: (styles, { isDisabled }) => ({
-            ...styles,
-            backgroundColor: isDisabled ? "#F5F5F5" : "inherit",
-          }),
-        }}
         name={props.name}
         placeholder={props.placeholder || t("select")}
         isSearchable={false}

packages/features/eventtypes/components/CheckedTeamSelect.tsx

@@ -28,12 +28,6 @@ export const CheckedTeamSelect = ({
   return (
     <>
       <Select
-        styles={{
-          option: (styles, { isDisabled }) => ({
-            ...styles,
-            backgroundColor: isDisabled ? "#F5F5F5" : "inherit",
-          }),
-        }}
         name={props.name}
         placeholder={props.placeholder || t("select")}
         isSearchable={true}

packages/features/eventtypes/components/CheckedUserSelect.tsx

@@ -27,12 +27,6 @@ export const CheckedUserSelect = ({
   return (
     <>
       <Select
-        styles={{
-          option: (styles, { isDisabled }) => ({
-            ...styles,
-            backgroundColor: isDisabled ? "#F5F5F5" : "inherit",
-          }),
-        }}
         name={props.name}
         placeholder={props.placeholder || t("select")}
         isSearchable={false}

packages/features/eventtypes/components/ChildrenEventTypeSelect.tsx

@@ -40,12 +40,6 @@ export const ChildrenEventTypeSelect = ({
   return (
     <>
       <Select
-        styles={{
-          option: (styles, { isDisabled }) => ({
-            ...styles,
-            backgroundColor: isDisabled ? "#F5F5F5" : "inherit",
-          }),
-        }}
         name={props.name}
         placeholder={t("select")}
         options={options}

packages/ui/components/form/select/Select.tsx

@@ -44,6 +44,7 @@ export const Select = <
           cx(
             "bg-default flex cursor-pointer justify-between py-2.5 px-3 rounded-none text-default ",
             state.isFocused && "bg-subtle",
+            state.isDisabled && "bg-muted",
             state.isSelected && "bg-emphasis text-default",
             props.classNames?.option
           ),