From f5462495c119420bb62bbfc8046b5eaa6705a241 Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Tue, 8 Oct 2024 18:50:57 +1100
Subject: [PATCH] feat(ThemePage): add edit mode button

---
 src/svelte-interface/pages/settings/theme.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/svelte-interface/pages/settings/theme.svelte b/src/svelte-interface/pages/settings/theme.svelte
index 149c5924..c0de1fa4 100644
--- a/src/svelte-interface/pages/settings/theme.svelte
+++ b/src/svelte-interface/pages/settings/theme.svelte
@@ -16,6 +16,14 @@
     class="w-full px-4 py-2 mb-4 text-[13px] dark:text-white transition rounded-xl bg-zinc-200 dark:bg-zinc-700/50">
     { clearTheme ? 'Clear Theme' : 'Select a Theme' }
   </button>
-  <BackgroundSelector isEditMode={editMode} bind:selectedBackground={selectedBackground} bind:selectNoBackground={selectNoBackground} />
-  <ThemeSelector isEditMode={editMode} />
+  <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>
 </div>
\ No newline at end of file