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

update custom theme coverImage UI

Browse Source
This commit is contained in:
SethBurkart123
2024-04-05 18:06:47 +11:00
parent f30eec8f9e
commit 15659fdd84
1 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/interface/pages/ThemeCreator.tsx
+13 -5
View File
@@ -168,11 +168,11 @@ function ThemeCreator() {
<Divider /> <Divider />
<p className='pr-2 text-sm font-semibold'>Cover Image <span className='italic font-light opacity-80'>(optional)</span></p> <p className='pr-2 text-sm font-semibold'>Cover Image <span className='italic font-light opacity-80'>(optional)</span></p>
<p className='pb-3 text-sm'>Upload an image to use as the cover image for your theme. <span className='italic font-light'>Recommended resolution: 348x64</span></p> <p className='pb-3 text-sm'>Upload an image to use as the cover image for your theme. <span className='italic font-light'>Recommended resolution: 368x120</span></p>
<div className="relative flex justify-center w-full h-32 gap-1 overflow-hidden transition rounded-lg place-items-center bg-zinc-100 dark:bg-zinc-900"> <div className="relative flex justify-center w-full h-24 gap-1 overflow-hidden transition rounded-lg group place-items-center bg-zinc-100 dark:bg-zinc-900">
<PlusIcon height={18} /> <PlusIcon className={`transition pointer-events-none z-30 ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`} height={18} />
<span className='dark:text-white'>Add cover image</span> <span className={`dark:text-white pointer-events-none z-30 transition ${ theme.coverImage ? 'opacity-0 group-hover:opacity-100' : ''}`}>{theme.coverImage ? 'Change' : 'Add'} cover image</span>
<input type="file" accept='image/*' onChange={(e) => { <input type="file" accept='image/*' onChange={(e) => {
const file = e.target.files?.[0]; const file = e.target.files?.[0];
e.target.value = ''; e.target.value = '';
@@ -184,7 +184,15 @@ function ThemeCreator() {
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
}} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" /> }} className="absolute inset-0 z-10 w-full h-full opacity-0 cursor-pointer" />
{
theme.coverImage && (
<>
<div className="absolute z-20 w-full h-full transition-opacity opacity-0 pointer-events-none group-hover:opacity-100 bg-black/20"></div>
<img src={URL.createObjectURL(theme.coverImage)} alt='Cover Image' className="absolute z-0 object-cover w-full h-full rounded" />
</>
)
}
</div> </div>
<div className='flex items-center justify-between pt-4'> <div className='flex items-center justify-between pt-4'>