[Blueprint] - Add color wheel and modal ( in progress )

src/components/Icons/ColorPickerIcon.tsx

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import React from 'react'
+
+const ColorPickerIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="1em" height="1em" viewBox="0 0 8 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M5.5884 4.12155L3.88306 2.41429C3.8396 2.37079 3.80894 2.32471 3.79108 2.27605C3.77323 2.22738 3.7643 2.17524 3.7643 2.11963C3.7643 2.06401 3.77323 2.01206 3.79108 1.96379C3.80894 1.91553 3.8396 1.86964 3.88306 1.82614L5.5884 0.118886C5.63185 0.0753881 5.67788 0.0446995 5.72649 0.0268199C5.7751 0.00894031 5.82719 0 5.88275 0C5.9383 0 5.99019 0.00894031 6.0384 0.0268199C6.08662 0.0446995 6.13245 0.0753881 6.1759 0.118886L7.88125 1.82614C7.9247 1.86964 7.95536 1.91573 7.97321 1.96439C7.99107 2.01306 8 2.0652 8 2.12081C8 2.17643 7.99107 2.22838 7.97321 2.27664C7.95536 2.32491 7.9247 2.37079 7.88125 2.41429L6.1759 4.12155C6.13245 4.16505 6.08642 4.19574 6.03781 4.21362C5.9892 4.23149 5.93711 4.24043 5.88155 4.24043C5.826 4.24043 5.77412 4.23149 5.7259 4.21362C5.67768 4.19574 5.63185 4.16505 5.5884 4.12155ZM0 3.21787V0.804477C0 0.68544 0.0402151 0.585661 0.120645 0.505141C0.201076 0.424621 0.300743 0.384361 0.419648 0.384361H2.83035C2.94925 0.384361 3.04891 0.424621 3.12934 0.505141C3.20977 0.585661 3.24999 0.68544 3.24999 0.804477V3.21787C3.24999 3.3369 3.20977 3.43668 3.12934 3.5172C3.04891 3.59772 2.94925 3.63798 2.83035 3.63798H0.419648C0.300743 3.63798 0.201076 3.59772 0.120645 3.5172C0.0402151 3.43668 0 3.3369 0 3.21787ZM4.35715 7.57988V5.16649C4.35715 5.04746 4.39737 4.94768 4.4778 4.86716C4.55823 4.78664 4.65789 4.74638 4.77679 4.74638H7.18749C7.3064 4.74638 7.40607 4.78664 7.4865 4.86716C7.56693 4.94768 7.60714 5.04746 7.60714 5.16649V7.57988C7.60714 7.69892 7.56693 7.7987 7.4865 7.87922C7.40607 7.95974 7.3064 8 7.18749 8H4.77679C4.65789 8 4.55823 7.95974 4.4778 7.87922C4.39737 7.7987 4.35715 7.69892 4.35715 7.57988ZM0 7.57988V5.16649C0 5.04746 0.0402151 4.94768 0.120645 4.86716C0.201076 4.78664 0.300743 4.74638 0.419648 4.74638H2.83035C2.94925 4.74638 3.04891 4.78664 3.12934 4.86716C3.20977 4.94768 3.24999 5.04746 3.24999 5.16649V7.57988C3.24999 7.69892 3.20977 7.7987 3.12934 7.87922C3.04891 7.95974 2.94925 8 2.83035 8H0.419648C0.300743 8 0.201076 7.95974 0.120645 7.87922C0.0402151 7.7987 0 7.69892 0 7.57988Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default ColorPickerIcon

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

@@ -19,6 +19,8 @@ import { colors } from '~/utils'
 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: '',
@@ -209,6 +211,10 @@ export const Editor = ({
     sourceLink: false,
   })
 
