From 048122fa2cc263661b8313d8a204dc2607f1c38b Mon Sep 17 00:00:00 2001
From: SethBurkart123 <hi25S.burkart@hills.adventist.edu.au>
Date: Thu, 16 Nov 2023 14:41:47 +1100
Subject: [PATCH] fix backgroundselector

---
 .../src/components/BackgroundSelector.tsx     | 27 +++++--------------
 1 file changed, 6 insertions(+), 21 deletions(-)

diff --git a/interface/src/components/BackgroundSelector.tsx b/interface/src/components/BackgroundSelector.tsx
index 1f9a2c66..a11a5629 100644
--- a/interface/src/components/BackgroundSelector.tsx
+++ b/interface/src/components/BackgroundSelector.tsx
@@ -87,14 +87,7 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd
     store.delete(fileId);
     setBackgrounds(prev => prev.filter(bg => bg.id !== fileId));
   
-            <img 
-              className="object-cover w-full h-full rounded-xl" 
-              src={bg.url} 
-              alt="swatch" 
-            />
-          </div>
-        ))}
-        {backgrounds.concat(presetBackgrounds as Background[]).filter(bg => bg.type === 'image' && bg.isPreset && !bg.isDownloaded && !downloadedPresetIds.includes(bg.id)).map(bg => (
+    // Check if the background being deleted is currently selected
     if (fileId === selectedBackground) {
       selectNoBackground();  // Disable the current background
     }
@@ -130,24 +123,16 @@ export default function BackgroundSelector({ selectedType, setSelectedType, isEd
           <input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
         </div>
         {backgrounds.filter(bg => bg.type === 'image').map(bg => (
-          <div 
-            key={bg.id}
+          <div key={bg.id}
             onClick={() => selectBackground(bg.id)} 
-            className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id && selectedType === "background" ? 'dark:ring-2 ring-4' : 'ring-0'}`}
-          >
+            className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id && selectedType === "background" ? 'dark:ring-2 ring-4' : 'ring-0'}`}>
             {isEditMode && (
-              <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"
-                onClick={() => deleteBackground(bg.id)}
-              >
+              <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"
+                  onClick={() => deleteBackground(bg.id)}>
                 <div className="w-4 h-0.5 bg-white"></div>
               </div>
             )}
-            <img 
-              className="object-cover w-full h-full rounded-xl" 
-              src={bg.url} 
-              alt="swatch" 
-            />
+            <img className="object-cover w-full h-full rounded-xl" src={bg.url} alt="swatch" />
           </div>
         ))}
         {backgrounds.concat(presetBackgrounds as Background[]).filter(bg => bg.type === 'image' && bg.isPreset && !bg.isDownloaded && !downloadedPresetIds.includes(bg.id)).map(bg => (