Update icons in AddCategoryComponent and styling

in TaskCategoryList

Author: codad5

src/components/ui/AddCategory.tsx

@@ -1,5 +1,5 @@
 import { IconButton, Button, FormControl, FormLabel, Input, ButtonGroup, Box, Popover, useDisclosure, PopoverTrigger, PopoverContent, FocusLock, PopoverArrow, PopoverCloseButton, Stack} from '@chakra-ui/react'
-import { CheckIcon } from '@chakra-ui/icons'
+import { AddIcon } from '@chakra-ui/icons'
 import { useRef } from 'react'
 import { useRecoilValue , useSetRecoilState} from 'recoil'
 import { taskObjectSelector, taskCategoriesListState } from '../../config/states'
@@ -64,7 +64,7 @@ export default function AddCategoryComponent() {
                             colorScheme='teal'
                             aria-label='Done'
                             size='sm'
-                            icon={<CheckIcon />}
+                            icon={<AddIcon />}
                         />
                     </PopoverTrigger>
                     <PopoverContent p={5}>

src/components/ui/TaskCategoryList.tsx

@@ -7,9 +7,9 @@ export default function TaskCategoryList() {
     const setActiveTaskCategory = useSetRecoilState<number>(activeTaskCategoryState)
     const taskCategoryList = useRecoilValue<taskCategory[]>(taskCategoriesListSelector)
     return (
-        <TabList w="100%" overflowX="auto">
+        <TabList w="100%" overflowX="auto" gap={2} px={2} py={1}  borderRadius="md" scrollBehavior="smooth" >
             {taskCategoryList.map((taskCategory, key) => (
-              <Tab key={key} onClick={() => setActiveTaskCategory(key)}>
+              <Tab key={key} onClick={() => setActiveTaskCategory(key)} px={2} minW="100px" textAlign="center" py={0}  >
                 {taskCategory?.name}
               </Tab>
             ))}