refactor: Improve car color selection UI and interaction

- Refined color selection styling with more consistent hover and selection states
- Added dynamic styling for selected and custom color options
- Optimized layout and spacing of color selection buttons
- Improved ref handling for the component

src/components/order-form/form/car-color/car-color-select.tsx

@@ -1,11 +1,5 @@
 import React, { forwardRef, useState } from 'react';
-import {
+import { Input, Box, Stack, Text, Flex } from '@chakra-ui/react';
-  Input,
-  Box,
-  Stack,
-  Text,
-  Flex,
-} from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 
 import { CAR_COLORS } from './helper';
@@ -18,7 +12,7 @@ interface CarColorSelectProps {
 }
 
 export const CarColorSelect = forwardRef<HTMLInputElement, CarColorSelectProps>(
-  function CarColorSelect(props) {
+  function CarColorSelect(props, ref) {
     const [customColor, setCustomColor] = useState('');
     const [isCustom, setIsCustom] = useState(false);
 
@@ -33,7 +27,9 @@ export const CarColorSelect = forwardRef<HTMLInputElement, CarColorSelectProps>(
       } as React.ChangeEvent<HTMLInputElement>);
     };
 
-    const handleCustomColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleCustomColorChange = (
+      e: React.ChangeEvent<HTMLInputElement>,
+    ) => {
       const value = e.target.value;
       setCustomColor(value);
       props.onChange?.({
@@ -48,46 +44,56 @@ export const CarColorSelect = forwardRef<HTMLInputElement, CarColorSelectProps>(
     const currentValue = isCustom ? 'custom' : props.value;
 
     return (
-      <Stack spacing={4} width="100%">
+      <Stack spacing={4} width='100%' ref={ref}>
-        <Flex gap={3} wrap="nowrap" overflowX="auto" pb={2}>
+        <Flex gap={2} wrap='wrap' pb={2}>
           {CAR_COLORS.map(({ name, code }) => (
-            <Box 
+            <Box
               key={name}
               flexShrink={0}
-              as="button"
+              as='button'
-              type="button"
+              type='button'
               onClick={() => handleColorChange(name)}
             >
-              <Flex 
+              <Flex
-                align="center" 
+                align='center'
-                gap={2} 
+                gap={2}
-                p={2}
+                p={1}
-                borderRadius="full"
+                borderRadius='full'
-                borderWidth="2px"
+                borderWidth='2px'
-                borderColor={currentValue === name ? 'primary.500' : 'gray.200'}
+                borderColor='gray.200'
-                bg={currentValue === name ? 'primary.50' : 'white'}
+                bg='white'
-                _hover={{ 
+                _hover={{
                   borderColor: 'primary.500',
-                  bg: currentValue === name ? 'primary.50' : 'gray.50'
+                  bg: 'gray.50',
                 }}
-                minW={currentValue === name ? '120px' : 'auto'}
+                justify='center'
-                h="48px"
+                transition='all 0.2s'
-                justify="center"
+                {...(currentValue === name && {
-                transition="all 0.2s"
+                  borderColor: 'primary.500',
+                  bg: 'primary.50',
+                  paddingInlineEnd: 3,
+                  _hover: {
+                    bg: 'primary.50',
+                  },
+                })}
               >
-                <Flex align="center" gap={2}>
+                <Flex align='center' gap={2}>
                   <Box
-                    w="32px"
+                    w='32px'
-                    h="32px"
+                    h='32px'
-                    borderRadius="full"
+                    borderRadius='full'
                     bg={code}
-                    border="1px"
+                    border='1px'
-                    borderColor={currentValue === name ? 'primary.500' : 'gray.200'}
+                    borderColor='gray.200'
-                    transition="all 0.2s"
+                    transition='all 0.2s'
-                    boxShadow={currentValue === name ? 'sm' : 'none'}
+                    boxShadow='none'
+                    {...(currentValue === name && {
+                      borderColor: 'primary.500',
+                      boxShadow: 'sm',
+                    })}
                   />
                   {currentValue === name && (
-                    <Text fontSize="xs" color="primary.700" fontWeight="medium">
+                    <Text fontSize='xs' color='primary.700' fontWeight='medium'>
                       {t(`colors.${name}`)}
                     </Text>
                   )}
@@ -95,60 +101,67 @@ export const CarColorSelect = forwardRef<HTMLInputElement, CarColorSelectProps>(
               </Flex>
             </Box>
           ))}
-          <Box 
+          <Box
             flexShrink={0}
-            as="button"
+            as='button'
-            type="button"
+            type='button'
             onClick={() => handleColorChange('custom')}
           >
-            <Flex 
+            <Flex
-              align="center" 
+              align='center'
               gap={2}
-              p={2}
+              p={1}
-              borderRadius="full"
+              paddingInlineEnd={3}
-              borderWidth="2px"
+              borderRadius='full'
-              borderColor={isCustom ? 'primary.500' : 'gray.200'}
+              borderWidth='2px'
-              bg={isCustom ? 'primary.50' : 'white'}
+              borderColor='gray.200'
-              _hover={{ 
+              bg='white'
+              _hover={{
                 borderColor: 'primary.500',
-                bg: isCustom ? 'primary.50' : 'gray.50'
+                bg: 'gray.50',
               }}
-              minW={isCustom ? '200px' : 'auto'}
+              justify='center'
-              h="48px"
+              transition='all 0.2s'
-              justify="center"
+              {...(isCustom && {
-              transition="all 0.2s"
+                borderColor: 'primary.500',
+                paddingInlineStart: 3,
+                bg: 'primary.50',
+                _hover: {
+                  bg: 'primary.50',
+                },
+              })}
             >
               {isCustom ? (
-                <Flex gap={2} align="center">
+                <Flex gap={2} align='center'>
-                  <Text fontSize="xs" color="primary.700" fontWeight="medium">
+                  <Text fontSize='xs' color='primary.700' fontWeight='medium'>
                     {t('custom-label')}
                   </Text>
                   <Input
-                    size="sm"
+                    size='sm'
-                    width="120px"
+                    width='120px'
                     value={customColor}
                     onChange={handleCustomColorChange}
                     placeholder={t('placeholder')}
                     onClick={(e) => e.stopPropagation()}
-                    borderColor="primary.200"
+                    borderColor='primary.200'
                     _focus={{
                       borderColor: 'primary.500',
-                      boxShadow: '0 0 0 1px var(--chakra-colors-primary-500)'
+                      boxShadow: '0 0 0 1px var(--chakra-colors-primary-500)',
                     }}
                   />
                 </Flex>
               ) : (
-                <Flex align="center" gap={2}>
+                <Flex align='center' gap={2}>
                   <Box
-                    w="32px"
+                    w='32px'
-                    h="32px"
+                    h='32px'
-                    borderRadius="full"
+                    borderRadius='full'
-                    bg="gray.100"
+                    bg='gray.100'
-                    border="1px"
+                    border='1px'
-                    borderColor="gray.200"
+                    borderColor='gray.200'
-                    transition="all 0.2s"
+                    transition='all 0.2s'
                   />
-                  <Text fontSize="xs" color="gray.500">
+                  <Text fontSize='xs' color='gray.500'>
                     {t('custom')}
                   </Text>
                 </Flex>
@@ -159,4 +172,4 @@ export const CarColorSelect = forwardRef<HTMLInputElement, CarColorSelectProps>(
       </Stack>
     );
   },
-); 
+);