style(ThemePage): update editmode styles to look better

src/svelte-interface/components/themes/BackgroundSelector.svelte

@@ -176,43 +176,47 @@
   });
 </script>
 
-<div bind:this={element} class="relative px-1 py-2">
-  <h2 class="pb-2 text-lg font-bold">Background Images</h2>
-  <div class="flex flex-wrap gap-4 mb-4">
-    {#if !isEditMode}
-      <BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
-    {/if}
-    {#each imageBackgrounds as bg (bg.id)}
-      {#if isVisible && bg.blob}
-        <BackgroundItem
-          bg={bg}
-          isSelected={selectedBackground === bg.id}
-          isEditMode={isEditMode}
-          onClick={() => selectBackground(bg.id)}
-          onDelete={() => deleteBackground(bg.id)}/>
-      {:else}
-        <div class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-900 animate-pulse"></div>
+<div bind:this={element} class="relative px-1 { !( isEditMode && imageBackgrounds.length === 0 && videoBackgrounds.length === 0 ) && 'pt-2' }">
+  {#if !(imageBackgrounds.length === 0 && isEditMode)}
+    <h2 class="pb-2 text-lg font-bold">Background Images</h2>
+    <div class="flex flex-wrap gap-4 mb-4">
+      {#if !isEditMode}
+        <BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
       {/if}
-    {/each}
-  </div>
+      {#each imageBackgrounds as bg (bg.id)}
+        {#if isVisible && bg.blob}
+          <BackgroundItem
+            bg={bg}
+            isSelected={selectedBackground === bg.id}
+            isEditMode={isEditMode}
+            onClick={() => selectBackground(bg.id)}
+            onDelete={() => deleteBackground(bg.id)}/>
+        {:else}
+          <div class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-900 animate-pulse"></div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
 
-  <h2 class="py-2 text-lg font-bold">Background Videos</h2>
-  <div class="flex flex-wrap gap-4">
-    {#if !isEditMode}
-      <BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
-    {/if}
-    {#each videoBackgrounds as bg (bg.id)}
-      {#if isVisible && bg.blob}
-        <BackgroundItem
-          bg={bg}
-          isSelected={selectedBackground === bg.id}
-          isEditMode={isEditMode}
-          onClick={() => selectBackground(bg.id)}
-          onDelete={() => deleteBackground(bg.id)}
-        />
-      {:else}
-        <div class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-900 animate-pulse"></div>
+  {#if !(videoBackgrounds.length === 0 && isEditMode)}
+    <h2 class="py-2 text-lg font-bold">Background Videos</h2>
+    <div class="flex flex-wrap gap-4">
+      {#if !isEditMode}
+        <BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
       {/if}
-    {/each}
-  </div>
+      {#each videoBackgrounds as bg (bg.id)}
+        {#if isVisible && bg.blob}
+          <BackgroundItem
+            bg={bg}
+            isSelected={selectedBackground === bg.id}
+            isEditMode={isEditMode}
+            onClick={() => selectBackground(bg.id)}
+            onDelete={() => deleteBackground(bg.id)}
+          />
+        {:else}
+          <div class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-900 animate-pulse"></div>
+        {/if}
+      {/each}
+    </div>
+  {/if}
 </div>

src/svelte-interface/components/themes/ThemeSelector.svelte

@@ -98,7 +98,7 @@
 </script>
 
 <div
-  class="w-full mt-3 mb-1"
+  class="w-full pt-5 mb-1"
   role="list"
   tabindex="-1"
   ondragover={handleDragOver}
@@ -121,7 +121,7 @@
     </div>
   </div>
   <h2 class="pb-2 text-lg font-bold">Themes</h2>
-  <div class="flex flex-col gap-2 px-1">
+  <div class="flex flex-col gap-2 px-2">
     {#if themes}
       {#each themes.themes as theme (theme.id)}
         <button
@@ -130,7 +130,7 @@
         >
           {#if isEditMode}
             <div
-              class="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"
+              class="absolute z-20 flex w-6 h-6 p-2 text-white bg-red-600 rounded-full opacity-100 right-2 place-items-center top-2"
               onclick={(event) => { event.stopPropagation(); handleThemeDelete(theme.id) }}
               onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleThemeDelete(theme.id) }}
               role="button"
@@ -162,7 +162,7 @@
             </div>
           {/if}
 
-          <div class="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 class="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 { isEditMode ? 'animate-shake brightness-90' : ''}">
             {#if theme.coverImage}
               <img
                 src={typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}

src/svelte-interface/pages/settings/theme.svelte

@@ -17,12 +17,10 @@
     { clearTheme ? 'Clear Theme' : 'Select a Theme' }
   </button>
   <div class="relative w-full">
-    <!-- edit button -->
-
     <button
       onclick={() => editMode = !editMode}
       class="absolute top-0 right-0 z-10 w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700">{editMode ? '\ue9e4' : '\uec38'}</button>
-    <!-- edit button -->
+
     <BackgroundSelector isEditMode={editMode} bind:selectedBackground={selectedBackground} bind:selectNoBackground={selectNoBackground} />
     <ThemeSelector isEditMode={editMode} />
   </div>