feat: UI color picker component (#189)

* wip: color picker styled

* chore: color picker

* style: alight color picker

* style: align color picker

ui/src/components/core/icon/custom/chevron-down-icon.tsx

@@ -0,0 +1,17 @@
+import { IconStyles as IS } from '../icon.styles';
+
+export const ChevronDownIcon: React.FC<IS.CustomProps> = (props) => (
+  <IS.Custom
+    {...props}
+    viewBox="0 0 12 6"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0.96967 0.21967C1.26256 -0.0732233 1.73744 -0.0732233 2.03033 0.21967L6 4.18934L9.96967 0.21967C10.2626 -0.0732233 10.7374 -0.0732233 11.0303 0.21967C11.3232 0.512563 11.3232 0.987437 11.0303 1.28033L6.53033 5.78033C6.23744 6.07322 5.76256 6.07322 5.46967 5.78033L0.96967 1.28033C0.676777 0.987437 0.676777 0.512563 0.96967 0.21967Z"
+      fill="currentColor"
+    />
+  </IS.Custom>
+);

ui/src/components/core/icon/custom/index.ts

@@ -1,5 +1,6 @@
 export * from './metamask-icon';
 export * from './ethereum-icon';
+export * from './chevron-down-icon';
 export * from './fleek-name-icon';
 export * from './beta-tag-icon';
 export * from './error-icon';

ui/src/components/core/icon/icon-library.tsx

@@ -2,10 +2,10 @@ import { IoLogoGithub } from '@react-icons/all-files/io5/IoLogoGithub';
 import { IoArrowBackCircleSharp } from '@react-icons/all-files/io5/IoArrowBackCircleSharp';
 import { IoInformationCircleSharp } from '@react-icons/all-files/io5/IoInformationCircleSharp';
 import { AiOutlineCheck } from '@react-icons/all-files/ai/AiOutlineCheck';
-import { AiOutlineDown } from '@react-icons/all-files/ai/AiOutlineDown';
 import { BiSearch } from '@react-icons/all-files/bi/BiSearch';
 import { IoCloudUploadSharp } from '@react-icons/all-files/io5/IoCloudUploadSharp';
 import {
+  ChevronDownIcon,
   MetamaskIcon,
   EthereumIcon,
   ErrorIcon,
@@ -18,6 +18,7 @@ import { AiOutlineTwitter } from '@react-icons/all-files/ai/AiOutlineTwitter';
 import { IoClose } from '@react-icons/all-files/io5/IoClose';
 import { AiFillCheckCircle } from '@react-icons/all-files/ai/AiFillCheckCircle';
 import { BiGitBranch } from '@react-icons/all-files/bi/BiGitBranch';
+import { BsFillSquareFill } from '@react-icons/all-files/bs/BsFillSquareFill';
 
 export const IconLibrary = Object.freeze({
   back: IoArrowBackCircleSharp,
@@ -25,7 +26,7 @@ export const IconLibrary = Object.freeze({
   branch: BiGitBranch,
   check: AiOutlineCheck,
   'check-circle': IoCheckmarkCircleSharp,
-  'chevron-down': AiOutlineDown,
+  'chevron-down': ChevronDownIcon,
   close: IoClose,
   error: ErrorIcon,
   ethereum: EthereumIcon,
@@ -36,6 +37,7 @@ export const IconLibrary = Object.freeze({
   upload: IoCloudUploadSharp,
   metamask: MetamaskIcon, //remove if not used
   search: BiSearch,
+  square: BsFillSquareFill,
   success: AiFillCheckCircle,
   twitter: AiOutlineTwitter,
 });

ui/src/components/core/input/input-file.tsx

@@ -34,6 +34,10 @@ export const StyledInputFile = forwardRef<HTMLDivElement, InputFileProps>(
       onChange(e);
     };
 
+    const handleInputClick = () => {
+      inputFileRef.current?.click();
+    };
+
     return (
       <>
         <Flex
@@ -45,7 +49,7 @@ export const StyledInputFile = forwardRef<HTMLDivElement, InputFileProps>(
           }}
           ref={ref}
           {...props}
-          onClick={() => inputFileRef.current?.click()}
+          onClick={handleInputClick}
         >
           {file !== '' ? (
             <img className="absolute w-14 h-14" src={file} alt="logo" />

ui/src/components/layout/page/page.styles.ts

@@ -13,7 +13,6 @@ export abstract class PageStyles {
     minHeight: '85vh',
     maxWidth: '$7xl',
     margin: '0 auto',
-    padding: '$10',
     display: 'grid',
   });
 }

ui/src/views/components-test/color-picker.tsx

@@ -0,0 +1,15 @@
+import { Button, Flex, Icon } from '@/components';
+
+export const ColorPickerTest = () => {
+  return (
+    <Flex css={{ margin: '$22', gap: '$5', width: '$8' }}>
+      <Button
+        leftIcon={<Icon name="square" css={{ color: '#FFFFFF' }} />}
+        rightIcon={<Icon name="chevron-down" css={{ fontSize: '0.625rem' }} />}
+        css={{ py: '$1', height: '$5', borderRadius: '$md', color: '$slate12' }}
+      >
+        #FFFFFF
+      </Button>
+    </Flex>
+  );
+};

ui/src/views/components-test/components-test.tsx

@@ -1,10 +1,12 @@
 import { Flex } from '@/components';
+import { ColorPickerTest } from './color-picker';
 import { ComboboxTest } from './combobox-test';
 import { ToastTest } from './toast-test';
 
 export const ComponentsTest = () => {
   return (
     <Flex css={{ flexDirection: 'column' }}>
+      <ColorPickerTest />
       <ToastTest />
       <ComboboxTest />
     </Flex>

ui/src/views/mint/nfa-step/form-step/fields/logo-field/color-picker.tsx

@@ -1,4 +1,4 @@
-import { Card, Flex } from '@/components';
+import { Button, Card, Flex, Icon } from '@/components';
 import { useRef } from 'react';
 // @ts-ignore
 import ColorThief from 'colorthief';
@@ -6,6 +6,7 @@ import { Mint } from '../../../../mint.context';
 
 export const ColorPicker = () => {
   const { appLogo, logoColor, setLogoColor } = Mint.useContext();
+  const inputColorRef = useRef<HTMLInputElement>(null);
   const imageRef = useRef<HTMLImageElement>(null);
 
   const handleLogoLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
@@ -16,17 +17,47 @@ export const ColorPicker = () => {
     setLogoColor(hexColor);
   };
 
+  const handleColorPickerClick = () => {
+    inputColorRef.current?.click();
+  };
+
   return (
     <Card.Text css={{ height: '$22', mt: '$6' }}>
-      <Flex css={{ gap: '$3h' }}>
-        <span>Primary Color</span>
-        {/* TODO crate color picker component */}
-        <input
-          type="color"
-          value={logoColor}
-          onChange={(e) => setLogoColor(e.target.value)}
-        />
-      </Flex>
+      <div className="relative">
+        <Flex css={{ gap: '$3h', alignItems: 'center' }}>
+          <span>Primary Color</span>
+          {/* TODO crate color picker component */}
+          <Button
+            leftIcon={
+              <Icon
+                name="square"
+                css={{ color: `${logoColor || '#000000'}` }}
+              />
+            }
+            rightIcon={
+              <Icon name="chevron-down" css={{ fontSize: '0.625rem' }} />
+            }
+            css={{
+              py: '$1',
+              height: '$5',
+              borderRadius: '$md',
+              color: '$slate12',
+              zIndex: '$dropdown',
+            }}
+            onClick={handleColorPickerClick}
+          >
+            {logoColor.toUpperCase() || '#000000'}
+          </Button>
+          <input
+            ref={inputColorRef}
+            className="absolute right-16"
+            type="color"
+            value={logoColor}
+            onChange={(e) => setLogoColor(e.target.value)}
+          />
+        </Flex>
+      </div>
+
       <img
         className="hidden"
         src={appLogo}