Add className prop to CodeEditor component and update styles in ThemeCreator page

src/interface/components/CodeEditor.tsx

@@ -5,7 +5,7 @@ import { less } from '@codemirror/lang-less'
 import { useCallback, useEffect, useState } from 'react';
 import './CodeEditor.css'
 
-export default function CodeEditor({ callback, initialState, height }: { callback: (value: string) => void, initialState: string, height: string }) {
+export default function CodeEditor({ callback, initialState, height, className }: { callback: (value: string) => void, initialState: string, height: string, className?: string}) {
   const [value, setValue] = useState(initialState)
   const [darkMode, setDarkMode] = useState(false)
 
@@ -31,7 +31,7 @@ export default function CodeEditor({ callback, initialState, height }: { callbac
       }}
       theme={ darkMode ? githubDark : githubLight }
       placeholder={"Happy coding!"}
-      className='rounded-lg text-[13px]'
+      className={`rounded-lg text-[13px] ${className}`}
       value={value}
       height={height}
       extensions={[less(), color]}

src/interface/pages/ThemeCreator.tsx

@@ -15,6 +15,15 @@ export default function ThemeCreator() {
     CustomImages: []
   });
 
+  function saveTheme() {
+    console.log(theme);
+  }
+
+  function CodeUpdate(value: string) {
+    console.log(value);
+    setTheme((previousTheme) => ({ ...previousTheme, CustomCSS: value }));
+  }
+
   return (
     <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 p-2'>
@@ -28,7 +37,7 @@ export default function ThemeCreator() {
             placeholder='Whatcha calling it?'
             value={theme.name}
             onChange={e => setTheme({ ...theme, name: e.target.value })}
-            className='w-full p-2 mb-4 rounded-lg dark:border-gray-700 dark:bg-zinc-900 dark:text-white' />
+            className='w-full p-2 mb-4 transition-all duration-300 rounded-lg focus:outline-none ring-0 focus:ring-1 ring-zinc-100 dark:ring-zinc-700 dark:bg-zinc-900 dark:text-white' />
         </div>
 
         <div>
@@ -37,11 +46,11 @@ export default function ThemeCreator() {
           id='themeDescription'
           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' />
+          className='w-full p-2 mb-4 rounded-lg focus:outline-none ring-0 focus:ring-1 ring-zinc-100 dark:ring-zinc-700 dark:bg-zinc-900 dark:text-white' />
         </div>
         
         <Accordion defaultOpened title='Default Theme Colour'>
-          <div className='p-2 bg-white rounded-lg w-fit dark:bg-zinc-900'>
+          <div className='p-2 mt-2 bg-white rounded-lg w-fit dark:bg-zinc-900'>
             <ColorPicker
               width={278}
               disableDarkMode={true}
@@ -50,8 +59,11 @@ export default function ThemeCreator() {
               onChange={(color: string) => setTheme({ ...theme, defaultColour: color })} />
           </div>
           
-          <div className='flex items-center justify-between py-2'>
+          <div className='flex items-center justify-between pt-4'>
-            <div className='text-sm '>Allow users to change the colour</div>
+            <div>
+              <div className='pr-2 text-sm font-semibold'>Customisable</div>
+              <div className='pr-2 text-[11px]'>Allow users to change the theme colour</div>
+            </div>
             <Switch
               state={theme.CanChangeColour}
               onChange={value => setTheme({ ...theme, CanChangeColour: value })} />
@@ -60,14 +72,21 @@ export default function ThemeCreator() {
         
         <div className='h-4'></div>
 
-        <Accordion defaultOpened title='Custom CSS'>
+        <Accordion defaultOpened title='Custom Images'>
-          <CodeEditor
+          child
-            height='300px'
-            initialState={theme.CustomCSS}
-            callback={(code: string) => setTheme({ ...theme, CustomCSS: code })} />
         </Accordion>
         
-        <button className='w-full px-4 py-2 my-4 text-white transition bg-blue-500 rounded dark:text-white'>
+        <div className='h-4'></div>
+
+        <Accordion defaultOpened title='Custom CSS'>
+          <CodeEditor
+            className='mt-2'
+            height='300px'
+            initialState={theme.CustomCSS}
+            callback={CodeUpdate} />
+        </Accordion>
+        
+        <button onClick={saveTheme} className='w-full px-4 py-2 my-4 text-white transition bg-blue-500 rounded dark:text-white'>
           Save Theme
         </button>