Fix select styling

app/web/src/components/Customizer/Customizer.tsx

@@ -1,3 +1,6 @@
+import { Listbox, Transition } from '@headlessui/react'
+import { CheckIcon, SelectorIcon } from '@heroicons/react/solid'
+
 import { useRender } from 'src/components/IdeWrapper/useRender'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { Switch } from '@headlessui/react'
@@ -139,7 +142,7 @@ function BooleanParam({
 }: {
   param: CadhubBooleanParam
   value: any
-  onChange: Function
+  onChange: (value: any) => void
 }) {
   return (
     <CustomizerParamBase name={param.name} caption={param.caption}>
@@ -169,7 +172,7 @@ function StringParam({
 }: {
   param: CadhubStringParam
   value: any
-  onChange: Function
+  onChange: (value: any) => void
 }) {
   return (
     <CustomizerParamBase name={param.name} caption={param.caption}>
@@ -191,21 +194,68 @@ function ChoiceParam({
 }: {
   param: CadhubStringChoiceParam | CadhubNumberChoiceParam
   value: any
-  onChange: Function
+  onChange: (value: any) => void
 }) {
   return (
     <CustomizerParamBase name={param.name} caption={param.caption}>
-      <select
-        className="bg-transparent h-8 border border-ch-gray-300 px-2 text-sm w-full"
-        value={value}
-        onChange={({ target }) => onChange(target?.value)}
-      >
-        {param.options.map((opt) => (
-          <option value={opt.value} key={opt.name}>
-            {opt.name}
-          </option>
-        ))}
-      </select>
+      <Listbox value={value} onChange={onChange}>
+        <div className="relative mt-1">
+          <Listbox.Button className="relative w-full h-8 text-left cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500 sm:text-sm border border-ch-gray-300 px-2 text-sm">
+            <span className="block truncate">{value}</span>
+            <span className="absolute inset-y-0 right-0 flex items-center pr-1 pointer-events-none">
+              <SelectorIcon
+                className="w-5 h-5 text-gray-300"
+                aria-hidden="true"
+              />
+            </span>
+          </Listbox.Button>
+          <Transition
+            as={React.Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Listbox.Options className="absolute w-full py-1 mt-1 bg-ch-gray-600 bg-opacity-80 overflow-auto text-base rounded-sm shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+              {param.options.map((option, optionIdx) => (
+                <Listbox.Option
+                  key={optionIdx}
+                  className={({ active }) =>
+                    `${
+                      active
+                        ? 'text-ch-blue-600 bg-ch-gray-700'
+                        : 'text-ch-gray-300'
+                    }
+                          cursor-default select-none relative py-2 pl-10 pr-4`
+                  }
+                  value={option.value}
+                >
+                  {({ selected, active }) => (
+                    <>
+                      <span
+                        className={`${
+                          selected ? 'font-medium' : 'font-normal'
+                        } block truncate`}
+                      >
+                        {option.name}
+                      </span>
+                      {selected ? (
+                        <span
+                          className={`${
+                            active ? 'text-ch-blue-600' : 'text-ch-gray-300'
+                          }
+                                absolute inset-y-0 left-0 flex items-center pl-3`}
+                        >
+                          <CheckIcon className="w-5 h-5" aria-hidden="true" />
+                        </span>
+                      ) : null}
+                    </>
+                  )}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </Transition>
+        </div>
+      </Listbox>
     </CustomizerParamBase>
   )
 }
@@ -217,7 +267,7 @@ function NumberParam({
 }: {
   param: CadhubNumberParam
   value: any
-  onChange: Function
+  onChange: (value: any) => void
 }) {
   const [isFocused, isFocusedSetter] = React.useState(false)
   const [localValue, localValueSetter] = React.useState(0)