Fix style issues and performance issues for Color Picker and Search Bar (#123)

* feat: ability to customize icons before downloading PNG or SVG

* feat: change color input to be a graphical color picker

* feat: tweak appearance of new inputs

* fix: switch to correct Chakra-UI@Next slider syntax

* fix: make default color `currentColor` and also add Reset button

* fix: move background color from search bar InputGroup to Input

* fix: add margins and border radius to color picker components

* fix: Downgrade color picker to version (see: https://github.com/casesandberg/react-color/issues/731)

site/package.json

@@ -20,7 +20,7 @@
     "lucide-react": "^0.1.2-beta.3",
     "next": "^9.5.4",
     "react": "^16.13.1",
-    "react-color": "^2.18.1",
+    "react-color": "2.17.3",
     "react-dom": "^16.13.1",
     "react-spring": "^8.0.27",
     "react-svg-loader": "^3.0.3"

site/src/components/ColorPicker.tsx

@@ -12,13 +12,13 @@ type ColorPickerProps = {
   onChange: (s: string, e: SyntheticEvent) => void;
 };
 
-function ColorPicker({ hsv, hsl, onChange, hex, value: color }: ColorPickerProps) {
+function ColorPicker({ hsv, hsl, onChange, value: color }: ColorPickerProps) {
   const [value, setValue] = useState(color);
   const input = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (color !== value && input.current !== document.activeElement) {
-      setValue(color === "currentColor" ? color : String(color).toUpperCase());
+      setValue(color === 'currentColor' ? color : String(color).toUpperCase());
     }
   }, [color]);
 
@@ -49,11 +49,25 @@ function ColorPicker({ hsv, hsl, onChange, hex, value: color }: ColorPickerProps
           paddingBottom: '75%',
           position: 'relative',
           overflow: 'hidden',
+          marginTop: '0.5rem',
+          borderRadius: '0.375rem',
+          border: '1px solid',
+          borderColor: 'inherit',
         }}
       >
         <Saturation hsl={hsl} hsv={hsv} onChange={onChange} />
       </div>
-      <div style={{ minHeight: '1em', position: 'relative', margin: 2 }}>
+      <div
+        style={{
+          minHeight: '2em',
+          position: 'relative',
+          margin: '0.5rem 0 0 0',
+          borderRadius: '0.375rem',
+          border: '1px solid',
+          borderColor: 'inherit',
+          overflow: 'hidden',
+        }}
+      >
         <Hue hsl={hsl} onChange={onChange} direction={'horizontal'} />
       </div>
     </div>

site/src/components/IconOverview.tsx

@@ -1,10 +1,18 @@
-import { Box, Input, InputGroup, InputLeftElement, Text, useColorMode, Icon } from "@chakra-ui/core";
+import {
-import IconList from "./IconList";
+  Box,
-import { useEffect, useRef, useState } from "react";
+  Input,
-import useSearch from "../lib/search";
+  InputGroup,
+  InputLeftElement,
+  Text,
+  useColorMode,
+  Icon,
+} from '@chakra-ui/core';
+import IconList from './IconList';
+import { useEffect, useRef, useState } from 'react';
+import useSearch from '../lib/search';
 import { useRouter } from 'next/router';
 import { useDebounce } from '../lib/useDebounce';
-import theme from "../lib/theme";
+import theme from '../lib/theme';
 import { Search as SearchIcon } from 'lucide-react';
 
 const IconOverview = ({ data }) => {
@@ -18,7 +26,7 @@ const IconOverview = ({data}) => {
   const inputElement = useRef(null);
 
   function handleKeyDown(event) {
-    if (event.key === "/" && inputElement.current !== document.activeElement) {
+    if (event.key === '/' && inputElement.current !== document.activeElement) {
       event.preventDefault();
       inputElement.current.focus();
     }
@@ -34,7 +42,7 @@ const IconOverview = ({data}) => {
     router.push({
       query: {
         ...query,
-        query: debouncedQuery
+        query: debouncedQuery,
       },
     });
   }, [debouncedQuery]);
@@ -46,30 +54,31 @@ const IconOverview = ({data}) => {
 
   return (
     <>
-      <InputGroup position="sticky" top={4} zIndex={1} bg={
+      <InputGroup position="sticky" top={4} zIndex={1}>
-        colorMode == "light"
+        <InputLeftElement
-          ? theme.colors.white
+          children={
-          : theme.colors.gray[700]
+            <Icon>
-      }>
+              <SearchIcon />
-        <InputLeftElement children={(<Icon><SearchIcon /></Icon>)} />
+            </Icon>
+          }
+        />
         <Input
           ref={inputElement}
           placeholder={`Search ${Object.keys(data).length} icons (Press "/" to focus)`}
           value={queryText}
           onChange={(event) => setQueryText(event.target.value)}
+          bg={colorMode == 'light' ? theme.colors.white : theme.colors.gray[700]}
         />
       </InputGroup>
       <Box marginTop={5}>
         {results.length > 0 ? (
-
           <IconList icons={results} />
-
         ) : (
           <Text
             fontSize="2xl"
             fontWeight="bold"
             textAlign="center"
-            style={{ wordBreak: "break-word" }}
+            style={{ wordBreak: 'break-word' }}
           >
             No results found for "{query}"
           </Text>
@@ -77,6 +86,6 @@ const IconOverview = ({data}) => {
       </Box>
     </>
   );
-}
+};
 
 export default IconOverview;