add theme resize bar

src/interface/pages/ThemeCreator.tsx

@@ -1,6 +1,7 @@
 import CodeEditor from '../components/CodeEditor';
 import Accordion from '../components/Accordian';
 import { useState } from 'react';
+import ColorPicker from 'react-best-gradient-color-picker';
 
 export default function ThemeCreator() {
   const [theme, setTheme] = useState<CustomTheme>({
@@ -18,7 +19,7 @@ export default function ThemeCreator() {
   }
 
   return (
-    <div className='w-full h-[100vh] bg-zinc-100 dark:bg-zinc-800 dark:text-white transition duration-30'>
+    <div className='w-full min-h-[100vh] bg-zinc-100 dark:bg-zinc-800 dark:text-white transition duration-30'>
       <div className='flex flex-col gap-2 p-2'>
         <h1 className='text-xl font-semibold pb-0.5'>Theme Creator</h1>
 
@@ -32,16 +33,22 @@ export default function ThemeCreator() {
           <textarea id='themeDescription' placeholder='' value={theme.description} onChange={e => setTheme({ ...theme, description: e.target.value })} className='w-full p-2 mb-4 rounded-lg dark:border-gray-700 dark:bg-zinc-900 dark:text-white' />
         </div>
 
-        <div>
+        <div className=''>
           <label htmlFor='defaultColour' className='pb-1 text-sm'>Default Colour</label>
-          <input id='defaultColour' type='color' value={theme.defaultColour} onChange={e => setTheme({ ...theme, defaultColour: e.target.value })} className='w-full h-12 p-2 mb-4 rounded-lg dark:border-gray-700 dark:bg-zinc-900 dark:text-white' />
+          <div className=''>
+            <ColorPicker
+              disableDarkMode={true}
+              hideInputs={true}
+              value={theme.defaultColour}
+              onChange={(color: string) => setTheme({ ...theme, defaultColour: color })} />
+          </div>
         </div>
       
         
-
-        <Accordion>
+        <div>
+          <label htmlFor='defaultColour' className='pb-1 text-sm'>Default Colour</label>
           <CodeEditor height='100px' initialState={''} callback={handleSave} />
-        </Accordion>
+        </div>
 
         <button className='w-full px-4 py-2 mb-4 text-white transition bg-blue-500 rounded dark:text-white'>
           Save Theme