feat(preview): tag display and scroll fix

1 files changed, 45 insertions, 28 deletions

diff --git a/components/Tweaks/ColorMenu.tsx b/components/Tweaks/ColorMenu.tsx
index 3d90e36..b87f76b 100644
--- a/components/Tweaks/ColorMenu.tsx
+++ b/components/Tweaks/ColorMenu.tsx
@@ -9,6 +9,9 @@ import {
   MenuItem,
   MenuList,
   Portal,
+  PopoverTrigger,
+  PopoverContent,
+  Popover,
 } from '@chakra-ui/react'
 import React, { useCallback } from 'react'
 import { initialVisuals } from '../config'
@@ -19,10 +22,11 @@ export interface ColorMenuProps {
   value: string
   visValue: string
   setVisuals?: any
+  noEmpty?: boolean
 }
 
 export const ColorMenu = (props: ColorMenuProps) => {
-  const { label, colorList, value, visValue, setVisuals } = props
+  const { label, colorList, value, visValue, setVisuals, noEmpty } = props
 
   const clickCallback = useCallback(
     (color) =>
@@ -37,35 +41,48 @@ export const ColorMenu = (props: ColorMenuProps) => {
   return (
     <Flex alignItems="center" justifyContent="space-between">
       <Text>{label}</Text>
-      <Menu isLazy placement="right">
-        <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}>
-          {<Box bgColor={visValue} borderRadius="sm" height={6} width={6}></Box>}
-        </MenuButton>
+      <Popover isLazy placement="right">
+        <PopoverTrigger>
+          <Button colorScheme="" color="black" rightIcon={<ChevronDownIcon />}>
+            {<Box bgColor={visValue} borderRadius="sm" height={6} width={6}></Box>}
+          </Button>
+        </PopoverTrigger>
         <Portal>
-          {' '}
-          <MenuList minW={10} zIndex="popover" bgColor="gray.200">
-            <MenuItem
-              onClick={() => clickCallback('')}
-              justifyContent="space-between"
-              alignItems="center"
-              display="flex"
-            >
-              <Box height={6} width={6}></Box>
-            </MenuItem>
-            {colorList.map((color: string) => (
-              <MenuItem
-                key={color}
-                onClick={() => clickCallback(color)}
-                justifyContent="space-between"
-                alignItems="center"
-                display="flex"
-              >
-                <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box>
-              </MenuItem>
-            ))}
-          </MenuList>
+          <PopoverContent zIndex="tooltip" maxW={36} position="relative">
+            <Flex flexWrap="wrap" bgColor="gray.200">
+              {!noEmpty && (
+                <Box
+                  onClick={() => clickCallback('')}
+                  justifyContent="space-between"
+                  alignItems="center"
+                  display="flex"
+                  m={1}
+                >
+                  <Box
+                    height={6}
+                    width={6}
+                    borderColor="gray.600"
+                    borderRadius="xl"
+                    borderWidth={1}
+                  ></Box>
+                </Box>
+              )}
+              {colorList.map((color: string) => (
+                <Box
+                  m={1}
+                  key={color}
+                  onClick={() => clickCallback(color)}
+                  justifyContent="space-between"
+                  alignItems="center"
+                  display="flex"
+                >
+                  <Box bgColor={color} borderRadius="xl" height={6} width={6}></Box>
+                </Box>
+              ))}
+            </Flex>
+          </PopoverContent>
         </Portal>
-      </Menu>
+      </Popover>
     </Flex>
   )
 }