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

improve themecover styling for removal and editing

Browse Source
This commit is contained in:
SethBurkart123
2024-04-05 10:12:08 +11:00
parent f811d5c3db
commit a94cccc4ab
1 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/interface/components/ThemeCover.tsx
+6 -3
View File
@@ -19,6 +19,7 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
onThemeDelete, onThemeDelete,
}) => { }) => {
const handleThemeClick = () => { const handleThemeClick = () => {
if (isEditMode) return;
onThemeSelect(theme.id); onThemeSelect(theme.id);
}; };
@@ -36,19 +37,21 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
> >
{isEditMode && ( {isEditMode && (
<div <div
className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center" className="absolute z-20 flex w-6 h-6 p-2 text-white transition-all rounded-full opacity-0 top-1 right-2 dark:bg-red-600 place-items-center group-hover:opacity-100 group-hover:top-2"
onClick={handleDeleteClick} onClick={handleDeleteClick}
> >
<div className="w-4 h-0.5 bg-white"></div> <div className="w-4 h-0.5 bg-white"></div>
</div> </div>
)} )}
{/* edit button */}
{ isEditMode ? <></> :
<div <div
className="absolute top-0 z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full opacity-0 right-2 dark:bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-2" className="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full opacity-0 top-1 right-2 dark:bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-2"
onClick={() => browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenThemeCreator', body: { themeID: theme.id } })} onClick={() => browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenThemeCreator', body: { themeID: theme.id } })}
> >
<PencilIcon className="w-4 h-4" /> <PencilIcon className="w-4 h-4" />
</div> </div>
}
<div className="relative top-0 z-10 flex justify-center w-full h-full overflow-hidden transition dark:text-white rounded-xl group place-items-center bg-zinc-100 dark:bg-zinc-900"> <div className="relative top-0 z-10 flex justify-center w-full h-full overflow-hidden transition dark:text-white rounded-xl group place-items-center bg-zinc-100 dark:bg-zinc-900">
{/* Render theme cover image or placeholder */} {/* Render theme cover image or placeholder */}