BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

clean up styling of theme creator

Browse Source
This commit is contained in:
SethBurkart123
2024-03-31 22:23:09 +11:00
parent 3373590a1d
commit 3acdcea555
1 changed files with 29 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/interface/pages/ThemeCreator.tsx
+28 -16
View File
@@ -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) => (
<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>
<div className='h-4'></div>
<Divider />
<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>;
}