diff --git a/public/svg-icons/ColorPickerIcon.svg b/public/svg-icons/ColorPickerIcon.svg new file mode 100644 index 000000000..4ea0671d3 --- /dev/null +++ b/public/svg-icons/ColorPickerIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icons/ColorPickerIcon.tsx b/src/components/Icons/ColorPickerIcon.tsx new file mode 100644 index 000000000..fe5a7db34 --- /dev/null +++ b/src/components/Icons/ColorPickerIcon.tsx @@ -0,0 +1,13 @@ +/* eslint-disable */ +import React from 'react' + +const ColorPickerIcon: React.FC> = (props) => ( + + + +) + +export default ColorPickerIcon diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/ColorPicker/index.tsx new file mode 100644 index 000000000..a7dcafb90 --- /dev/null +++ b/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 = () => ( + + +

this is color 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%; +` diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/ColorPickerPopoverView/index.tsx new file mode 100644 index 000000000..f2abc7eca --- /dev/null +++ b/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 ? ( + + ) : 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 ( + + + {tabs.map((tab, index) => ( + + ))} + + + {tabs.map((tab, index) => ( + + + + ))} + + ) +} + +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; + } +` diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/ColorPickerPopover/index.tsx new file mode 100644 index 000000000..29adc7c6c --- /dev/null +++ b/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) => ( + + + + + +) + +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); +` diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx index 03df72858..2b07fdf64 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx +++ b/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 = ({ Select Parent - { @@ -483,23 +490,32 @@ export const Editor = ({ options={parentOptions} selectedValue={resolvedParentValue()} /> + {displayParentError && A parent type must be selected} + Type name - + + + + + + + + @@ -510,18 +526,25 @@ export const Editor = ({ Name - + + + + + + + + @@ -601,6 +624,7 @@ export const Editor = ({ + ) @@ -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; +` diff --git a/src/utils/colors/index.tsx b/src/utils/colors/index.tsx index 11eb9eb4c..2864808b5 100644 --- a/src/utils/colors/index.tsx +++ b/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)',