clean up styling of theme creator

src/interface/pages/ThemeCreator.tsx

@@ -4,6 +4,7 @@ import ColorPicker from 'react-best-gradient-color-picker';
 import Accordion from '../components/Accordian';
 import Switch from '../components/Switch';
 import { sendThemeUpdate } from '../hooks/ThemeManagment';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 
 export default function ThemeCreator() {
   const [theme, setTheme] = useState<CustomTheme>({
@@ -89,9 +90,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 focus:outline-none ring-0 focus:ring-1 ring-zinc-100 dark:ring-zinc-700 dark:bg-zinc-900 dark:text-white' />
+          className='w-full p-2 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>
 
+        <Divider />
+        
         <Accordion defaultOpened title='Default Theme Colour'>
           <div className='p-2 mt-2 bg-white rounded-lg w-fit dark:bg-zinc-900'>
             <ColorPicker
@@ -113,34 +116,39 @@ export default function ThemeCreator() {
           </div>
         </Accordion>
         
-        <div className='h-4'></div>
+        <Divider />
 
-        {theme.CustomImages.map((image, index) => (
+        <h2 className='pb-1 text-lg font-semibold'>Custom Images</h2>
-          <div key={image.id} className="flex items-center p-2 mb-4 bg-white rounded-lg shadow dark:bg-zinc-900">
+        <p className='pb-3 text-sm'>Upload images to include them in your theme via css variables.</p>
-            <div className="flex-grow mr-4">
+
-              <img src={image.url} alt={`Custom Image ${index + 1}`} className="object-contain w-auto rounded max-h-32" />
+        {theme.CustomImages.map((image) => (
+          <div key={image.id} className="flex items-center h-16 py-2 mb-4 bg-white rounded-lg shadow-lg dark:bg-zinc-900">
+            <div className="flex-1 h-full ">
+              <img src={image.url} alt={image.variableName} className="object-contain h-full rounded" />
             </div>
             <input
               type="text"
               value={image.variableName}
               onChange={(e) => handleImageVariableChange(image.id, e.target.value)}
               placeholder="CSS Variable Name"
-              className="flex-grow w-full p-2 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"
+              className="flex-grow flex-[3] w-full p-2 transition-all duration-300 rounded-lg focus:outline-none ring-0 focus:ring-1 ring-zinc-100 dark:ring-zinc-700 dark:bg-zinc-800/50 dark:text-white"
             />
-            <button onClick={() => handleRemoveImage(image.id)} className="px-4 py-2 ml-4 text-sm text-white transition bg-red-500 rounded hover:bg-red-600 dark:text-white">
+            <button onClick={() => handleRemoveImage(image.id)} className="p-2 ml-1 transition dark:text-white">
-              Remove
+              <XMarkIcon height={20} />
             </button>
           </div>
         ))}
 
-        <input
+        <div className="relative flex justify-center w-full h-8 overflow-hidden transition place-items-center rounded-xl bg-zinc-100 dark:bg-zinc-900">
-          type='file'
+          <div className="flex items-center justify-center text-3xl font-bold transition dark:text-white font-IconFamily dark:hover:text-zinc-200 hover:text-zinc-800">
-          accept='image/*'
+            {/*  Plus icon */}
-          onChange={handleImageUpload}
+            
-        />
+          </div>
+          <span className='gap-2 dark:text-white'>Add image</span>
+          <input type="file" accept='image/*' onChange={handleImageUpload} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
+        </div>
 
-        
+        <Divider />
-        <div className='h-4'></div>
         
         <Accordion defaultOpened title='Custom CSS'>
           <CodeEditor
@@ -157,3 +165,7 @@ export default function ThemeCreator() {
     </div>
   );
 }
+
+function Divider() {
+  return <div className='w-full h-0.5 my-4 bg-zinc-200 dark:bg-zinc-700'></div>;
+}