fixed image deleting not working

interface/src/components/backgroundSelector/DownloadProgressCircle.tsx

@@ -8,7 +8,7 @@ export const DownloadProgressCircle: React.FC<DownloadProgressCircleProps> = ({
   const calcCircumference = (radius: number) => 2 * Math.PI * radius;
 
   return (
-    <svg className="w-full h-full text-zinc-100 dark:text-zinc-700" viewBox="0 0 36 36">
+    <svg className="absolute z-10 w-full h-full text-zinc-100 dark:text-zinc-700" viewBox="0 0 36 36">
       <circle stroke="currentColor" fill="none" strokeWidth="4" strokeLinecap="round" cx="18" cy="18" r="10" strokeDasharray={`${calcCircumference(14)} ${calcCircumference(14)}`} strokeDashoffset="0" transform="rotate(-90 18 18)"></circle>
       <circle stroke="#3B82F6" fill="none" strokeWidth="4" strokeLinecap="round" cx="18" cy="18" r="10" strokeDasharray={`${calcCircumference(14)} ${calcCircumference(14)}`} strokeDashoffset={`${calcCircumference(14) * (1 - (progress / 100))}`} transform="rotate(-90 18 18)"></circle>
     </svg>

src/background.js

@@ -1,4 +1,59 @@
 /*global chrome*/
+export const openDB = () => {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open('MyDatabase', 1);
+
+    request.onupgradeneeded = (event) => {
+      const db = event.target.result;
+      db.createObjectStore('backgrounds', { keyPath: 'id' });
+    };
+
+    request.onsuccess = () => {
+      resolve(request.result);
+    };
+
+    request.onerror = (event) => {
+      reject('Error opening database: ' + event.target.errorCode);
+    };
+  });
+};
+
+export const writeData = async (type, data) => {
+  const db = await openDB();
+
+  const tx = db.transaction('backgrounds', 'readwrite');
+  const store = tx.objectStore('backgrounds');
+  const request = await store.put({ id: 'customBackground', type, data });
+
+  return request.result;
+};
+
+export const readData = () => {
+  return new Promise((resolve, reject) => {
+    openDB()
+      .then(db => {
+        const tx = db.transaction('backgrounds', 'readonly');
+        const store = tx.objectStore('backgrounds');
+
+        // Retrieve the custom background
+        const getRequest = store.get('customBackground');
+
+        // Attach success and error event handlers
+        getRequest.onsuccess = function(event) {
+          resolve(event.target.result);
+        };
+
+        getRequest.onerror = function(event) {
+          console.error('An error occurred:', event);
+          reject(event);
+        };
+      })
+      .catch(error => {
+        console.error('An error occurred:', error);
+        reject(error);
+      });
+  });
+};
 
 function ReloadSEQTAPages() {
   chrome.tabs.query({}, function (tabs) {