From 3acdcea555e215e888395548213f33013f14607f Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Sun, 31 Mar 2024 22:23:09 +1100
Subject: [PATCH] clean up styling of theme creator

---
 src/interface/pages/ThemeCreator.tsx | 46 ++++++++++++++++++----------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/interface/pages/ThemeCreator.tsx b/src/interface/pages/ThemeCreator.tsx
index 721847d2..e3779e70 100644
--- a/src/interface/pages/ThemeCreator.tsx
+++ b/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,8 +90,10 @@ 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'>
@@ -113,35 +116,40 @@ export default function ThemeCreator() {
           </div>
         </Accordion>
         
-        <div className='h-4'></div>
+        <Divider />
 
-        {theme.CustomImages.map((image, index) => (
-          <div key={image.id} className="flex items-center p-2 mb-4 bg-white rounded-lg shadow dark:bg-zinc-900">
-            <div className="flex-grow mr-4">
-              <img src={image.url} alt={`Custom Image ${index + 1}`} className="object-contain w-auto rounded max-h-32" />
+        <h2 className='pb-1 text-lg font-semibold'>Custom Images</h2>
+        <p className='pb-3 text-sm'>Upload images to include them in your theme via css variables.</p>
+
+        {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">
-              Remove
+            <button onClick={() => handleRemoveImage(image.id)} className="p-2 ml-1 transition dark:text-white">
+              <XMarkIcon height={20} />
             </button>
           </div>
         ))}
 
-        <input
-          type='file'
-          accept='image/*'
-          onChange={handleImageUpload}
-        />
+        <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">
+          <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">
+            {/*  Plus icon */}
+            
+          </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
             className='mt-2'
@@ -156,4 +164,8 @@ export default function ThemeCreator() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
+
+function Divider() {
+  return <div className='w-full h-0.5 my-4 bg-zinc-200 dark:bg-zinc-700'></div>;
+}