fix(color-picker-modal): color picker popover

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

@@ -0,0 +1,52 @@
+/* eslint-disable no-nested-ternary */
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+
+import { colors } from '~/utils/colors'
+
+export const ColorPicker = () => (
+  <Wrapper direction="column" justify="flex-end">
+    <TableWrapper align="center" justify="center">
+      <p>this is color wrapper</p>
+    </TableWrapper>
+  </Wrapper>
+)
+
+const Wrapper = styled(Flex)`
+  flex: 1;
+
+  .title {
+    font-size: 20px;
+    color: ${colors.white};
+    font-family: Barlow;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+  }
+
+  .subtitle {
+    color: ${colors.GRAY3};
+    font-family: Barlow;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  & .filters {
+    overflow-x: auto;
+  }
+
+  .load-more {
+    margin: 8px auto;
+    align-self: center;
+  }
+`
+
+const TableWrapper = styled(Flex)`
+  min-height: 0;
+  overflow: auto;
+  flex: 1;
+  width: 100%;
+`

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

@@ -0,0 +1,125 @@
+import Tab from '@mui/material/Tab'
+import Tabs from '@mui/material/Tabs'
+import * as React from 'react'
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { colors } from '~/utils/colors'
+import { ColorPicker } from './ColorPicker'
+
+interface TabPanelProps {
+  children?: React.ReactNode
+  index: number
+  value: number
+}
+
+const TabPanel = (props: TabPanelProps) => {
+  const { children, value, index, ...other } = props
+
+  return value === index ? (
+    <TabPanelWrapper
+      aria-labelledby={`simple-tab-${index}`}
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      role="tabpanel"
+      {...other}
+    >
+      {children}
+    </TabPanelWrapper>
+  ) : null
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  }
+}
+
+export const ColorPickerPopoverView = () => {
+  const [value, setValue] = React.useState(0)
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue)
+  }
+
+  const tabs = [{ label: 'Color', component: ColorPicker }]
+
+  return (
+    <Wrapper direction="column">
+      <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)} />
+        ))}
+      </StyledTabs>
+
+      {tabs.map((tab, index) => (
+        <TabPanel key={tab.label} index={index} value={value}>
+          <tab.component />
+        </TabPanel>
+      ))}
+    </Wrapper>
+  )
+}
+
+const StyledTabs = styled(Tabs)`
+  && {
+    background: ${colors.modalBg};
+    border-radius: 9px 9px 0 0;
+    .MuiTabs-indicator {
+      width: 40px;
+      background: ${colors.primaryBlue};
+    }
+  }
+`
+
+const StyledTab = styled(Tab)`
+  && {
+    padding: 20px 0 20px;
+    color: ${colors.GRAY6};
+    margin-left: 30px;
+    font-family: Barlow;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    &.Mui-selected {
+      color: ${colors.white};
+    }
+  }
+`
+
+const TabPanelWrapper = styled(Flex)`
+  display: flex;
+  flex: 1;
+  min-height: 572px;
+  padding: 20px 0;
+  max-height: 572px;
+  overflow: auto;
+
+  @media (max-width: 1024px) {
+    width: 100%;
+    min-height: 400px;
+    max-height: 400px;
+  }
+
+  @media (max-width: 768px) {
+    width: 100%;
+    min-height: 300px;
+    max-height: 300px;
+  }
+
+  @media (max-width: 480px) {
+    width: 100%;
+    min-height: 250px;
+    max-height: 250px;
+  }
+`
+
+const Wrapper = styled(Flex)`
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+
+  @media (max-width: 768px) {
+    padding: 3px;
+  }
+`

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

@@ -0,0 +1,36 @@
+import { ColorPickerPopoverView } from './ColorPickerPopoverView'
+import styled from 'styled-components'
+import { colors } from '~/utils'
+
+type Props = {
+  isOpen: boolean
+}
+
+export const ColorPickerPopover = ({ isOpen }: Props) => (
+  <ModalBackground isOpen={isOpen}>
+    <ModalContent>
+      <ColorPickerPopoverView />
+    </ModalContent>
+  </ModalBackground>
+)
+
+const ModalBackground = styled.div<{ isOpen: boolean }>`
+  display: ${(props) => (props.isOpen ? 'block' : 'none')};
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2000;
+`
+
+const ModalContent = styled.div`
+  position: fixed;
+  top: 38%;
+  left: 34%;
+  transform: translate(-50%, -50%);
+  background: ${colors.BG1};
+  width: 300px;
+  height: 443px;
+  z-index: 1001;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+`

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

@@ -20,6 +20,7 @@ import { CreateCustomNodeAttribute } from './CustomAttributesStep'
 import MediaOptions from './MediaOptions'
 import { convertAttributes, parsedObjProps, parseJson } from './utils'
 import ColorPickerIcon from '~/components/Icons/ColorPickerIcon'
+import { ColorPickerPopover } from './ColorPickerPopover'
 
 const defaultValues = {
   type: '',
@@ -210,6 +211,10 @@ export const Editor = ({
     sourceLink: false,
   })
 
+  const [isPopoverOpen, setPopoverOpen] = useState(!!selectedSchema)
+
+  const handleColorPickerPopover = () => setPopoverOpen(!isPopoverOpen)
+
   useEffect(
     () => () => {
       reset()
@@ -245,6 +250,8 @@ export const Editor = ({
     resetForm()
 
     if (selectedSchema) {
+      setPopoverOpen(true)
+
       setValue('type', selectedSchema.type as string)
       setValue('parent', selectedSchema.parent)
 
@@ -505,7 +512,7 @@ export const Editor = ({
                             value={parent}
                           />
                         </InputWrapper>
-                        <ColorPickerIconWrapper>
+                        <ColorPickerIconWrapper onClick={handleColorPickerPopover}>
                           <ColorPickerIcon />
                         </ColorPickerIconWrapper>
                       </InputIconWrapper>
@@ -534,7 +541,7 @@ export const Editor = ({
                             value={parent}
                           />
                         </InputWrapper>
-                        <ColorPickerIconWrapper>
+                        <ColorPickerIconWrapper onClick={handleColorPickerPopover}>
                           <ColorPickerIcon />
                         </ColorPickerIconWrapper>
                       </InputIconWrapper>
@@ -617,6 +624,7 @@ export const Editor = ({
             </Flex>
           </form>
         </FormProvider>
+        <ColorPickerPopover isOpen={isPopoverOpen} />
       </Flex>
     </Flex>
   )