fix(add-button): close button in color modal

src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/index.tsx

@@ -3,6 +3,7 @@ import Tabs from '@mui/material/Tabs'
 import * as React from 'react'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
+import ClearIcon from '~/components/Icons/ClearIcon'
 import { colors } from '~/utils/colors'
 import { ColorPicker } from './ColorPicker'
 import { IconPicker } from './IconPicker'
@@ -36,7 +37,7 @@ function a11yProps(index: number) {
   }
 }
 
-export const ColorPickerPopoverView = () => {
+export const ColorPickerPopoverView = ({ onClose }: { onClose: () => void }) => {
   const [value, setValue] = React.useState(0)
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
@@ -50,6 +51,9 @@ export const ColorPickerPopoverView = () => {
 
   return (
     <Wrapper direction="column">
+      <CloseButton onClick={onClose}>
+        <ClearIcon />
+      </CloseButton>
       <StyledTabs aria-label="color picker" onChange={handleChange} value={value}>
         {tabs.map((tab, index) => (
           <StyledTab key={tab.label} color={colors.white} disableRipple label={tab.label} {...a11yProps(index)} />
@@ -127,3 +131,23 @@ const Wrapper = styled(Flex)`
     padding: 3px;
   }
 `
+
+const CloseButton = styled.div`
+  position: absolute;
+  top: 4px;
+  right: 3px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5em;
+  height: 1.5em;
+  background-color: ${colors.primaryText1};
+  border-radius: 50%;
+  z-index: 1001;
+
+  svg {
+    width: 1.5em;
+    height: 1.5em;
+  }
+`

src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/index.tsx

@@ -4,12 +4,13 @@ import { ColorPickerPopoverView } from './ColorPickerPopoverView'
 
 type Props = {
   isOpen: boolean
+  onClose: () => void
 }
 
-export const ColorPickerPopover = ({ isOpen }: Props) => (
+export const ColorPickerPopover = ({ isOpen, onClose }: Props) => (
   <ModalBackground isOpen={isOpen}>
     <ModalContent>
-      <ColorPickerPopoverView />
+      <ColorPickerPopoverView onClose={onClose} />
     </ModalContent>
   </ModalBackground>
 )

src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx

@@ -663,7 +663,7 @@ export const Editor = ({
             </Flex>
           </form>
         </FormProvider>
-        <ColorPickerPopover isOpen={isPopoverOpen} />
+        <ColorPickerPopover isOpen={isPopoverOpen} onClose={handleColorPickerPopover} />
       </Flex>
     </Flex>
   )