+  const [isPopoverOpen, setPopoverOpen] = useState(!!selectedSchema)
+
+  const handleColorPickerPopover = () => setPopoverOpen(!isPopoverOpen)
+
   useEffect(
     () => () => {
       reset()
@@ -244,6 +250,8 @@ export const Editor = ({
     resetForm()
 
     if (selectedSchema) {
+      setPopoverOpen(true)
+
       setValue('type', selectedSchema.type as string)
       setValue('parent', selectedSchema.parent)
 
@@ -473,7 +481,6 @@ export const Editor = ({
                     <Flex mb={12}>
                       <Text>Select Parent</Text>
                     </Flex>
-
                     <AutoComplete
                       isLoading={parentsLoading}
                       onSelect={(e) => {
@@ -483,23 +490,32 @@ export const Editor = ({
                       options={parentOptions}
                       selectedValue={resolvedParentValue()}
                     />
+
                     {displayParentError && <StyledError>A parent type must be selected</StyledError>}
                   </Flex>
+
                   <Flex>
                     <Flex mb={12}>
                       <Text>Type name</Text>
                     </Flex>
                     <Flex mb={12}>
-                      <TextInput
-                        id="cy-item-name"
-                        maxLength={250}
-                        name="type"
-                        placeholder="Enter type name"
-                        rules={{
-                          ...requiredRule,
-                        }}
-                        value={parent}
-                      />
+                      <InputIconWrapper>
+                        <InputWrapper>
+                          <TextInput
+                            id="cy-item-name"
+                            maxLength={250}
+                            name="type"
+                            placeholder="Enter type name"
+                            rules={{
+                              ...requiredRule,
+                            }}
+                            value={parent}
+                          />
+                        </InputWrapper>
+                        <ColorPickerIconWrapper onClick={handleColorPickerPopover}>
+                          <ColorPickerIcon />
+                        </ColorPickerIconWrapper>
+                      </InputIconWrapper>
                     </Flex>
                   </Flex>
                 </>
@@ -510,18 +526,25 @@ export const Editor = ({
                       <Text>Name</Text>
                     </Flex>
                     <Flex mb={12}>
-                      <TextInput
-                        dataTestId="cy-item-name"
-                        defaultValue={selectedSchema?.type}
-                        id="cy-item-name"
-                        maxLength={250}
-                        name="type"
-                        placeholder="Enter type name"
-                        rules={{
-                          ...requiredRule,
-                        }}
-                        value={parent}
-                      />
+                      <InputIconWrapper>
+                        <InputWrapper>
+                          <TextInput
+                            dataTestId="cy-item-name"
+                            defaultValue={selectedSchema?.type}
+                            id="cy-item-name"
+                            maxLength={250}
+                            name="type"
+                            placeholder="Enter type name"
+                            rules={{
+                              ...requiredRule,
+                            }}
+                            value={parent}
+                          />
+                        </InputWrapper>
+                        <ColorPickerIconWrapper onClick={handleColorPickerPopover}>
+                          <ColorPickerIcon />
+                        </ColorPickerIconWrapper>
+                      </InputIconWrapper>
                     </Flex>
                   </Flex>
                   <Flex mb={12}>
@@ -601,6 +624,7 @@ export const Editor = ({
             </Flex>
           </form>
         </FormProvider>
+        <ColorPickerPopover isOpen={isPopoverOpen} />
       </Flex>
     </Flex>
   )
@@ -685,3 +709,25 @@ const HeaderText = styled(Text)`
   text-align: left;
   color: ${colors.white};
 `
+
+const ColorPickerIconWrapper = styled.span`
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  margin-left: 12px;
+  color: ${colors.colorPickerThing};
+  background: ${colors.THING};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const InputIconWrapper = styled(Flex)`
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+`
+
+const InputWrapper = styled(Flex)`
+  width: 320px;
+`

src/utils/colors/index.tsx

@@ -5,6 +5,7 @@ export const colors = {
   bluePressState: 'rgb(57, 97, 220)',
   addAttributeBtn: 'rgba(107, 122, 141, 0.25)',
   blueTextAccent: 'rgb(130, 180, 255)',
+  colorPickerThing: 'rgba(255, 158, 239, 1)',
   body: 'rgb(21, 30, 39)',
   boostBg1: 'rgb(32, 63, 62)',
   budgetExplanationModalBg: 'rgb(21, 28, 35)',