From a3cd2bbf46d1ff7d8d9f12d153bc76468c7c8bab Mon Sep 17 00:00:00 2001
From: SethBurkart123 <seth.burkart@hills.adventist.edu.au>
Date: Mon, 1 Apr 2024 21:36:15 +1100
Subject: [PATCH] add close button to theme creator

---
 src/css/injected.scss        | 12 ++++++++++++
 src/seqta/ui/ThemeCreator.ts | 15 ++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/css/injected.scss b/src/css/injected.scss
index 337deaf5..5d49f9f8 100644
--- a/src/css/injected.scss
+++ b/src/css/injected.scss
@@ -56,6 +56,18 @@ html {
   background-color: rgb(28 28 30);
 }
 
+.themeCloseButton {
+  position: absolute !important;
+  color: var(--text-primary) !important;
+  font-size: x-large !important;
+  top: 5px;
+  right: 5px;
+  border-radius: 5rem !important;
+  padding: 8px;
+  cursor: pointer;
+  z-index: 10000;
+}
+
 .connectedNotificationsWrapper > div > button > svg > g {
   fill: var(--theme-primary) !important;
 }
diff --git a/src/seqta/ui/ThemeCreator.ts b/src/seqta/ui/ThemeCreator.ts
index a1296137..1f6731bf 100644
--- a/src/seqta/ui/ThemeCreator.ts
+++ b/src/seqta/ui/ThemeCreator.ts
@@ -18,6 +18,13 @@ export function OpenThemeCreator() {
   const mainContent = document.querySelector('#container') as HTMLDivElement;
   if (mainContent) mainContent.style.width = `calc(100% - ${width})`;
 
+  // close button
+  const closeButton = document.createElement('button');
+  closeButton.classList.add('themeCloseButton');
+  closeButton.textContent = '×';
+  closeButton.addEventListener('click', CloseThemeCreator);
+  document.body.appendChild(closeButton);
+
   const resizeBar = document.createElement('div');
   resizeBar.classList.add('resizeBar');
   resizeBar.style.right = '307.5px';
@@ -66,11 +73,13 @@ export function OpenThemeCreator() {
  */
 export function CloseThemeCreator() {
   const themeCreatorIframe = document.getElementById('themeCreatorIframe');
+  const closeButton = document.querySelector('.themeCloseButton') as HTMLButtonElement;
+  const resizeBar = document.querySelector('.resizeBar') as HTMLDivElement;
+  
   if (themeCreatorIframe) themeCreatorIframe.remove();
+  if (closeButton) closeButton.remove();
+  if (resizeBar) resizeBar.remove();
 
   const mainContent = document.querySelector('#container') as HTMLDivElement;
   if (mainContent) mainContent.style.width = '100%';
-
-  const resizeBar = document.querySelector('.resizeBar') as HTMLDivElement;
-  if (resizeBar) resizeBar.remove();
 }
\ No newline at end of file