chore: adjust SelectInput styling

src/components/input/SelectInput.tsx

@@ -95,7 +95,7 @@ const CustomControl = <
 
   return (
     <ReactSelectComponents.Control {...props}>
-      <div className='flex-1 px-4! py-1.5 gap-1 flex items-center'>
+      <div className='flex-1 p-3! py-1.5 gap-1 flex items-center'>
         {shouldShowAdornment && startAdornment}
         {children}
       </div>
@@ -118,7 +118,7 @@ const CustomMenuList = <
       {children}
 
       {options.length > 0 && isLoading && (
-        <div className='mt-1 px-3 py-2 rounded-md text-center text-gray-400'>
+        <div className='px-3 py-2 rounded-md text-center text-gray-400'>
           <span className='loading loading-spinner loading-md' />
         </div>
       )}
@@ -204,16 +204,11 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   };
 
   return (
-    <div
+    <div className={cn('w-full flex flex-col text-start', className?.wrapper)}>
-      className={cn(
-        'w-full flex flex-col gap-2 text-start',
-        className?.wrapper
-      )}
-    >
       {label && (
         <span
           className={cn(
-            'w-full text-sm font-normal leading-5',
+            'w-full py-2 text-xs font-semibold leading-5',
             { 'text-error': isError },
             className?.label
           )}
@@ -253,33 +248,36 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           ...(!startAdornment && {
             control: ({ isFocused, isDisabled }) =>
               cn(
-                'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
+                'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
                 {
                   'border-red-500! ring-2 ring-red-200': isError,
                   'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                  'border-gray-300': !isError && !isFocused,
+                  'border-base-content/10!': !isError && !isFocused,
                   'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
                 }
               ),
-            valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
+            valueContainer: () => cn('flex-1 p-3! py-2! gap-1'),
           }),
           placeholder: () =>
             cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
           singleValue: () =>
             cn({ 'text-gray-900': !isError, 'text-error!': isError }),
-          input: () => cn('text-gray-900'),
+          input: () => cn('text-gray-900 m-0! p-0!'),
           indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
           dropdownIndicator: ({ isFocused }) =>
-            cn('p-1 rounded hover:bg-gray-100', {
+            cn('p-1! rounded hover:bg-gray-100', {
               'text-gray-900': isFocused,
               'text-gray-500': !isFocused,
               'text-error!': isError,
             }),
+          clearIndicator: () => cn('p-1! rounded hover:bg-gray-100'),
           menu: () =>
-            cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
+            cn(
-          menuList: () => cn('p-2! max-h-60 overflow-auto'),
+              'border border-base-content/5 rounded-xl! bg-base-100 shadow-lg! my-1.5!'
+            ),
+          menuList: () => cn('p-0! max-h-60 overflow-auto'),
           option: ({ isFocused, isSelected }) =>
-            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
+            cn('px-3 py-2 rounded-md cursor-pointer!', {
               'bg-indigo-600 text-white': isFocused,
               'bg-blue-500!': isSelected,
               'text-gray-700': !isFocused && !isSelected,
@@ -287,13 +285,17 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           multiValue: ({ getValue, index }) => {
             const selectedValues = getValue() as T[];
             return cn(
-              'bg-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
+              'bg-base-200! rounded-lg! py-[3px] px-2.5 m-0! flex items-center gap-1! w-fit gap-2!',
               selectedValues[index]?.className
             );
           },
+          multiValueRemove: () => cn('p-0! w-3 h-3'),
           multiValueLabel: ({ getValue, index }) => {
             const selectedValues = getValue() as T[];
-            return cn('text-indigo-700', selectedValues[index]?.labelClassName);
+            return cn(
+              'p-0! text-base-content! text-xs!',
+              selectedValues[index]?.labelClassName
+            );
           },
         }}
         components={{